CREATE STACK NAVIGATOR REACT NATIVE

Share the post

Hello All, Today we will discuss how to create a new page & navigate it using NavigationContainer & createStackNavigator. We will understand how the react-native navigator will work with an example. In the last session, We discussed how to create a react native project and how to run it on the browser. In this topic, We will move ahead & see the navigation in react native. Follow the below steps to create navigate react native.

Steps to use NavigationContainer & createStackNavigator react native / create navigate react native

1. Create a new react native project

2. Default App.js will look like this

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

3. If you want to create a new page for example HomePage.js then just make a copy of App.js & paste in root folder.

4. Just change the name of class & text inside view. So, our new HomePage.js will look like this

import { StatusBar } from 'expo-status-bar';
import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';


export default function HomePage() {
    return (
        <View style={styles.container}>
            <Text>HomePage</Text>
            <StatusBar style="auto" />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

5.Install react-navigation library & peer dependencies for expo project

npm install @react-navigation/native @react-navigation/stack

For expo project

expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

For npm dependency

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

6. Add this Import react native gesture handler at top of the App.js page

import 'react-native-gesture-handler';

7. Add import NavigationContainer & createStackNavigator as shown below

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

8. Create constant for stackNavigator

const Stack = createStackNavigator();

9. Modify the App.js code as follows

import 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';
import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomePage from './HomePage';
const Stack = createStackNavigator();

export default function App() {

    return (

      <NavigationContainer>
        <View style={styles.container}>
          <Text>Open up App.js to start working on your app!</Text>
          <StatusBar style="auto" />
        </View>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={HomePage}
            options={{ title: 'Welcome' }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});


As stated in above code your code must be inside  <NavigationContainer></NavigationContainer>

& the new page which you want to navigate should be inside of 

 <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={HomePage}
            options={{ title: 'Welcome' }}
          />
</Stack.Navigator>

10. Final output will look like this

Final Output
Final Output

If you follow the above steps you can able to create navigate react native.

Leave a Comment