You can pass parameters to screens using the navigation object provided by React Navigation.
Solution Code
React Native
-- Example Code --
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
const Stack = createStackNavigator();
function HomeScreen({ navigation }) {
return (
<Button
title="Go to Details"
onPress={() => navigation.navigate("Details", { name: "Jane Doe" })}
/>
);
}
function DetailsScreen({ route }) {
return <Text>Hello {route.params.name}</Text>;
}
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Explanation
This code demonstrates how to pass parameters to screens using React Navigation.Guided Hints
{'hint': 'Use navigation.navigate to navigate with parameters.'}
{'hint': 'Access parameters using route.params.'}