React Native navigating between screens

React Native navigating between screens
React Native navigating between screens

Modern mobile applications use multiple screens comprised of sophisticated components. Following the HTML5 standards, React components will be converted to a single web-page during the compilation process. Despite they are HTML pages, we can’t use the same navigation tricks to move between pages. Instead, we have to use a standard navigation mechanism that is provided by the react / react-native framework. This article explains the React Native navigation fundamentals with an easy to follow the example.

React Native apps are using the Stack model to navigate between pages.

React native screen navigation

Adding dependencies:

1. Adding common dependencies :
npm install @react-navigation/native @react-navigation/stack
2. Adding project specific dependencies : React Native project
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
2. Adding project specific dependencies : Expo project
expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Configuring the Primary component to support Navigation:

A typical React Native application will have the component called NavigationContainer configured on the Primary component.

Below are the routs / navigation paths in our example app.

Scree Routes
Scree Routes

1. Primary component

// 1 : Primary Component

import * as React from 'react';

// Importing react-navigation dependencies.
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

// Importing screens to be navigated.
import LoginScreen from './Login';
import HomeScreen from './Home';
import SignupScreen from './Signup';

// creating the stack to be used during the navigation.
const Stack = createStackNavigator();

// wrapping all the navigation routes inside the NavigationContainer
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="SignupScreen">
        <Stack.Screen name="SignupScreen" component={SignupScreen} />
        <Stack.Screen name="LoginScreen" component={LoginScreen} />
        <Stack.Screen name="HomeScreen" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Next we will move on to adding secondary screes.

Configuring secondary screens:

Each screen receives prop component containing the navigation object consists of various methods that can be used for navigation. We will be using the navigation.navigate to go to the move among our screens: Signup -> Login -> Home.

2 : Signup Screen Component:

// 2 : Signup Screen Component:

import * as React from 'react';
import {Button, View, Text} from 'react-native';

export default function SignupScreen({navigation}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      {/*
          Using the navigation to rout to Home screen
      */}
      <Text>Welcome New User!</Text>
      <Button title="Login" onPress={() => navigation.navigate('HomeScreen')} />
    </View>
  );
}

2 : Signup Screen Component:

3 : Login Screen Component:

// 3 : Login Screen Component:

import * as React from 'react';
import {Button, View} from 'react-native';

export default function Login({navigation}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      {/*
          Using the navigation to rout to Home screen
      */}
      <Button
        title="Existing User"
        onPress={() => navigation.navigate('HomeScreen')}
      />
    </View>
  );
}

3 : Login Screen Component:

4 : Home Screen Component:

// 4 : Home Screen Component:

import * as React from 'react';
import {Button, View} from 'react-native';

export default function Home({navigation}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      {/*
          Using the navigation to rout to Login screen
      */}
      <Button
        title="Logout"
        onPress={() => navigation.navigate('LoginScreen')}
      />
    </View>
  );
}

4 : Home Screen Component:

That concludes our short article on React-Native navigation. Access our code base to see the running application.

Download the Code.

Reference:

reactnavigation.org. (n.d.). React Navigation. [online] Available at: https://reactnavigation.org/docs/navigating [Accessed 30 May 2020].

reactnative.dev. (n.d.). Navigating Between Screens · React Native. [online] Available at: https://reactnative.dev/docs/navigation#__docusaurus.

Leave a Reply

Your email address will not be published. Required fields are marked *