React Native Navigation Setup

Navigation setup means preparing a React Native project so that different screens can communicate through a navigation system.

The basic process is:

Install Packages
       ↓
Create Navigation Container
       ↓
Create Navigator
       ↓
Create Screens
       ↓
Register Screens
       ↓
Navigate Between Screens

The main package for React Navigation is @react-navigation/native.

npm install @react-navigation/native

This package provides the core navigation functionality used by the React Navigation ecosystem.

For stack navigation, install the native stack package.

npm install @react-navigation/native-stack

The native stack navigator provides a stack-based navigation pattern for React Native applications.

React Navigation also uses platform-related dependencies. The exact command depends on whether the project uses Expo or the React Native Community CLI.

For an Expo project, the recommended approach is to install dependencies using Expo's package installer where appropriate.

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

These packages are commonly used by React Navigation.

For larger applications, navigation code can be organized in a separate folder.

project/
│
├── App.js
│
├── screens/
│   ├── HomeScreen.js
│   └── ProfileScreen.js
│
└── navigation/
    └── AppNavigator.js

Keeping navigation code separate makes the project easier to manage.

Create a file named HomeScreen.js.

import React from 'react';

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

export default function HomeScreen() {

    return (

        <View>

            <Text>
                Home Screen
            </Text>

        </View>

    );

}

Create another file named ProfileScreen.js.

import React from 'react';

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

export default function ProfileScreen() {

    return (

        <View>

            <Text>
                Profile Screen
            </Text>

        </View>

    );

}

The NavigationContainer is imported from @react-navigation/native.

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

It contains the navigation structure of the application.

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

This function creates a native stack navigator.

After importing createNativeStackNavigator, create a Stack object.

const Stack =
    createNativeStackNavigator();

The Stack object provides the Navigator and Screen components.

<Stack.Navigator>

</Stack.Navigator>

The Stack.Navigator contains the screens that belong to the stack.

<Stack.Screen
    name="Home"
    component={HomeScreen}
/>

The Stack.Screen registers a component as a navigation screen.

<Stack.Navigator>

    <Stack.Screen
        name="Home"
        component={HomeScreen}
    />

    <Stack.Screen
        name="Profile"
        component={ProfileScreen}
    />

</Stack.Navigator>

Both Home and Profile are now registered in the navigation stack.

<Stack.Screen
    name="Profile"
    component={ProfileScreen}
/>

The name property defines the route name.

This name is used when navigating to the screen.

navigation.navigate('Profile');

<Stack.Screen
    name="Home"
    component={HomeScreen}
/>

The component property tells React Navigation which React component should be displayed for that route.

For better project organization, the navigation structure can be placed in AppNavigator.js.

import React from 'react';

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

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

import HomeScreen
    from '../screens/HomeScreen';

import ProfileScreen
    from '../screens/ProfileScreen';

const Stack =
    createNativeStackNavigator();

export default function AppNavigator() {

    return (

        <NavigationContainer>

            <Stack.Navigator>

                <Stack.Screen
                    name="Home"
                    component={HomeScreen}
                />

                <Stack.Screen
                    name="Profile"
                    component={ProfileScreen}
                />

            </Stack.Navigator>

        </NavigationContainer>

    );

}

This component contains the complete navigation structure.

The navigation component can be imported into the main App.js file.

import React from 'react';

import AppNavigator
    from './navigation/AppNavigator';

export default function App() {

    return (
        <AppNavigator />
    );

}

Now App.js uses the navigation structure defined in the navigation folder.

The Home screen receives a navigation object.

export default function HomeScreen({
    navigation
}) {

    return (

        <Button
            title="Open Profile"
            onPress={() =>
                navigation.navigate(
                    'Profile'
                )
            }
        />

    );

}

Pressing the button opens the Profile screen.

The goBack() method returns the user to the previous screen.

navigation.goBack();

For example:

<Button
    title="Go Back"
    onPress={() =>
        navigation.goBack()
    }
/>

The screen header can be customized using the options property.

<Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{
        title: 'My Home'
    }}
/>

The navigation header will use the specified title.

The header can be hidden for a particular screen.

<Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{
        headerShown: false
    }}
/>

This can be useful when creating a custom full-screen UI.

Navigation parameters can be passed while opening another screen.

navigation.navigate(
    'Profile',
    {
        userId: 101,
        name: 'Rahul'
    }
);

The destination screen can access these values through its route object.

export default function ProfileScreen({
    route
}) {

    const {
        userId,
        name
    } = route.params;

    return (

        <View>

            <Text>
                ID: {userId}
            </Text>

            <Text>
                Name: {name}
            </Text>

        </View>

    );

}

After completing the setup, test the application.

App
 ↓
NavigationContainer
 ↓
Stack.Navigator
 ↓
Home Screen
 ↓
Profile Screen

Check that the Home screen appears first and that the Profile screen can be opened successfully.

• Installing the wrong navigation package.
• Forgetting to install the native stack package.
• Missing required platform dependencies.
• Using incorrect import paths.
• Forgetting NavigationContainer.
• Using an unregistered route name.
• Using an incorrect screen component.
• Not restarting the development server when required after configuration changes.

import React from 'react';

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

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

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

const Stack =
    createNativeStackNavigator();

function HomeScreen({
    navigation
}) {

    return (

        <View>

            <Text>
                Home Screen
            </Text>

            <Button
                title="Open Profile"
                onPress={() =>
                    navigation.navigate(
                        'Profile',
                        {
                            name: 'Rahul'
                        }
                    )
                }
            />

        </View>

    );

}

function ProfileScreen({
    navigation,
    route
}) {

    return (

        <View>

            <Text>
                Profile Screen
            </Text>

            <Text>
                Name: {route.params.name}
            </Text>

            <Button
                title="Go Back"
                onPress={() =>
                    navigation.goBack()
                }
            />

        </View>

    );

}

export default function App() {

    return (

        <NavigationContainer>

            <Stack.Navigator>

                <Stack.Screen
                    name="Home"
                    component={HomeScreen}
                />

                <Stack.Screen
                    name="Profile"
                    component={ProfileScreen}
                />

            </Stack.Navigator>

        </NavigationContainer>

    );

}

• Keep screen components in a dedicated screens folder.
• Keep complex navigation configuration organized.
• Use meaningful route names.
• Choose the navigator according to the application structure.
• Keep parameters simple and relevant.
• Test navigation on the target platforms.
• Keep navigation code separate when the application becomes large.
• Avoid unnecessary nested navigators.

Create React Native Project
          ↓
Install React Navigation
          ↓
Install Required Navigator
          ↓
Install Required Dependencies
          ↓
Create Screens
          ↓
Create NavigationContainer
          ↓
Create Navigator
          ↓
Register Screens
          ↓
Set Screen Options
          ↓
Navigate Between Screens
          ↓
Pass Parameters
          ↓
Test Back Navigation

Once the navigation setup is complete, you can build applications with multiple screens. The next step is to learn individual navigation patterns such as stack navigation in more detail.