CODEWITHSUNDEEP
react-nativereact-navigation
Anamul Haque
Anamul Haque

Reputation: 7309

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

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.

Upvotes: 49

Views: 64152

Answers (20)

hoanghuychh
hoanghuychh

Reputation: 135

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

Upvotes: 1

db42
db42

Reputation: 4544

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

Upvotes: 0

BRDroid
BRDroid

Reputation: 4388

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

Upvotes: 1

FSTL
FSTL

Reputation: 151

I used this in the CLI to solve the issue

cd iOS
pod install

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

Upvotes: 1

Bagas
Bagas

Reputation: 1

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 :)

Upvotes: 0

cuongtd
cuongtd

Reputation: 3182

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

The following worked for me:

cd ios
pod install

Upvotes: 4

BaiJiFeiLong
BaiJiFeiLong

Reputation: 4635

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:

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

Upvotes: 5

Eric
Eric

Reputation: 827

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

Upvotes: 0

James-Prescott
James-Prescott

Reputation: 91

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!

Upvotes: 1

Codemaker2015
Codemaker2015

Reputation: 1

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.

Upvotes: 0

Apurva Aggarwal
Apurva Aggarwal

Reputation: 297

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

Upvotes: 0

user8603159
user8603159

Reputation:

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:

  1. remove node_modules and package-lock.json
  2. npm install
  3. npm install --save react-navigation
  4. npm install --save react-native-gesture-handler
  5. 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')

Upvotes: 1

aldajo92
aldajo92

Reputation: 301

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

Upvotes: 0

Harikrishnan
Harikrishnan

Reputation: 9979

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
└─ [email protected]
info All dependencies
└─ [email protected]

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

Upvotes: 0

jemjov
jemjov

Reputation: 41

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

Upvotes: 2

robby dwi hartanto
robby dwi hartanto

Reputation: 435

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

Upvotes: 0

hicham naimi
hicham naimi

Reputation: 61

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

  1. 0pen your ios Podfile and delete all yout linked dependencies: pod 'xxxxxxx', :path => '../node_modules/xxxxx
  2. Close Xcode
  3. In your /ios folder run "pod update"
  4. In your project source run "react-native link"
  5. Open Xcode and Clean Build Folder from Xcode Menu -> Product
  6. Run your application from Xcode
  7. 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
  8. Now run your application from Xcode, you should be fine.

Upvotes: 6

Ali Hesari
Ali Hesari

Reputation: 1939

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.

Upvotes: 3

Amiri Houssem
Amiri Houssem

Reputation: 1102

  1. remove node_modules and package-lock.json
  2. npm install
  3. npm install --save react-navigation
  4. npm install --save react-native-gesture-handler
  5. react-native link

Upvotes: 96

Jamal
Jamal

Reputation: 27

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

Upvotes: 0

Related Questions