Navigation is an essential part of any mobile application. React Native is a popular framework for building native mobile applications using JavaScript. React Native provides a powerful set of components and APIs that make it easy to create complex navigation patterns in a single codebase. In this guide, we&#x27;ll explore how to use React Navigation to create a navigation stack, navigate between screens, and pass data between screens.

![react native navigation](https:&#x2F;&#x2F;devbrite.io&#x2F;media&#x2F;cover1.jpg)
## Installing React Navigation

The first step to using React Navigation is to install the library. To do this, run the following command in your terminal:

&#96;&#96;&#96;
npm install react-navigation
&#96;&#96;&#96;

Once the installation is complete, you&#x27;ll be ready to start using React Navigation.

## Setting Up the Navigation Stack in React Native

The navigation stack is the foundation of any React Native application. It is the structure that dictates which screens are displayed, and in what order. To set up the navigation stack, we&#x27;ll use the &#96;createStackNavigator&#96; function from the &#96;react-navigation&#96; library.

The &#96;createStackNavigator&#96; function takes an object as an argument. This object should have a &#96;screen&#96; property, which contains an array of objects that define the screens in the navigation stack. Each object should have a &#96;name&#96; property that contains the unique name of the screen, and a &#96;component&#96; property that contains the React component class for the screen.

For example, the following code creates a navigation stack with two screens, &#96;Home&#96; and &#96;Profile&#96;:

&#96;&#96;&#96;
const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
  Profile: {
    screen: ProfileScreen,
  },
});
&#96;&#96;&#96;

## Navigating Between Screens

Once the navigation stack is set up, you can navigate between screens using the &#96;navigate&#96; function. The &#96;navigate&#96; function takes the name of the screen you want to navigate to as an argument.

For example, the following code navigates to the &#96;Profile&#96; screen:

&#96;&#96;&#96;
navigation.navigate(&#x27;Profile&#x27;);
&#96;&#96;&#96;

## Passing Data Between Screens

Sometimes you need to pass data from one screen to another. To do this, you can use the &#96;navigate&#96; function&#x27;s &#96;params&#96; argument. The &#96;params&#96; argument is an object that contains the data you want to pass to the next screen.

For example, the following code passes a &#96;userId&#96; to the &#96;Profile&#96; screen:

&#96;&#96;&#96;
navigation.navigate(&#x27;Profile&#x27;, {
  userId: 123
});
&#96;&#96;&#96;

On the &#96;Profile&#96; screen, you can access the &#96;userId&#96; using the &#96;navigation.state.params&#96; object.

## Using Tab Navigation in React Native

Tab navigation is a popular pattern for creating navigation stacks in mobile applications. React Navigation provides a &#96;createBottomTabNavigator&#96; function that makes it easy to create tab navigation stacks.

The &#96;createBottomTabNavigator&#96; function takes an object as an argument. This object should have a &#96;screen&#96; property, which contains an array of objects that define the screens in the tab navigation stack. Each object should have a &#96;name&#96; property that contains the unique name of the screen, and a &#96;component&#96; property that contains the React component class for the screen.

For example, the following code creates a tab navigation stack with two screens, &#96;Home&#96; and &#96;Settings&#96;:

&#96;&#96;&#96;
const AppNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeScreen,
  },
  Settings: {
    screen: SettingsScreen,
  },
});
&#96;&#96;&#96;

## Using Drawer Navigation in React Native

Drawer navigation is another popular pattern for creating navigation stacks in mobile applications. React Navigation provides a &#96;createDrawerNavigator&#96; function that makes it easy to create drawer navigation stacks.

The &#96;createDrawerNavigator&#96; function takes an object as an argument. This object should have a &#96;screen&#96; property, which contains an array of objects that define the screens in the drawer navigation stack. Each object should have a &#96;name&#96; property that contains the unique name of the screen, and a &#96;component&#96; property that contains the React component class for the screen.

For example, the following code creates a drawer navigation stack with two screens, &#96;Home&#96; and &#96;Settings&#96;:

&#96;&#96;&#96;
const AppNavigator = createDrawerNavigator({
  Home: {
    screen: HomeScreen,
  },
  Settings: {
    screen: SettingsScreen,
  },
});
&#96;&#96;&#96;

## Conclusion

In this guide, we explored how to use React Navigation to create a navigation stack, navigate between screens, and pass data between screens. We also explored how to use tab navigation and drawer navigation in React Native. We hope this guide has helped you get started with React Native navigation.

Complete Guide to Navigation in React Native

About

Legal

Products

Resources

Category: