How to resolve React native navigation Error while installing version 6

Question

I just installed react navigation version 6 and i received below error

Attempt to invoke interface method boolean com.swmansion.reanimated.layoutReanimation.NativeMethodsHolder.isLayoutAnimationEnabled() on a null object reference

below is my code

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */
import 'react-native-gesture-handler';
import React from 'react';

import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,

} from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import Upload from './Screens/Upload';
import Display from './Screens/Display';

const Stack = createStackNavigator()

function App() {

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
        name='Screen_A'
        component={Upload}
        >


        </Stack.Screen>
        <Stack.Screen
        name='Screen_B'
        component={Display}
        >


        </Stack.Screen>
      </Stack.Navigator>
      

    </NavigationContainer>

  );
};

export default App;

this is first time i am using react-native and react-native navigation wish to build an app

Please, provide the package.json file. or it would be better if you provide the whole repo link ( after putting it to GitHub ) — MRPMOHIBURRAHMAN, Dec 13 '21 at 16:10
i have solved it after spending 6 hours on it and posted an answer. Thank you all for helping – — James, Dec 13 '21 at 16:22

score 32 · Accepted Answer · answered Dec 13 '21 at 16:21

There are two ways to solve it.

in your json package there is a package named "react-native-reanimated": "^2.3.0", remove this package and install "react-native-reanimated": "^2.2.4"

and restart metro then build again

Second way

1° - Turn on Hermes engine by editing android/app/build.gradle

project.ext.react = [
  enableHermes: true  // <- here -- change false for true
]

2° - Plug Reanimated in MainApplication.java

android\app\src\main\java\com\<yourProjectName>\MainApplication.java

  import com.facebook.react.bridge.JSIModulePackage; // <- add this
  import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add this
  ...
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  ...

      @Override
      protected String getJSMainModuleName() {
        return "index";
      }
// add more this "Override" below <----------------
      @Override 
      protected JSIModulePackage getJSIModulePackage() {
        return new ReanimatedJSIModulePackage(); // <- add
      }
    };
  ...

AFTER ALL PROCESS React Navigation Docs To finalize installation of react-native-gesture-handler, add the following at the top (make sure it's at the top and there's nothing else before it) of your entry file, such as index.js or App.js

import 'react-native-gesture-handler';

Save all and rebuild ( Android is: npx react-native run-android )

My package.json

"@react-navigation/drawer": "^6.1.8" "@react-navigation/native": "^6.0.6" "@react-navigation/native-stack": "^6.2.5" "react-native": "0.66.4" "react-native-gesture-handler": "^2.1.0"

i solved it using first way

I have solved it by following official url for reanimated 2. https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/ — sandeep.gosavi, Jan 12 '22 at 11:27

score 0 · Answer 2 · answered Feb 03 '22 at 02:23

Work for me few changes

Step:1 npm i react-native-reanimated (Add this if not already)
and Add Reanimated's babel plugin to your babel.config.js

      ...
      plugins: [
          ...
          'react-native-reanimated/plugin',
      ],
  };

Step:2 Turn on Hermes engine by editing android/app/build.gradle

  enableHermes: true  // <- here

Step:3 Plug Reanimated in MainApplication.java

  import com.facebook.react.bridge.JSIModulePackage; // <- add
  import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add
  ...
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  ...

      @Override
      protected String getJSMainModuleName() {
        return "index";
      }

      @Override
      protected JSIModulePackage getJSIModulePackage() {
        return new ReanimatedJSIModulePackage(); // <- add
      }
    };
  ...

Now clean and rebuild if changes have been done

For more Information And Compare steps

How to resolve React native navigation Error while installing version 6

2 Answers2