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.
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…
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:
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.