← React Native Course6 / 16

Navigation

Apps have many screens. Wire them together with React Navigation — stack navigation for drill-down flows, tabs for top-level sections, and params to pass data between screens.

Ad 728×90

Install React Navigation

Why: React Native has no built-in router — React Navigation is the standard. Install the core plus the native screen primitives it builds on. Note: in an Expo project these are the supported versions; expo install picks compatible builds.

npx expo install @react-navigation/native @react-navigation/native-stack

npx expo install react-native-screens react-native-safe-area-context

A stack navigator

Why: a native stack pushes screens on top of each other with the platform's native transitions and a back gesture — the right model for drill-down flows (list → detail). Wrap everything in NavigationContainer once, then declare screens.

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

const Stack = createNativeStackNavigator()

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

Navigate and pass params

Why: every screen component receives a navigation prop. navigation.navigate("Details", params) pushes a screen and passes data; the target reads it from route.params. navigation.goBack() pops. This is how a tapped list row opens its detail screen with the right id.

function HomeScreen({ navigation }) {
  return (
    <Button
      title="Open item 42"
      onPress={() => navigation.navigate('Details', { id: 42 })}
    />
  )
}

function DetailsScreen({ route }) {
  return <Text>Showing item {route.params.id}</Text>
}

Tab navigation

Why: for top-level sections (Home, Search, Profile) a bottom tab bar is the native pattern. createBottomTabNavigator works just like the stack — and you can nest a stack inside each tab, which is the standard structure for real apps.

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'

const Tab = createBottomTabNavigator()

function RootTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={FeedScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  )
}

A stack navigator

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

const Stack = createNativeStackNavigator()

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

Navigate and pass params

function HomeScreen({ navigation }) {
  return (
    <Button
      title="Open item 42"
      onPress={() => navigation.navigate('Details', { id: 42 })}
    />
  )
}

function DetailsScreen({ route }) {
  return <Text>Showing item {route.params.id}</Text>
}

Tab navigation

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'

const Tab = createBottomTabNavigator()

function RootTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={FeedScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  )
}