Day 2 of 5

React Navigation

Navigation between screens is handled by the React Navigation library. You will set up a Stack navigator and a Tab navigator, pass params between screens, and add a header back button.

bash
npx expo install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context
jsx
// App.js — Stack Navigator
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
import DetailScreen from './screens/DetailScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
jsx
// HomeScreen.js — navigate with params
export default function HomeScreen({ navigation }) {
  return (
    <View style={{ flex:1, alignItems:'center', justifyContent:'center' }}>
      <Button
        title="Go to Detail"
        onPress={() => navigation.navigate('Detail', { id: 42 })}
      />
    </View>
  );
}

// DetailScreen.js — read params
export default function DetailScreen({ route }) {
  const { id } = route.params;
  return <Text>Detail for item {id}</Text>;
}

Exercise: Add a Bottom Tab Navigator

  1. Install @react-navigation/bottom-tabs
  2. Create HomeTab and ProfileTab screens
  3. Wrap Stack inside Tab or use tabs at root
  4. Add icons using @expo/vector-icons
  5. Pass user name as a param to Profile tab

Day 2 Summary

Finished this lesson?