my space

Parameters for Deep Link in React Navigation


September 26, 2019

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",

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)

You can also add more parameters using &&



Written by gie who lives and works in Bangkok. Build things by code.
my twitter | github