Breaking Down Stack Navigation In React Native

(tfw limitless navigational horizons)

We’ve all been there- you spend hours & hours on creating a beautiful & functional screen in React Native, diving into tutorials to learn about all of the different libraries and their functions, working nonstop for an entire afternoon on the StyleSheets trying to get it to look perfect for mobile and once it’s there, you realize you have no idea how to actually get to this page from another. I was there very recently and hit a pretty serious wall energetically, so I wanted to cover, to the best of my ability and in a straightforward manner, how navigating pages is handled in React Native.

EXPO INSTALLATION

All of the Native applications I have worked on have used the Expo framework, so I will include the necessary commands for installation in this context. Start off by plugging this command in to your terminal:

npm install @react-navigation/native

This will install the base navigation for React native. Next you will want to install these additional packages:

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

Finally, you will need to install the “Stack Navigator” via npm as this will be the primary screen navigator I will be explaining:

npm install @react-navigation/stack

CREATING THE SCREEN COMPONENTS

Let’s start with building the home screen component, which contains the button that will handle the navigation between screens:

import React from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';
function HomeScreen({ navigation }) {
return (
<View style={styles.container}>
<Text>Hi there!</Text>
<Button 
title='View Details'
onPress={() => navigation.navigate('DetailsScreen')} 
/>
</View>
);
}
export default HomeScreen;

Line 4 and 9 should be slightly different from what you are used to seeing if this is your first foray into navigation. Let me explain what is happening on this line:

1. On line 4, the properties of HomeScreen are being destructured to grab only the navigation prop.
2. On line 9, the onPress property is being summoned to indicate activity when pressed.

3. It then points to the navigation prop with the action of navigating to the component titled ‘DetailsScreen’.

Next, the details screen should be built which will be more straightforward:

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
function DetailsScreen(props) {
return (
<View>
<Text>Here is the information!</Text>
</View>
);
}
export default DetailsScreen;

IMPLEMENTING THE NAVIGATOR

Before jumping into exactly what needs to happen within the code, I would like to briefly explain what the format of the navigation will look like for you to conceptualize while we move into it:

1. The screens you want to navigate to and from must be imported to a main screen such as the default App.js.
2. Those components must be encased within a Stack Navigator component.
3. That Stack Navigator component must then be enclosed within a Navigation Container component.

Picturing the component hierarchy is something that has helped me a whole bunch in solidifying how these processes need to take place.

For this example, I am going to share an extremely simple application which consists of a home screen and a details screen. The home screen will have a button which navigates to the details screen, and the details screen will have a return button to return home.

After clearing the defaults within App.js, make sure these two import statements exist:

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

The sequence of code which will produce the navigation component will exist outside of the return statement and look as such:

const Stack = createStackNavigator();
const StackNavigator = () => (
<Stack.Navigator>
<Stack.Screen name='Welcome' component={HomeScreen}/>
<Stack.Screen name='DetailsScreen' component={DetailsScreen}/></Stack.Navigator>
)

Let me break this down to be clear on what is happening:

1. The createStackNavigator is being assigned to a variable called Stack.
2. A functional component is being created as StackNavigator which uses the “Navigator” property from the Stack variable.
3. The screens are declared with name and components in order of appearance.

It is important to note that the name of the screen which should be navigated to is what makes the connection from within the navigator page, this case being ‘DetailsScreen’. It must match from within the home screen component.

Within the return statement, the StackNavigator component must now be referenced within a NavigationContainer component as such:

export default function App() {
return (
<NavigationContainer>
<StackNavigator />
</NavigationContainer>
);
}

The container is the top-level of navigation and is responsible for managing state where it exists.

Here’s what we get as a result:

And there we have it! A super simple page navigation using StackNavigator!

I hope you see the potential of this to get very intricate with nested navigators and beyond. The tab and drawer navigator work in a very similar way, but I would start with stack as it gives you the flexibility and challenge to use your own elements and components as navigation targets.

Now spread your wings and fly away!