Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>
Idioma: En

Using react-navigation 3.0 in React Native apps

This tutorial explains how to move or navigate from one screen to another using React Navigation 3.X Library in react native application. In a web browser, you can link to different pages using an anchor () tag. When the user clicks on a link, the URL is pushed to the browser history stack. When the user presses the back button, the browser pops the item from the top of the history stack.


react-navigation version : 3.X

Similarly, React Navigation's stack navigator provides a way for your app to transition between screens and manage navigation history.React Navigation is that React Navigation's stack navigator provides the gestures and animations that you would expect on Android and iOS when navigating between routes in the stack.

If you would like to learn about react navigation version 2.X in React Native application, then follow the below link :
react-navigation version : 2.X   

Before we start the tutorial, we need to aware of some important function, which we required during the page navigation from one screen to another. So Lets get started :
  1. createStackNavigator  : createStackNavigator is a function that takes a route configuration object and an options object and returns a React component. Basically here we are maintaining the route information for different screen or activity.
  2. navigation prop : The navigation prop is available to all screen components, that helps for screen navigation.
  3. this.props.navigation.navigate('RouteName') : pushes a new route to the stack navigator if it's not already in the stack, otherwise it jumps to that screen and pops the already open screen.
  4. this.props.navigation.push('RouteName') : pushes a new route to the stack navigator even if already present in the stack.
  5. this.props.navigation.goBack() : when you switch to new window using stack navigator, then it will automatically enabled the back button in header bar.(On Android, the hardware back button just works as expected.) Also you can do the same programmatically by calling the goBack() function.
  6. this.props.navigation.popToTop() : This function helps to switch back to the home or first screen of your react native application.


In this example, we will create simple navigation example, where we move from one activity or screen to another on click button and vice versa.




React Native Getting Started With React Navigation 3.x

Project Structure :
Lets see the project structure.


Step-1 : Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2 : Install the react-navigation package in your React Native project
yarn add react-navigation
# or with npm
# npm install --save react-navigation

Screenshots after successful installation.


Step-3 : Next, 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:
yarn add react-native-gesture-handler
# or with npm
# npm install --save react-native-gesture-handler

Screenshots after successful installation.



Step-4 : Link all native dependencies:
react-native link react-native-gesture-handler


NOTE : No additional steps are required for iOS.

To finalise installation of react-native-gesture-handler for Android, be sure to make the necessary modifications to MainActivity.java:

package com.reactnavigation.example;

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);
+      }
+    };
+  }
}

Once installation complete check you package.json file in react native application. You  will find  react-navigation installed version in dependencies section.

{
"name": "RNV58",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android",
"test": "jest"
},
"dependencies": {
"react": "16.6.3",
"react-native": "0.58.1",
"react-native-gesture-handler": "^1.0.15",
"react-navigation": "^3.2.0",
"realm": "^2.22.0"
},
"devDependencies": {
"babel-core": "7.0.0-bridge.0",
"babel-jest": "24.0.0",
"jest": "24.0.0",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}

 Step-5: Lets create a new component named as HomeActivity. This component will be the home screen or default screen.  when user launch this application, then react native render home screen first.
  • Add static navigationoptions object inside the class. A HomeActivity component consists of a static property called navigationOptions which is an object that returns an object that contains various configuration options. Using the static navigationoptions  we can set our activity title name, color and font weight.
  • Implement render method and return Text and Button component wrapped by root View component. When user clicks on Button, it will navigate the screen from HomeActivity to ProfileActivity.
  1. When user clicks on "Go to Profile Activity" Button, then will navigate the user to profile screen.

HomeActivity.js 

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

class HomeActivity extends React.Component {

static navigationOptions = {
        title: 'Home',
        headerStyle: {
            backgroundColor: '#03A9F4',
},
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
},

};

    render() {
return (
View style={styles.container}>
Text style={styles.headerText} >Home ActivityText>
Button
                    title="Go to Profile Activity"
                    onPress={() => this.props.navigation.navigate('Profile')}
/>
View>
);
}
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
},
    headerText: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        fontWeight: 'bold'
},

});

export default HomeActivity;

Step-6: Lets create a new component named as ProfileActivity. This component will be the second screen. when clicks on "Go to Profile Activity" button in HomeActivity screen, then it will display the profile screen.
  • Add static navigationoptions object inside the class. A HomeActivity component consists of a static property called navigationOptions which is an object that returns an object that contains various configuration options. Using the static navigationoptions  we can set our activity title name, color and font weight.
  • Implement render method and return Text and Button component wrapped by root View component. 
  1. When user clicks on "Go to Home Activity" Button, then will navigate the user to home screen back.

ProfileActivity.js

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Button } from "react-native";

class ProfileActivity extends React.Component {
static navigationOptions = {
        title: "Profile",
        headerStyle: {
            backgroundColor: "#E91E63"
}
};

    render() {
return (
View style={styles.container}>
Text style={styles.headerText}>Profile ActivityText>
Button
                    title="Go to Home Activity"
                    onPress={() => this.props.navigation.navigate("Home")}
/>               

View>
);
}
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#F5FCFF"
},
    headerText:

Related Articles



This post first appeared on PHP Update Data In MySQL Database, please read the originial post: here

Share the post

Using react-navigation 3.0 in React Native apps

×

Subscribe to Php Update Data In Mysql Database

Get updates delivered right to your inbox!

Thank you for your subscription

×