How to pass params with react native navigation

Question

Index.js

<View>
  <TouchableOpacity
    onPress={() => this.props.navigation.navigate('Product', { select: 1 })}
  >
    <Text>navigate</Text>
  </TouchableOpacity>
  <TouchableOpacity
    onPress={() => this.props.navigation.push('Product', { select: 1 })}
  >
    <Text>push</Text>
  </TouchableOpacity>
</View>

Product.js

componentDidMount() {
  console.log(this.props.navigation.state.params);
  // when navigate, returns null
  // when push, returns Object { "select": 1 }
}

When navigating from Index to Product, I want to pass a param: select.

When I use navigation.push(), Product receives the param.

But I don't want to use push cuz I don't wanna add a screen here.

Does this answer your question? [What is a difference between navigation.navigate(), navigation.push(), navigation.goBack() and navigation.popToTop() if I go back from page to page?](https://stackoverflow.com/questions/61966531/what-is-a-difference-between-navigation-navigate-navigation-push-navigatio) — Guruparan Giritharan, Sep 15 '20 at 17:29

score 0 · Answer 1 · answered Sep 15 '20 at 20:33

I know that's not the answer you're looking for, but I thought you might put it into consideration.

How about having Product.js as a part of Index.js? as the following:

<View>
 { !productVisibilty ? <TouchableOpacity
     onPress={() => this.setState({productVisibality: true})}}
  >
    <Text>navigate</Text>
  </TouchableOpacity>
  <TouchableOpacity
    onPress={() => this.props.navigation.push('Product', { select: 1 })}
  >
    <Text>push</Text>
  </TouchableOpacity>
: <Product />
</View>

How to pass params with react native navigation

1 Answers1