CODEWITHSUNDEEP
androidreact-nativenavigation
William Dam
William Dam

Reputation: 129

React Native navigation 0.58.X on Android

I am using Native v0.58.3 and I can't seem to get the navigation working.

I can't seem to figure out why it won't work, and I can't find the error when debugging and looking at the docs. The error I get is:

null is not an object (evaluating 'rngesturehandlermodule.state')

when running this code:

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

import React, {Component} from 'react';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
import {Platform, StyleSheet, Text, View, Image, ScrollView, Navigator, Button, TouchableOpacity, borderRadius} from 'react-native';
import {createStackNavigator, createAppNavigator} from 'react-navigation';
import TimeLine from './Screens/TimeLine';
import Home from './Screens/Home';

const RootStack = createStackNavigator(
{
  Home: { screen: Home },
  TimeLine: { screen: TimeLine },
},
{
    initialRouteName: 'Home',
}

);

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

import React, {Component} from 'react';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
import {Platform, StyleSheet, Text, View, Image, ScrollView, Navigator, Button, TouchableOpacity, borderRadius} from 'react-native';
import {createStackNavigator, createAppNavigator, StackNavigator} from 'react-navigation';

const styles = StyleSheet.create({
  container: {flex: 1},
  Button: {
  backgroundColor: '#992632',
  marginTop: hp('6.665%'),
  marginBottom: hp('6,665%'),
  marginRight: wp('4%'),
  marginLeft: wp('4%'),
  height: hp('20%'),
  borderRadius: 150,
  }
});

export class Home extends Component {
  render() {
    return (
      <View style={{
            backgroundColor: '#0a6ca3',
            height: hp('100%'),
          }}>

      <TouchableOpacity
          onPress={() => this.props.navigation.navigate('TimeLine')}
 
          style={styles.Button}>
              <Text style = {{fontSize: 75, color: 'white', textAlign: 'center', marginTop: hp('4.5%')}}> Tidslinje </Text>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={function(){
            console.log('Rasmus')
          }}
          style={styles.Button}>
            <Text style = {{fontSize: 75, color: 'white', textAlign: 'center', marginTop: hp('4.5%')}}> Diskussion </Text>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={function(){
            console.log('Rasmus')
          }}
 
          style={styles.Button}> 
          <Text style = {{fontSize: 75, color: 'white', textAlign: 'center', marginTop: hp('4.5%')}}> Demokrati </Text>
        </TouchableOpacity>
      </View>
    )
  }
}

export default Home;

Upvotes: 0

Views: 618

Answers (2)

Francois Nadeau
Francois Nadeau

Reputation: 7463

This sounds like a link issue. Did you check out this react-native-gesture-handler post?

Otherwise you could run 

react-native link react-native-gesture-handler

and re-install the app (i.e. yarn run-ios).

Upvotes: 0

Andrew
Andrew

Reputation: 28539

From the comments above it is clear that you haven’t performed the final stage of the setup for Android.

In the root directory of your project there is a folder called android. You need to look through that folder for a file called MainActivity.java It will probably be in android/app/src/main/java/com/your_app_name/

Inside that file you need to make some alterations. All the lines that have a plus sign beside them need to be added to the file (obviously you do not include the +)

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

You should look at the official documentation for setting up react-native-gesture-handler https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html

react-navigation also explain the steps in detail https://reactnavigation.org/docs/en/getting-started.html

Upvotes: 1

Related Questions