Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Setup Project and Installing Library
2.1.
Setup
2.2.
Installation
3.
Example on React Native Routes
4.
Frequently Asked Questions
4.1.
What is the use of TouchableOpacity in react native?
4.2.
What are components in react native?
4.3.
What are props in the react-native?
5.
Conclusion
Last Updated: Mar 27, 2024
Easy

Router in React Native

Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

This tutorial will learn how to use a router to help our app for navigation purposes. In simple navigation, every time we want to navigate, we have to call the function with the class name of the destination screen. The react-native-router-flux API is distinct from react-navigation. It allows users to establish all routes in one single location and easily navigate and interact between different panels. However, this means that react-native-router-flux inherits all the limits and changes introduced by newer versions.

Now let’s first set up the project and install the package.

Setup Project and Installing Library

Setup

In this example, first we will set up our project using React Native CLI Quickstart to set up the project.

Run this command to create a new project inside your desired folder.

npx react-native init RouterTutorial


After the project is created, go inside the project's root directory.

cd RouterTutorial

Installation

Since you are inside of your project, now install the router package using this command.

npm install –save react-native-router-flux
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Example on React Native Routes

This section will make a simple app that uses routes for navigation between screens. In the components folder, we have created three files:

  1. App.js: This file contains all the information about the routes.
  2. home.js: This file contains the screen shown in the first.
  3. user.js: We intend to go to this screen from the home screen.

App.js

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
 
import HomeScreen from './components/home.js';
import UserScreen from './components/user.js';
 
 
export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}
 
const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
  About: {
    screen: UserScreen
  },
},{
  initialRouteName: "Home"
 
});
 
const AppContainer = createAppContainer(AppNavigator);
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});


homes.js

import React, { Component } from 'react';
import { Button, View, Text, StyleSheet } from 'react-native';
 
export default class Homescreen extends Component {
  static navigationOptions = {  
        title: 'Home',  
        headerStyle: {  
            backgroundColor: '#005252',  
        },  
        headerTintColor: '#ffffff',  
        headerTitleStyle: {  
            fontWeight: 'bold',  
        },  
    };  
  render() {  
    return (  
            <View style={styles.container}> 
                <View
                  style={{
                    flex: 1,
                    justifyContent: "center",
                    alignItems: "center",
                  }}>
                  <Text style={styles.titleText}>Home Screen</Text>
                </View>
                <View style={styles.buttonContainer}>  
                    <Button  
                        onPress={() => this.props.navigation.navigate('About')}  
                        title="Go To User Screen" 
                        color="orange"
                    />  
                </View>
                <View style={styles.bottomText}>
                  <Text>
                  <Text style={styles.bottomText1}>code</Text>
                  <Text style={styles.bottomText2}>studio</Text>
                  </Text>
                  <Text>Powered By</Text>
                  <Text style={styles.bottomText3}>Coding Ninjas</Text>
                </View>  
            </View>  
        );
  }
}

const styles = StyleSheet.create({  
    container: {  
        flex: 1,  
        justifyContent: 'center',
        backgroundColor: 'teal'
    },  
    buttonContainer: {
        flex: 1,  
        margin: 30  
    },
    titleText: {
      fontSize: 30,
      color: 'black',
      fontWeight: "bold"
  },
  bottomText: {
      marginBottom:30,
      textAlign: 'center',
      alignItems: "center",
    },
    bottomText1: {
      fontSize: 25,
      fontWeight: 'bold',    
    },
    bottomText2: {
      fontSize: 25,
    },
    bottomText3: {
      fontWeight: 'bold',
      color: 'orange'
    }   
})  


user.js

import React, { Component } from 'react';
import { Button, View, Text, StyleSheet, Image, HeaderButtons
,HeaderButtonComponent,Item } from 'react-native';
 
export default class UserScreen extends Component {
    static navigationOptions = {  
        title: 'User',  
        headerStyle: {  
            backgroundColor: '#005252',  
        },  
        headerTintColor: '#ffffff',  
        headerTitleStyle: {  
            fontWeight: 'bold',  
        }, 
        
    };  
  render() {
    return (
     <View style={styles.container}> 
                <View
                  style={{
                    flex: 1,
                    justifyContent: "center",
                    alignItems: "center",
                  }}>
                  <Text style={styles.titleText}>User Screen</Text>
                </View>
                <View style={styles.bottomText}>
                  <Text>
                  <Text style={styles.bottomText1}>code</Text>
                  <Text style={styles.bottomText2}>studio</Text>
                  </Text>
                  <Text>Powered By</Text>
                  <Text style={styles.bottomText3}>Coding Ninjas</Text>
                </View>  
            </View>  
        );
  }
}

const styles = StyleSheet.create({  
    container: {  
        flex: 1,  
        justifyContent: 'center',
        backgroundColor: 'teal'
    },  
    titleText: {
      fontSize: 30,
      color: 'black',
      fontWeight: "bold"
  },
  buttonContainer: {
        flex: 1,  
        margin: 30,
    },
  bottomText: {
      marginBottom:30,
      textAlign: 'center',
      alignItems: "center",
    },
    bottomText1: {
      fontSize: 25,
      fontWeight: 'bold',    
    },
    bottomText2: {
      fontSize: 25,
    },
    bottomText3: {
      fontWeight: 'bold',
      color: 'orange'
    }   
})  

Output:

Also see,  React Native Reanimated

Frequently Asked Questions

What is the use of TouchableOpacity in react native?

This is a wrapper for making views respond to touches properly. The opacity of the wrapped view is reduced when you press down, darkening it. Wrapping the children in an Animated reduces their opacity.

What are components in react native?

Components in react native are reusable blocks of code that are self-contained. They accomplish the same thing as JavaScript functions, but they work independently and return HTML. Class and Function components are the two sorts of components available.

What are props in the react-native?

Props are, how React Native components' properties are pronounced. Most components in React Native can be changed using different parameters at the time of their construction. Props are the terms for these parameters. They can't be modified because they're immutable.

Conclusion

In this article, we have thoroughly discussed the Router in React Native we discussed how to create the routes in the router and also discussed one simple example.

We hope that this blog has helped you increase your knowledge regarding the Router. To get more content like this check out the awesome content on the Coding Ninjas Website, Android DevelopmentCoding Ninjas Studio Interview BundleCoding Ninjas Studio ProblemsCoding Ninjas Studio Interview ExperiencesCodeStudio ContestsCoding Ninjas Studio Test Series and Coding Ninjas Courses. Do not forget to upvote our blog to help other ninjas grow. 

Happy Coding!

Previous article
Navigation in React Native
Next article
Configuring Headers in React Native
Live masterclass