Stack Navigation in React Native

So, after struggling with error after error, you finally made your first React Native app. You have scanned the React Native doc and tested all of the core components.

After you have made your one screen app, you are hungry for more. Or, like me, you have an app you need to make, but it requires multiple screens. This leads us to the Stack navigator.

Showing ThirdScreen.js code from my computer

The stack navigator lets us create multiple screens by stacking screens on top of each other; in other words, it creates a stack of screens for us.

With the stack navigator, we will be creating an app with three screens and changing the language to give the screens temporary purpose.

Setting Up

If how to create a new expo project slipped from your mind, run

expo init (project name)

in your command prompt/terminal. If facing any errors while creating A React Native project, you can find the solutions in this article.

Installing Dependencies

After you create a new project, you will need to install a few dependencies. Run

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

in your command prompt/ terminal.

Also

expo install react-native-screens react-native-safe-area-context

Getting Started

Create a folder in your project called ‘screens’ and create a new js file called ‘HomeScreen’ (HomeScreen.js) inside of screens. Copy and paste the contents from App.js into HomeScreen.js.

Reminder: change

export default function App() {

to

export default function HomeScreen({navigation}) {

Add ‘Button’ to the react-native import and delete ‘Text’ (You won’t be needing it here):

import { StyleSheet, Button, View } from 'react-native';

Also, add two buttons. One titled “Navigate to French screen”. The other, “Navigate to English screen”.

Button 1:

      <Button
      title="Navigate to French Screen"
      onPress={() => navigation.navigate("Second", {language: "french"})}
      />

Button 2:

      <Button
      title="Navigate to English Screen"
      onPress={() => navigation.navigate("Second", {language: "english"})}
      />

All in all, your HomeScreen.js file should look like this:

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

export default function HomeScreen({navigation}) {
  return (
    <View style={styles.container}>
      <Button
      title="Navigate to French Screen"
      onPress={() => navigation.navigate("Second", {language: "french"})}
      />
      <Button
      title="Navigate to English Screen"
      onPress={() => navigation.navigate("Second", {language: "english"})}
      />
      <StatusBar style="auto" />
    </View>
  );
}

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

The same as my screen…

Computer Screen example for HomeScreen.js

Second

In the ‘screens’ folder you created, add another js file called ‘SecondScreen’ (SecondScreen.js). Copy and paste the contents of HomeScreen.js into SecondScreen.js. Delete one button.

You will need to add ‘Button’ to the react-native import and import StackActions:

import { StyleSheet, Button, Text, View } from 'react-native';
import { StackActions } from '@react-navigation/native';

and change

export default function HomeScreen({navigation}) {

to

export default function SecondScreen({navigation, route}) {

Add

  let language = route.params.language;
  let greeting = language === "french" ? "Bonjour" : "Hello";

before

return (

Change the text to the greeting

<Text>{greeting}</Text>

and edit the button title to “Go to third screen”:

      <Button
      title="Go to third screen"
      onPress={() => {
        navigation.dispatch(
          StackActions.replace("Third")
        );
      }}
      />

Your SecondScreen.js file should look like this:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Button, Text, View } from 'react-native';
import { StackActions } from '@react-navigation/native';

export default function SecondScreen({navigation, route}) {
  let language = route.params.language;
  let greeting = language === "french" ? "Bonjour" : "Hello";
  return (
    <View style={styles.container}>
      <Text>{greeting}</Text>
      <Button
      title="Go to third screen"
      onPress={() => {
        navigation.dispatch(
          StackActions.replace("Third")
        );
      }}
      />
      <StatusBar style="auto" />
    </View>
  );
}

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

Here’s another picture:

Computer Screen example for SecondScreen.js

Third

Not last but least, create another js file in you screens folder called ‘ThirdScreen’ (ThirdScreen.js).

Copy and paste the code from HomeScreen.js into ThirdScreen.js and add ‘Button’ and ‘Text to the react-native import:

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

Add text (unnecessary):

<Text>Third</Text>

Delete one of the buttons and change the other one to match

<Button title="Pop to root" onPress={() => navigation.popToTop()} />

The full code:

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

export default function ThirdScreen({navigation}) {
  return (
    <View style={styles.container}>
      <Text>Third</Text>
      <Button title="Pop to root" onPress={() => navigation.popToTop()} />
      <StatusBar style="auto" />
    </View>
  );
}

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

The picture for ThirdScreen.js is at the top of this article.

Last

If you liked this article and if it helped you make an app with multiple screens, help out others by sharing. For more articles related to React Native projects, follow Programming Advice here on medium. Comment any feedback, questions, or concerns that you may have.

Last but not least, there is a lot to change in App.js, which is why you should delete everything.

Paste in these imports:

import HomeScreen from "./screens/HomeScreen";
import SecondScreen from "./screens/SecondScreen";
import ThirdScreen from "./screens/ThirdScreen";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

Add

const Stack = createNativeStackNavigator();

Inside return (), create a ‘NavigationContainer’ and ‘Stack.Navigator’. Create three of ‘Stack.Screen’ with the names, “Home”, “Second”, “Third”, Components, “HomeScreen”, “SecondScreen”, “ThirdScreen”. Add options to Home and Third of a title that is “Welcome” and a headershown, which is false. Here’s the code:

import HomeScreen from "./screens/HomeScreen";
import SecondScreen from "./screens/SecondScreen";
import ThirdScreen from "./screens/ThirdScreen";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen 
        name="Home"
        component={HomeScreen}
        options={{title: "Welcome"}}
        />
        <Stack.Screen 
        name="Second"
        component={SecondScreen}
        />
        <Stack.Screen 
        name="Third"
        component={ThirdScreen}
        options={{headerShown: false}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

What the finished code in App.js should look like:

Conclusion

And that’s it. Run your app on your phone(s) and watch as the screen changes with a simple button tap. Check out this YouTube Video if videos are more your thing.

Thank you for scrolling. Remember, share this article if you found it useful. You can leave any feedback, questions, concerns, or discussions about Stack Navigation by commenting.

Photo by Oskar Yildiz on Unsplash