React Native Tutorial

Getting Started with React Native JavaScript & JSX Essentials Core Components & Styling Props & State Hooks (useState & useEffect) Lists with FlatList Navigation (React Navigation) Networking with fetch / axios State Management (Context & Redux) Local Storage with AsyncStorage Native Modules & Permissions Building & Publishing (EAS / Stores)

Navigation (React Navigation)

June 02, 2026 • 1 min read

React Navigation is the standard library for moving between screens.

A stack navigator

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();

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

Navigate & pass params

navigation.navigate('Detail', { id: 42 });
// in DetailScreen:
const { id } = route.params;

Add tab and drawer navigators for bottom tabs and side menus.

Summary

React Navigation provides stack/tab/drawer navigators. Use navigation.navigate with params and read them via route.params.