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