skip to Main Content

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


  1. 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.

    Login or Signup to reply.
  2. The following steps should fix the error

    1. npm install react-native-reanimated
    2. Add Reanimated’s babel plugin
      Add react-native-reanimated/plugin plugin to your babel.config.js.

    module.exports = {
    presets: [
    … // don’t add it here 🙂
    ],
    plugins: [

    ‘react-native-reanimated/plugin’,
    ],

    };

    1. npm start — –reset-cache
    2. For ios,
      cd ios && pod install && cd ..
    3. Finally, build the app again.
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search