ios _reactnativereanimated.default.Value is not a constructor

Job ID: 33829244

Budget: $10 – $30 USD

Hi,

I 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

even in iPhone I am not able to see google map. Let me know what files you needed I will upload here

ios _reactnativereanimated.default.Value is not a constructor

https://stackoverflow.com/questions/59966380/typeerrorundefined-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);
Related categories: JavaScript iPhone Android React.js React Native