DEV Community


Posted on

Parameters for Deep Link in React Navigation

Recently I run into an issue that I need to pass more than 1 parameter via deep link into my react native app (and I use react-navigation). From the doc, once you set a path for your route, you can access it via deep link. For example,

const SimpleApp = createAppContainer(
    Home: { screen: HomeScreen },
    Chat: {
      screen: ChatScreen,
      path: "chat/:user",
Enter fullscreen mode Exit fullscreen mode

You can access the page by using deep link via (let's say that your uriPrefix is mychat://) mychat://chat/test1 (more detail about deep link in react navigation,

What if you want to pass more parameters into this page? let's say that this chat page needs one more parameter to specify a product that you may want to refer to. Luckily that react-navigation has already provided a method to add more parameters by using queryString. So in this case the url will look like this:


and in your ChatScreen page, this query string will be added to your params

const { params } = this.props.navigation.state
console.log("product id: ", params.productId)
Enter fullscreen mode Exit fullscreen mode

You can also add more parameters using &&


Top comments (1)

rezaabaskhanian profile image

thank you