How to Implement Stack Navigator in A React Native Project

When building a mobile application with React Native, navigation is a crucial feature. The Stack Navigator from React Navigation provides an intuitive way to handle navigation between multiple screens. This guide will walk you through setting up React Navigation in a bare React Native project or an Expo managed project, covering installation instructions, creating two screens, and handling navigation smoothly.

Setting Up React Navigation in a React Native Project

To use React Navigation, you need to install the required dependencies. Open your terminal and run:

1npm install @react-navigation/native

Then, install the native dependencies:

1npm install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons

For React Navigation Native Stack, run:

1npm install @react-navigation/native-stack

If you're using an Expo managed project, install dependencies using:

1npx expo install @react-navigation/native @react-navigation/native-stack

At this stage, you may encounter warnings related to peer dependencies. You can safely ignore most warnings or resolve them by ensuring the correct versions are installed.

Creating a Navigation Stack

The navigation stack consists of two screens: a Home Screen and a Details Screen. First, import the required modules:

1import * as React from 'react';
2import { View, Text, Button } from 'react-native';
3import { NavigationContainer } from '@react-navigation/native';
4import { createNativeStackNavigator } from '@react-navigation/native-stack';

Define the navigator:

1const Stack = createNativeStackNavigator();

Now, let's define the screen component for the Home Screen:

1function HomeScreen({ navigation }) {
2  return (
3    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
4      <Text onPress={() => navigation.navigate('Details')}>Go to Details</Text>
5    </View>
6  );
7}

Similarly, create the Details Screen:

1function DetailsScreen({ route }) {
2  return (
3    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
4      <Text>Details Screen</Text>
5      <Text>{route.params?.message}</Text>
6    </View>
7  );
8}

Configuring the Stack Navigator

Now, define the export default function App and configure the stack navigator:

1export default function App() {
2  return (
3    <NavigationContainer>
4      <Stack.Navigator screenOptions={{ headerShown: true }}>
5        <Stack.Screen name="Home" component={HomeScreen} />
6        <Stack.Screen name="Details" component={DetailsScreen} />
7      </Stack.Navigator>
8    </NavigationContainer>
9  );
10}

The screenOptions prop is used to customize the header bar for each screen. You can modify it for additional customization options.

Adding Navigation Between Screens

To navigate between screens, use the navigate function. Update the HomeScreen component:

1function HomeScreen({ navigation }) {
2  return (
3    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
4      <Text onPress={() => navigation.navigate('Details', { message: 'Hello from Home!' })}>
5        Go to Details
6      </Text>
7    </View>
8  );
9}

Here, when the user clicks on the text, it triggers navigate to the Details Screen, passing a route parameter.

Handling View Styles in Screens

In React Native, layout is controlled using View style properties like flex. The following is a common styling approach:

1const styles = {
2  container: {
3    flex: 1,
4    justifyContent: 'center',
5    alignItems: 'center',
6  },
7};

Using view style flex 1, justifyContent center, and alignItems center ensures that the content is centered.

Handling Incorrect Version Ranges and Warnings

Sometimes, you might run into incorrect version ranges for dependencies. Running:

1npm install react-navigation

or

1npm install react-navigation-stack

helps resolve issues. Always check for peer dependencies warnings.

Customizing the Header Bar

To modify the header bar, use the options prop:

1<Stack.Screen
2  name="Home"
3  component={HomeScreen}
4  options={{ title: 'Welcome' }}
5/>

This changes the home route title.

Implementing a Tab Bar in React Navigation

For a tab bar, use:

1npm install @react-navigation/bottom-tabs

Then, import and define tabs:

1import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
2
3const Tab = createBottomTabNavigator();

Entry File and App Builds

The main entry file for the app (typically App.js) should contain the navigator setup. When the app builds, ensure that navigation is correctly configured.

The Bottom Line!

In this guide, we covered:

• Setting up React Navigation in a React Native project

• Creating a navigation stack with two screens

• Implementing stack navigator and handling route parameters

• Styling with view style flex 1, justifyContent center, and alignItems center

• Handling incorrect version ranges and dependency warnings

This approach ensures a seamless React Native navigation experience in your app. 🚀

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.