Why is my this.props.navigation.setParams not working?

Question

I'm setting my integer array on selectedStyleIds. Why is my this.props.navigaion.setParams not working?

  _setSelectedStyleIds = (selectedStyleIds) => {
    const action = NavigationActions.setParams({ 
        params: {selectedStyleIds},
        key: 'id-1509842157447-6' <- got this from console
    });
    this.props.navigation.dispatch(action);
    this.props.navigation.setParams({styleIds:selectedStyleIds});
    this.setState({selectedStyleIds});
  }

onCheck = ({selectedStyleIds}) => {
    console.log('onCheck');
    console.log(selectedStyleIds); <- [1,2,3,4,5]
    this.props._setSelectedStyleIds(selectedStyleIds);
    this.setState({selectedStyleIds}); <- working
}



_handleTagStylePress = () => {
    this.props.navigation.navigate('TagStyle', {onCheck: this.onCheck, selectedStyleIds: this.state.selectedStyleIds});
}

on onNavigatioOptions (just for debugging)

onPress={() => {
          let {image, text, ..., selectedSeasonIds,
            gender, selectedSizeIds, selectedColorIds, selectedStyleIds,
            brand, ..., base64 } = navigation.state.params;
          console.log('onsave')
          console.log(navigation.state.params.selectedStyleIds) <<-- []  

I've been checking these lines more than 50 times but apparently this.props.navigation.setParams({selectedStyleIds}); is not working.

All other things have no problem on setting state and params but ONLY the selectedStyleIds can't be set to navigation.state.params.

Answer 1

I had a similar problem, regarding setting the title of the navigation bar from within the component itself.

The following worked for me.

1) I defined the navigationOptions method (callback method of react navigation to set navigation properties)

When this method runs, you are very likely not to have access to the properties that are needed to set the navigator state, so simply return the current parameters, this is what I did:

static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
    return params;
};

2) I implemented the title construction in componentDidMount, setting the state:

componentDidMount(){
    t = "The window title";
    this.props.navigation.setParams({title: t });
}

I think the same could be done in any user interface event, like the onPress, and can be applied to any property.

Important note: What made the difference to me between not working and working was the definition of the navigationOptions method, even if it is a "do-nothing" method (returns what it gets, unchanged)

Answer 2

Now in 2020 it seems like the official documentation of react native suggests that you use route.param to get the params you want.

        const { itemId } = route.params;

This is from the official documentation:

Pass params to a route by putting them in an object as a second parameter to the navigation.navigate function: navigation.navigate('RouteName', { /* params go here */ })

Read the params in your screen component: route.params.

https://reactnavigation.org/docs/params/