Navigation in React Native

Introduction

One of the most basic and important aspects of mobile apps is Navigation. Navigation refers to the ability to move between screens within an app. In this article, we'll discuss adding Navigation to a React Native app using the React Navigation library.

Step 1. Install React Navigation

To add Navigation to a React Native app, you'll need to install the React Navigation library. You can do this by running the following command in your terminal.

npm install @react-navigation/native

Step 2. Install Dependencies

React Navigation has dependencies that you'll also need to install. You can install these dependencies by running the following command.

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

Step 3. Set Up the Navigation Container

Next, you'll need to set up a NavigationContainer. The NavigationContainer is a component that wraps up your entire app and provides the navigation context. You can set up a NavigationContainer like this.

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

function App() {
  return (
    <NavigationContainer>
      {/* your app screens */}
    </NavigationContainer>
  );
}

Step 4. Set Up App Screens

After setting up the NavigationContainer, you must set up your app screens. App screens are the different screens in your app that users can navigate between. You can set up app screens like this.

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

const Stack = createStackNavigator();

function HomeScreen() {
  return (
    // your home screen component
  );
}

function ProfileScreen() {
  return (
    // your profile screen component
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

In this example, we're using the createStackNavigator function from React Navigation to set up a stack navigator. The stack navigator allows users to move between screens by pushing and popping screens onto a stack. We're also setting up two screens: a HomeScreen and a ProfileScreen.

Step 5. Add Navigation Buttons

Next, you'll need to add navigation buttons to your screens. Navigation buttons allow users to navigate between screens. You can add navigation buttons like this.

import { Button } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    <Button
      title="Go to Profile"
      onPress={() => navigation.navigate('Profile')}
    />
  );
}

function ProfileScreen({ navigation }) {
  return (
    <Button
      title="Go to Home"
      onPress={() => navigation.navigate('Home')}
    />
  );
}

In this example, we're using the Button component from React Native to create navigation buttons. We're also using the navigation prop to navigate between screens.

Step 6. Customize Navigation Header

Finally, you may want to customize the navigation header. The navigation header is the bar at the top of the screen that displays the screen title and navigation buttons. You can customize the navigation header like this.

import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import HeaderButton from '../components/HeaderButton';

function HomeScreen({ navigation }) {
  return (
    <Screen>
      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item
          title="Menu"
          iconName="ios-menu"
          onPress={() => console.log('menu button pressed')}
        />
      </HeaderButtons>

Conclusion

In this article, we learned about Navigation in React Native.