React Navigation — React Native in 5 Days

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

// 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>
  );
}

// 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>;
}