Compiled with problems: × ERROR in ./node_modules/@react-navigation/drawer/lib/module/views/legacy/Drawer.js 64:26-40 export 'default'.'Value' (imported as 'Animated') was not found in 'react-native-reanimated' (possible exports: FlatList, Image, ScrollView, Text, View, addWhitelistedNativeProps, addWhitelistedUIProps, createAnimatedComponent)

[melbythomas]

Hi @ALL am facing an issue , i have create a react native ts project in web, trying to run in drwer navigation i got error. and tried above solution doesnt work.

Compiled with problems:
×
ERROR in ./node_modules/@react-navigation/drawer/lib/module/views/legacy/Drawer.js 77:26-40
export 'default'.'Value' (imported as 'Animated') was not found in 'react-native-reanimated' (possible exports: FlatList, Image, ScrollView, Text, View, addWhitelistedNativeProps, addWhitelistedUIProps, createAnimatedComponent)
ERROR in ./node_modules/@react-navigation/drawer/lib/module/views/legacy/Drawer.js 78:25-39
export 'default'.'Value' (imported as 'Animated') was not found in 'react-native-reanimated' (possible exports: FlatList, Image, ScrollView, Text, View, addWhitelistedNativeProps, addWhitelistedUIProps, createAnimatedComponent)
ERROR in ./node_modules/@react-navigation/drawer/lib/module/views/legacy/Drawer.js 367:42-55
export 'default'.'Code' (imported as 'Animated') was not found in 'react-native-reanimated' (possible exports: FlatList, Image, ScrollView, Text, View, addWhitelistedNativeProps, addWhitelistedUIProps, createAnimatedComponent)
ERROR in ./node_modules/@react-navigation/drawer/lib/module/views/legacy/Drawer.js 371:77-90
export 'default'.'Code' (imported as 'Animated') was not found in 'react-native-reanimated' (possible exports: FlatList, Image, ScrollView, Text, View, addWhitelistedNativeProps, addWhitelistedUIProps, createAnimatedComponent)

Package.json
{
"name": "onboarding",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest",
"web": "react-scripts start"
},
"dependencies": {
"@expo/vector-icons": "^13.0.0",
"@react-native-community/masked-view": "*",
"@react-navigation/bottom-tabs": "6.3.1",
"@react-navigation/drawer": "6.4.1",
"@react-navigation/elements": "1.3.3",
"@react-navigation/material-bottom-tabs": "6.2.1",
"@react-navigation/material-top-tabs": "6.2.1",
"@react-navigation/native": "6.0.10",
"@react-navigation/native-stack": "6.6.1",
"@react-navigation/stack": "6.2.1",
"react": "18.2.0",
"react-dom": "^18.2.0",
"react-native": "0.73.2",
"react-native-gesture-handler": "~2.12.0",
"react-native-pager-view": "6.2.0",
"react-native-paper": "^4.7.2",
"react-native-reanimated": "~3.3.0",
"react-native-safe-area-context": "4.6.3",
"react-native-screens": "~3.22.0",
"react-native-tab-view": "^3.0.0",
"react-native-web": "^0.19.10"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native/babel-preset": "0.73.19",
"@react-native/eslint-config": "0.73.2",
"@react-native/metro-config": "0.73.3",
"@react-native/typescript-config": "0.73.1",
"@types/react": "^18.2.6",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.6.3",
"eslint": "^8.19.0",
"jest": "^29.6.3",
"prettier": "2.8.8",
"react-scripts": "^5.0.1",
"react-test-renderer": "18.2.0",
"typescript": "5.0.4"
},
"engines": {
"node": ">=18"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
entry: ['babel-polyfill', './index.js'],
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './index.html',
}),
new webpack.EnvironmentPlugin({JEST_WORKER_ID: null}),
new webpack.DefinePlugin({process: {env: {}}}),
],
module: {
strictExportPresence: false,
rules: [
{
test: /.(js|jsx)$/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-react',
{plugins: ['@babel/plugin-proposal-class-properties']},
],
},
},
},
],
},
resolve: {
alias: {'react-native$': 'react-native-web'},
extensions: ['.web.js', '.js'],
},
};
babel.config.js
module.exports = {

presets: [
'@babel/preset-env',
'@babel/preset-react',
'babel-preset-react-native-web',
],
plugins: [
'@babel/plugin-proposal-export-namespace-from',
// 'react-native-reanimated/plugin',
],
resolve: {
alias: {
'react-native$': 'react-native-web',
},
},
};

App.tsx
import 'react-native-gesture-handler';
import * as React from 'react';
import {View, Text} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createDrawerNavigator} from '@react-navigation/drawer';

function Feed() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
Feed Screen

);
}

function Notifications() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
Notifications Screen

);
}

function Profile() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
Profile Screen

);
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
return (
<Drawer.Navigator useLegacyImplementation initialRouteName="Feed">
<Drawer.Screen
name="Feed"
component={Feed}
options={{drawerLabel: 'Home'}}
/>
<Drawer.Screen
name="Notifications"
component={Notifications}
options={{drawerLabel: 'Updates'}}
/>
<Drawer.Screen
name="Profile"
component={Profile}
options={{drawerLabel: 'Profile'}}
/>
</Drawer.Navigator>
);
}

export default function App() {
return (

);
}
Am using raect native cli

[ProExeTest0]

I am also facing Same Kind of Issue in React native Web .