undefined is not an object (evaluating 'RNGestureHandlerModule.State'

Question

I have installed react-navigation in my React Native project. Its a starter project doesn't have any codes. But while running project I am facing error like this.

Here is my Navigation code

import { createStackNavigator } from 'react-navigation';

import Home from './screens/Home';
import WeatherDetail from './screens/WeatherDetail';


const Navigation = createStackNavigator({
  Home: { screen: Home },
  WeatherDetail: {
  screen: WeatherDetail
 } 
});

export default Navigation;

And here is the App.js codes

 import Navigator from './Router';


 export default class App extends Component {
   render() {
     return (
       <View style={styles.container}>
         <Navigator />
       </View>
     );
    }
  }

If I remove the navigator component from the App.js and replace it with a Text the application runs without any error.

This all looks correct, can you show the code for the `Home` component? — Robbie Milejczak, Oct 17 '18 at 20:28
I was facing the same problem in iOS. In that case you can try to add RNGesture library manually. https://tuntunir.blogspot.com/2019/02/null-is-not-object-evaluating.html?m=1 — Saddaf Afrin Khan, Feb 23 '19 at 05:41

score 96 · Accepted Answer · edited Nov 19 '18 at 10:16

96

remove node_modules and package-lock.json
npm install
npm install --save react-navigation
npm install --save react-native-gesture-handler
react-native link

edited Nov 19 '18 at 10:16

Lorelorelore

3,335
8
29
40

answered Nov 19 '18 at 08:10

Amiri Houssem

1,102
7
7

If the error persists even after all the steps, it is because of backslashes, then change this line of code to this: project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android') – Mar 12 '19 at 09:45
1

following these steps as well as uninstalling the app then rebuilding worked for me. – lsimonetti Jun 14 '19 at 13:25

score 6 · Answer 2 · answered Dec 28 '18 at 11:43

If you are using react-link to link your dependencies:

0pen your ios Podfile and delete all yout linked dependencies: pod 'xxxxxxx', :path => '../node_modules/xxxxx
Close Xcode
In your /ios folder run "pod update"
In your project source run "react-native link"
Open Xcode and Clean Build Folder from Xcode Menu -> Product
Run your application from Xcode
Link manually the dependency "react-native-gesture-handler" into your Xcode Project following steps in documentation: https://facebook.github.io/react-native/docs/linking-libraries-ios
Now run your application from Xcode, you should be fine.

score 5 · Answer 3 · answered Jul 10 '19 at 10:13

From the official doc:

If you're on React Native >= 0.60, you need to disable autolinking for react-native-gesture-handler first. To disable autolinking for it, create a react-native.config.js file in the root of your project with the following content:

module.exports = {
  dependencies: {
    'react-native-gesture-handler': {
      platforms: {
        android: null,
        ios: null,
      },
    },
  },
};

If your are using React 0.60, just omit this official doc. Follow following steps:

rm react-native.config.js if exist
react-native link react-native-gesture-handler
cd ios && pod install && cd ..
react-native run-ios

Is it also true in expo project? Because it is not written anywhere. — Dimitri Kopriwa, Feb 11 '20 at 11:16

score 4 · Answer 4 · answered Jul 16 '19 at 14:16

4

I get the same error on ios from RN v0.60

The following worked for me:

cd ios
pod install

answered Jul 16 '19 at 14:16

cuongtd

2,862
3
19
37

Excellent. Simplest (and probably most correct) solution. This answer should be moved up! – Forrest Dec 29 '19 at 21:14

score 3 · Answer 5 · edited Dec 27 '18 at 07:23

First, remove node_modules and package-lock.json and run npm install. After installing the react-navigation package in your React Native project. You should install react-native-gesture-handler. If you’re using Expo you don’t need to do anything here, it’s included in the SDK. Otherwise:

npm install react-native-gesture-handler

And finally, link gesture dependency as:

react-native link react-native-gesture-handler

This answer based on the React Navigation document.

score 2 · Answer 6 · answered Jan 17 '19 at 10:06

maybe someone come here because same problem as me.

i got this error because i'm using react-navigation version 3.x, in that version stackNavigator is change to createStackNavigator and should use createAppContainer(createStackNavigator)

im fix it just like mr.amiri said but im not delete my node_module im just follow step 3 - 5

score 1 · Answer 7 · 2019-03-08T10:41:59.990

1

Since I am not allowed to comment, I am posting it here. This is the answer by @Amiri Houssem but I am adding one more thing:

remove node_modules and package-lock.json
npm install
npm install --save react-navigation
npm install --save react-native-gesture-handler
react-native link

If there is an error even after these 5 steps, check android/settings.gradle and change that line to this:

project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')

edited Mar 08 '19 at 10:41

answered Jan 30 '19 at 22:18

1

I don't think you need step 1 and 2 for this, but always good to be thorough. – iprateekk Feb 28 '19 at 16:56

score 1 · Answer 8 · answered May 11 '19 at 21:21

I'm answering because none of the above answers were relevant to me.

I got this error because VSCode automatically inserted import { TouchableOpacity } from 'react-native-gesture-handler' as a dependency in my file when I added a <TouchableOpacity> element.

Give the last files you edited a once-over just in case there's an import statement you don't expect!

score 1 · Answer 9 · answered Aug 20 '19 at 07:20

1

I used this in the CLI to solve the issue

cd iOS
pod install

cd ..
react-native unlink react-native-gesture-handler

answered Aug 20 '19 at 07:20

FSTL

141
1
1
6

score 1 · Answer 10 · answered Nov 26 '19 at 23:19

1

Uninstalled the app from the device and run the android project - react-native run-android and it worked fine

answered Nov 26 '19 at 23:19

BRDroid

3,920
8
65
143

score 1 · Answer 11 · answered Mar 20 '20 at 06:51

1

you can check your version of react-native if React Native 0.59 and lower you can

 react-native link react-native-gesture-handler

and check your @react-navigation version in

https://reactnavigation.org/versions

answered Mar 20 '20 at 06:51

hoanghuychh

127
1
4

score 0 · Answer 12 · answered Nov 17 '18 at 11:19

may be its late. Temporary solution downgrade the version of react navigation:
1- unlink and uninstall react-navigation and the handler
2- add "react-navigation": "^2.18.2" to package.json
3- remove node_modules folder
4- npm i
5- react-native link

score 0 · Answer 13 · answered Jan 10 '19 at 16:22

0

if you have done the above, it hasn't run yet, try this if you use Windows

cd android 

.\gradlew cleanBuildCache

and try running it

react-native run-android

answered Jan 10 '19 at 16:22

robby dwi hartanto

425
1
4
8

score 0 · Answer 14 · answered Feb 20 '19 at 09:42

Even though react-native-gesture-handler is present in node_modules folder, we need to add it to path or install it again. Then link with native code.

1) npm install --save react-native-gesture-handler

