Equivalent of dynamic query params for React Native Navigation? - reactjs

Question

I want to dynamically show profiles based on userId in React Native. In react where I set up my routes, I'd add something like route="/users/:userId", and then use that userId to make various calls, display various data, etc. When I implement a link to the profile page, I route them to, say, /users/1.
How can I achieve something similar in React Native? The only thing seen around the web is to pass it in as params, but does that mean I've got to pass it in each time I call navigation.navigate? I'm not sure what the route-defining or the navigation.navigate syntax should look like.
I've checked a couple of SO threads, but none of them seem to answer this fundamental question. And all of the docs and articles about dynamic routing in React Navigation seem to mostly concern passing in dynamic title headers and stuff.

Answer 1

React Navigation primarily uses a params object which looks like { userId: 1 } rather than a string-based route definition like "/users/:userId".
Linking to a Profile
The navigation.navigate function takes two props: the name of the route and the params to pass. You don't need to include the second params argument at all if you are navigating to a route which doesn't take any parameters. navigation.navigate("Home") is fine. But when going to your "User" route you will always need to include a userId.
In order to go to a particular user profile, you would call:
onPress={() => navigation.navigate("User", { userId: 1 })}
Docs: Passing parameters to routes
Accessing Params
That userId param can then be accessed in the UserScreen component through the props which are injected by the navigator. Every screen receives props route and navigate. The params are a property of the route prop.
So you can define a UserRoute component like this, where we get the current userId from route.params.userId.
const UserScreen = ({route, navigation}) => (
<View>
<Text>Viewing profile for user #{route.params.userId}</Text>
<TouchableOpacity onPress={() => navigation.navigate("Home")}>
<Text>Back to Home</Text>
</TouchableOpacity>
</View>
);
(Typescript users: this component is React.FC<StackScreenProps<RootStackParamList, "User">> where RootStackParamList is your own app's param definitions)
Declaring Routes
You don't actually need to say anything about the params when you create your routing. This works just fine:
export const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="User" component={UserScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
There are some additional optional configurations that you can use. You can map the params to options or map the params to a unique screen id, for example.
<Stack.Screen
name="User"
component={UserScreen}
options={({ route }) => ({
title: `User Profile #${route.params.userId}`
})}
getId={({ params }) => params.userId.toString()}
/>
(Typescript users will want to define a type, typically called RootStackParamList, which maps each route to its params types. This is then used as the generic on StackScreenProps, StackNavigationProp, etc.)
String-Based Navigation
React Navigation does support linking to paths like "/user/1", but it requires additional configuration. Behind the scenes it still uses a params object, so you need to define a mapping from the path to the params. It can be a custom mapping, or you can use the same syntax that React Router does with : to define params. "users/:userId" will create a params object with the userId as the key.
Your Stack.Screen component stay the same. The configuration options are passed as a prop linking to the NavigationContainer component. If you set this up then you are able to use the experimental Link component like you would in React Router to link to a path like "/users/1".
export const App = () => {
return (
<NavigationContainer
linking={{
prefixes: ["https://yourdomain.com"],
config: {
screens: {
Home: "",
User: "users/:userId"
}
}
}}
>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="User" component={UserScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
CodeSandbox Demo with typescript types.