How to Navigate in React Native: Simple Guide with Examples

In React Native, you navigate between screens using the React Navigation library. You set up a navigator like StackNavigator and use navigation.navigate('ScreenName') to move between screens.

Syntax

To navigate in React Native, you first create a navigator (like a stack) and then use the navigation prop to move between screens.

• createNativeStackNavigator(): Creates a stack navigator to manage screen history.
• navigation.navigate('ScreenName'): Moves to the specified screen.
• navigation.goBack(): Returns to the previous screen.

javascript

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

const Stack = createNativeStackNavigator();

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

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

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. Home shows a button 'Go to Details' that navigates to Details screen. Details shows a button 'Go Back' that returns to Home.

Example

This example shows a simple app with two screens: Home and Details. You can navigate from Home to Details and back using buttons.

javascript

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

const Stack = createNativeStackNavigator();

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

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</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="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Output

The app displays a Home screen with a button 'Go to Details'. Pressing it shows the Details screen with a button 'Go Back' that returns to Home.

Common Pitfalls

Common mistakes when navigating in React Native include:

• Not wrapping your app in NavigationContainer, which manages navigation state.
• Trying to use navigation prop outside screen components.
• Misspelling screen names in navigate() causing navigation to fail silently.
• Forgetting to install required dependencies like @react-navigation/native and native stack packages.

javascript

import React from 'react';
import { Button } from 'react-native';

/* Wrong: navigation used outside screen component */
function NotScreen() {
  // navigation is undefined here
  // navigation.navigate('Home'); // Error: navigation is undefined
  return null;
}

/* Right: navigation used inside screen component */
function HomeScreen({ navigation }) {
  return <Button onPress={() => navigation.navigate('Details')} title="Go" />;
}

Quick Reference

Here is a quick summary of key navigation functions:

Function	Description
navigation.navigate('ScreenName')	Go to a specific screen.
navigation.goBack()	Return to the previous screen.
navigation.replace('ScreenName')	Replace current screen with another.
navigation.push('ScreenName')	Add a new screen on top of stack.
navigation.reset()	Reset navigation state.

Key Takeaways

Use React Navigation library to handle screen navigation in React Native.

Wrap your app in NavigationContainer to manage navigation state.

Use navigation.navigate('ScreenName') to move between screens.

Always pass navigation prop to your screen components.

Check screen names carefully to avoid silent navigation failures.