React Native

How do you handle navigation with parameters in React Native?

Medium
43
Added
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.'}