React Navigation is the standard navigation library for React Native. It provides stack, tab, and drawer navigators.

Installation 

  npx expo install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context

Stack Navigator

Push and pop screens like a native stack:

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

const Stack = createNativeStackNavigator();

function HomeScreen({ navigation }) {
    return (
        <View>
            <Text>Home</Text>
            <Button
                title="Go to Details"
                onPress={() => navigation.navigate('Details', { itemId: 42 })}
            />
        </View>
    );
}

function DetailsScreen({ route }) {
    const { itemId } = route.params;
    return <Text>Details for item {itemId}</Text>;
}

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

Passing Parameters

Navigate with data:

  navigation.navigate('Details', { itemId: 42, title: 'Widget' });

// In DetailsScreen:
const { itemId, title } = route.params;

Update params on the same screen:

  navigation.setParams({ title: 'Updated Title' });

Tab Navigator 

  npx expo install @react-navigation/bottom-tabs
  
  import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

<Tab.Navigator>
    <Tab.Screen name="Home" component={HomeScreen} />
    <Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>

Nest stacks inside tabs when each tab needs its own navigation stack.

Expo projects can also use file-based routing with Expo Router in the app/ directory.

Next: render efficient lists with FlatList.