How to Use React Navigation in React Native: Simple Guide

To use React Navigation in React Native, first install the library and its dependencies, then create a navigator like StackNavigator to manage screens. Wrap your app in a NavigationContainer and define screens inside the navigator to enable navigation between them.

Syntax

React Navigation uses navigators to manage screen transitions. The main parts are:

• NavigationContainer: Wraps your app and manages navigation state.
• createStackNavigator(): Creates a stack navigator to handle screen stack.
• Screen: Defines each screen component with a name and component.

This setup allows you to navigate between screens by name.

javascript

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Output

App with two screens: Home and Details, navigable via stack navigation.

Example

This example shows a simple app with two screens: Home and Details. You can navigate from Home to Details by pressing a button.

javascript

import * as React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Output

App shows Home Screen with a button; pressing it navigates to Details Screen.

Common Pitfalls

Common mistakes when using React Navigation include:

• Not wrapping the app in NavigationContainer, which breaks navigation.
• Forgetting to install required dependencies like react-native-screens or react-native-safe-area-context.
• Using incorrect screen names in navigation.navigate().
• Not passing the navigation prop to screen components.

Always check installation steps and follow the official setup guide.

javascript

/* Wrong: Missing NavigationContainer */
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';

const Stack = createStackNavigator();

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

/* Right: Wrap with NavigationContainer */
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';

const Stack = createStackNavigator();

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

Quick Reference

Here is a quick summary of key React Navigation parts:

Concept	Description
NavigationContainer	Wraps your app and manages navigation state.
createStackNavigator	Creates a stack-based navigation for screens.
Screen	Defines a screen with a name and component.
navigation.navigate('ScreenName')	Navigate to another screen by name.
navigation.goBack()	Go back to the previous screen.

Key Takeaways

Always wrap your app in NavigationContainer to enable navigation.

Use createStackNavigator to define screen stacks and transitions.

Navigate between screens using navigation.navigate with the screen name.

Install all required dependencies before using React Navigation.

Check screen names carefully to avoid navigation errors.