success Saved 1 new dependency.
info Direct dependencies
└─ react-native-gesture-handler@1.0.15
info All dependencies
└─ react-native-gesture-handler@1.0.15

2) react-native link

rnpm-install info Linking react-native-gesture-handler ios dependency 
rnpm-install info Platform 'ios' module react-native-gesture-handler has been
 successfully linked 
rnpm-install info Linking react-native-gesture-handler android dependency 
rnpm-install info Platform 'android' module react-native-gesture-handler has
 been successfully linked

3) react-native run-android or react-native run-ios

score 0 · Answer 15 · answered Mar 04 '19 at 06:51

If you are using a configuration with Podfile in ios. Follow this steps:

Comment this line pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler' in <react-native-project>/ios/Podfile.
Open <react-native-project>.xcworkspace Add RNGestureHandler.xcodeproj in Libraries (Right click over library folder and select "Add files to ") from node_modules/react-native-gesture-handler/ios.
Add libRNGestureHandler.a in (Build Phases) -> (Link Binary With Libraries).

score 0 · Answer 16 · edited Mar 08 '19 at 14:39

0

This worked well for me as well.
1) npm install react-navigation
2) npm install react-native-gesture-handler
3) npm intstall
4) react-native link

uninstall the app

5) react-native run-android

edited Mar 08 '19 at 14:39

showtime

1
1
17
48

answered Mar 05 '19 at 03:30

Apurva Aggarwal

296
3
10

score 0 · Answer 17 · answered Mar 26 '19 at 04:54

0

Execute the following commands in command prompt (Run as Administrator)

 npm install react-navigation
 npm install react-native-gesture-handler
 npm intstall
 react-native link

Re-Install the application will resolve the issue.

answered Mar 26 '19 at 04:54

Codemaker2015

12,190
6
97
81

score 0 · Answer 18 · answered Jun 07 '19 at 21:26

I struggled with this and none of the above answers worked for me. Here's what I had to do:

Delete your ios folder entirely.
Delete your node_modules folder and package-lock.json.
Restart your computer.
Run react-native eject to re-create your native code folders.
Run npm install
Run react-native link
Run npm run start -- --reset--cache
Now run react-native run-ios

score 0 · Answer 19 · answered Jul 22 '19 at 11:56

0

see your native react version, if version 0.60 then you must migrate to androidX using a jetifier, follow the steps in this link https://github.com/mikehardy/jetifier

successful for me :)

answered Jul 22 '19 at 11:56

Bagas

1

2

Please keep in mind, that linked content might be moved or deleted, then your answer might get useless. Better is to mention the link but include the most useful content of this linked content into your answer. – MarkusEgle Jul 22 '19 at 12:07

score 0 · Answer 20 · answered Feb 23 '20 at 05:41

If you're on React Native >= 0.60:

You should see the following entry in your ios/Podfile:

  pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'

If this line is not there, first run:

react-native link react-native-gesture-handler

ios/Podfile should now contain a new entry.

Now run this command from iOS directory /ios/:

pod install

Run your iOS project again either directly using XCode or react-native run-ios

undefined is not an object (evaluating 'RNGestureHandlerModule.State'

20 Answers20

Linked