When I try to use the NavigationContainer I get the Reanimated valueUnpacker error, I try with different versions of Drawer and Navigation and I get the same error
// In App.js in a new project
import * as React from 'react';
import { View, Text,TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
//import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
function HomeScreen(props: { navigation: { navigate: (arg0: string) => void; }; }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{fontSize:20,color:"black"}}>Home Screen</Text>
<TouchableOpacity style={{marginTop:20,width:200,height:50,backgroundColor:"blue",padding:10,alignItems:"center",borderRadius:10}} onPress={()=> props.navigation.navigate('Profile')}>
<Text style={{fontSize:15,color:"white",textAlign:"center"}}>Go to Profiles</Text>
</TouchableOpacity>
</View>
);
}
function ProfileScreen(props: { navigation: { navigate: (arg0: string) => void; }; }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{fontSize:20,color:"black"}}>Profile Screen</Text>
<TouchableOpacity style={{marginTop:20,width:200,height:50,backgroundColor:"blue",padding:10,alignItems:"center",borderRadius:10}} onPress={()=> props.navigation.navigate('Home')}>
<Text style={{fontSize:15,color:"white",textAlign:"center"}}>Go to Home</Text>
</TouchableOpacity>
</View>
);
}
const Drawer = createDrawerNavigator();
function MyDrawer() {
return (
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Profile" component={ProfileScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
export default MyDrawer
It should have a navigation menu with different options but even if you try different versions it still fails
2
Answers
I resolved it this way: I opened the android directory of the React Native project in Android Studio, then ran ./gradlew clean, followed by the ./gradlew build command again to solve the problem. If that doesn’t work, you can try running ‘Sync Project with Gradle Files’ first.
The following steps should fix the error
Add react-native-reanimated/plugin plugin to your babel.config.js.
module.exports = {
presets: [
… // don’t add it here 🙂
],
plugins: [
…
‘react-native-reanimated/plugin’,
],
};
cd ios && pod install && cd ..