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(
  createStackNavigator({
    Home: { screen: HomeScreen },
    Chat: {
      screen: ChatScreen,
      path: "chat/:user",
    },
  })
)

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, https://reactnavigation.org/docs/en/deep-linking.html).

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:

mychat://chat/test1?productId=10

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)

You can also add more parameters using &&

mychat://chat/test1?productId=10&&source=email

Comments

[RezaAbaskhanian]

hi,
thank you