IOS_Error_ScreenShotI am new to react native. I am trying to include drawer navigation inside my react app but I am not able to do it. I followed each and every steps provided in the documentation. But still I am getting the below error, can you tell me how to fix it providing my code snippet and sandbox below. I researched and found the below error but still not helping me
ios _reactnativereanimated.default.Value is not a constructor
TypeError:Undefined is not an object while trying an animation in ReactNative
Providing my code snippet and package.json below
App.js
import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer, DrawerActions } from '@react-navigation/native';
import {
createDrawerNavigator,
DrawerContentScrollView,
DrawerItemList,
DrawerItem,
} from '@react-navigation/drawer';
import Animated, { Value } from 'react-native-reanimated'
function Feed({ navigation }) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Feed Screen</Text>
<Button
title="Open drawer"
onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
/>
<Button
title="Toggle drawer"
onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
/>
</View>
);
}
function Notifications() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Notifications Screen</Text>
</View>
);
}
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem
label="Close drawer"
onPress={() => props.navigation.dispatch(DrawerActions.closeDrawer())}
/>
<DrawerItem
label="Toggle drawer"
onPress={() => props.navigation.dispatch(DrawerActions.toggleDrawer())}
/>
</DrawerContentScrollView>
);
}
const Drawer = createDrawerNavigator();
function MyDrawer() {
return (
<Drawer.Navigator
useLegacyImplementation
drawerContent={(props) => <CustomDrawerContent {...props} />}
>
<Drawer.Screen name="Feed" component={Feed} />
<Drawer.Screen name="Notifications" component={Notifications} />
</Drawer.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyDrawer />
</NavigationContainer>
);
}
index.js
/**
* @format
*/
import 'react-native-gesture-handler';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
package.json
{
"name": "FCC",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@react-navigation/drawer": "^6.4.1",
"@react-navigation/native": "^6.0.10",
"@react-navigation/native-stack": "^6.6.2",
"react": "17.0.2",
"react-native": "0.68.2",
"react-native-autocomplete-input": "^5.1.0",
"react-native-gesture-handler": "^2.4.2",
"react-native-google-places-autocomplete": "^2.4.1",
"react-native-map-clustering": "^3.4.2",
"react-native-maps": "^0.31.1",
"react-native-modal-dropdown": "^1.0.2",
"react-native-paper": "^4.12.1",
"react-native-reanimated": "^3.0.0-rc.0",
"react-native-safe-area-context": "^4.2.5",
"react-native-screens": "^3.13.1"
},
"devDependencies": {
"@babel/core": "7.18.0",
"@babel/runtime": "7.18.0",
"@react-native-community/eslint-config": "2.0.0",
"babel-jest": "26.6.3",
"eslint": "7.32.0",
"jest": "26.6.3",
"metro-react-native-babel-preset": "0.67.0",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
