Undefined is not an Object (evaluating 'Rngesturehandlermodule.State')

Asked

Viewed 4,907 times

2

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

inserir a descrição da imagem aqui

App.js:

import React from "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 the React-navigation with the following command:

npm install --save react-navigation

But the error persists in insisting.

react-native

2 answers

8

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

Steps to the downgrade:

> npm uninstall react-navigation

> npm install [email protected] --save

Start package:

react-native start --reset-cache

Run the app:

react-native run-android
  • 2

    It worked correctly. Thanks!

  • 1

    Solved for me too! Thanks!!

  • 1

    Worked out here too!

  • 1

    You are the guy. For those who are entering this world of the React/React-Native lack a lot of information :(

3

I was facing that problem too, and as documented in version 3 of React-navigation it is necessary to change the file MainActivity.java to run it on Android. I managed to make it work with these steps:

1) Install 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 you 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 commands:

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

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

Browser other questions tagged react-native

You are not signed in. Login or sign up in order to post.