Navigating to new page

Question

I just started working with React Native and I wanted to use React Navigator to go to a new Screen. I followed the documentation here but I keep running into a problem.

I have an App Navigator file below

import { createStackNavigator } from 'react-navigation';
import LandingPage from './src/components/LandingPages/LandingPage';

const AppNavigator = createStackNavigator({
  Home: { screen: LandingPage },
});

export default AppNavigator;

And my App.js file is

    /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import AppNavigator from './AppNavigator';

type Props = {};
export default class App extends Component {
  render() {
    return (
   <AppNavigator/>

   );
  }
}

However, I get the error below.

null is not an object (evaluating 'RNGestureHandlerModule.State')

<unknown>
GestureHandler.js:55:37
loadModuleImplementation
require.js:321:6
<unknown>
Swipeable.js:11
loadModuleImplementation
require.js:321:6
<unknown>
index.js:1
loadModuleImplementation
require.js:321:6
<unknown>
StackViewLayout.js:19
loadModuleImplementation
require.js:321:6
<unknown>
StackView.js:4
loadModuleImplementation
require.js:321:6
<unknown>
createStackNavigator.js:3
loadModuleImplementation
require.js:321:6
createStackNavigator
index.js:9:18
createStackNavigator
react-navigation.js:107:45
<unknown>
AppNavigator.js:4:21
loadModuleImplementation
require.js:321:6
<unknown>
App.js:13
loadModuleImplementation
require.js:321:6
<unknown>
index.js:7
loadModuleImplementation
require.js:321:6
guardedLoadModule
require.js:199:45
global code
<unknown file>:0

I have also tried

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

But I still get the same error. Anyone has any ideas ?

EDIT

It is happening in ios

EDIT

Package.json

    {
      "name": "AppName",
      "version": "0.0.1",
      "private": true,
      "scripts": {
      "start": "node node_modules/react-native/local-cli/cli.js start",
,     "test": "jest"
      },
     "dependencies": {
     "react": "16.6.3",
     "react-native": "0.58.4",
     "react-native-gesture-handler": "^1.0.15",
     "react-navigation": "^3.2.1"
   },
    "devDependencies": {
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "24.1.0",
    "jest": "24.1.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3"
   },
   "jest": {
   "preset": "react-native"
 }

}

if it's in android then you probably forgot to make changes to `MainActivity.java` file — Rachid Rhafour, Feb 11 '19 at 04:41
possible duplicate of [this](https://stackoverflow.com/questions/52861437/undefined-is-not-an-object-evaluating-rngesturehandlermodule-state) — Firdous nath, Feb 11 '19 at 05:25

score 0 · Answer 1 · answered Feb 11 '19 at 04:45

0

If it's in android then make sure to add those changes to MainActivity.java after you link the package check documentation

+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
.
.
.
+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }

That's usually the issue.

answered Feb 11 '19 at 04:45

Rachid Rhafour

436
2
9

I added that to the android part but it is happening in ios – Uma Feb 11 '19 at 05:14
Do you have a pod file ? – Rachid Rhafour Feb 11 '19 at 09:49
I just created one – Uma Feb 11 '19 at 20:02
try to remove node_modules `pod install` again and it should work, that happens all the time when you have a pod file, I keep deleting node_modules and start all over again till it works. – Rachid Rhafour Feb 14 '19 at 14:20

score 0 · Answer 2 · answered Feb 11 '19 at 07:24

0

For Andriod u have to make changes to MainActivity.java For ios Add this to your podfile:

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

You're good to go!

answered Feb 11 '19 at 07:24

Akshay Mulgavkar

1,727
9
22

score 0 · Answer 3 · answered Feb 12 '19 at 18:19

I figured out what the problem was. I was not using the StackNavigator correctly and I did not have the GestureHandler installed and lined correctly.

I created a new project, copied my old files into it and changed the Navigator class as such and it began to work fine.

  import { createStackNavigator, createAppContainer } from 'react-navigation';
  import LandingPage from './components/LandingPage/LandingPage';
  import Login from './components/Login/Login';

 const stack = createStackNavigator({
     Landing: {
         screen: LandingPage,
          navigationOptions:{
             header: null,
         },
     },
     Login: {
         screen: Login,
     },

 });

 const App = createAppContainer(stack); <----- Key emphasis

 export default App;

score 0 · Answer 4 · answered Feb 26 '19 at 06:46

The most common cause for this problem is not rebuilding the app. follow these steps

close the metro builder terminal window
run react-native run-ios again (or run-android in case you are facing the issue in android).

If this doesn't fixed your issue

try deleting the app from device.
run react-native run-ios again.

If you are on android and this issue still haven't fixed check if your MainActivity.java matches with the one provided in their installation instructions.

Navigating to new page

4 Answers4