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

Question

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

Navigation

#1 by (5 votes)
#2 by (1 votes)

1

I'm trying to start a project with React Native . But when I try to use react-navigation this error appears.

App.js:

importReactfrom"react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

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

export default createAppContainer(AppNavigator);

I copied the same page code Hello React Navigation

I installed react-navigation with the following command:

npm install --save react-navigation

But the error persists in insisting.

react-native

asked by anonymous 22.11.2018 / 02:03

2 answers

How to pass an attribute of the child class through the constructor to the parent class SQL Filter to not display some items in a table

score 5 · Answer 1

This is because of a problem with version 3.0. I recommend using version 2.18.2

Steps to downgrade :

> npm uninstall react-navigation

> npm install [email protected] --save

Start package:

react-native start --reset-cache

Running the app:

react-native run-android

score 1 · Answer 2

I was facing this problem as well, and according to the documentation in version 3 of the react-navigation you must change the MainActivity.java file to run it on Android. I was able to work with these steps:

1) Install the required packages

npm install --save react-navigator
npm install --save react-native-gesture-handler

2) Edit the file android/app/src/main/java/com/mobile/MainActivity.java , leaving it like this:

package com.mobile;

import com.facebook.react.ReactActivity;
/** Adicionar esses imports **/
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

    /**
    * Returns the name of the main component registered from JavaScript.
    * This is used to schedule rendering of the component.
    */
    @Override
    protected String getMainComponentName() {
        return "mobile";
    }

    /** Adicionar esse método **/
    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
      return new ReactActivityDelegate(this, getMainComponentName()) {
        @Override
        protected ReactRootView createRootView() {
        return new RNGestureHandlerEnabledRootView(MainActivity.this);
        }
      };
    }
}

3) Run the application again with the commands:

react-native link
react-native start --reset-cache
react-native run-android

The command run-android is important in this case to recompile the apk of the Android application, I had problems because I was trying to solve only by live reload and start --reset-cache , but this detail was missing.