Q: setParams is not working on callback function To use state in Screen, I'm sending callback function as a props from the previous screen. 
To call onCheck when user press 'save' button on the header at the TagStyle, I'm sending onCheck function to TagStyle screen from Screen A
  _handleTagStylePress = () => {
    this.props.navigation.navigate('TagStyle', {onCheck: this.onCheck, selectedStyleIds: this.state.selectedStyleIds});
  }

onCheck function defined in Screen A changes state and navigation.state.params. Here I can't setParams. I confirmed this.props.navigation has setParams method but somehow it's not doing anything.
  _setSelectedStyleIds = (selectedStyleIds) => {
    console.log(selectedStyleIds); <- correctly printed [1,2,3,4,5]
    const action = NavigationActions.setParams({ params: {selectedStyleIds}, 
        key: 'id-1509842157447-6' });
    this.props.navigation.dispatch(action); <- no params change at all
    this.props.navigation.setParams({styleIds:selectedStyleIds}); <- no params change at all
    this.setState({selectedStyleIds});
  }

  onCheck = ({selectedStyleIds}) => {
    console.log(selectedStyleIds); <- correctly printed [1,2,3,4,5]
    this._setSelectedStyleIds(selectedStyleIds);
    console.log(this.props);  <- result showing below
    // navigation.state.params.selectedStyleIds: []
    this.setState({selectedStyleIds}); <- setState is working
    // state = {selectedStyleIds:[1,2,3,4,5]}
  }

console.log(this.props); print
Object {
  "dispatch": [Function anonymous],
  "navigation": Object {
    "dispatch": [Function anonymous],
    "goBack": [Function goBack],
    "navigate": [Function navigate],
    "setParams": [Function setParams],
    "state": Object {
      "key": "id-1509771947484-6",
      "params": Object {
        "bigType": "Top",
        ...
        ...
        ...
        "selectedStyleIds": Array [],
        ...
      },
      "routeName": "AddClotho",
    },
  },
  "screenProps": undefined,
}

TagStyle screen
  static navigationOptions = ({ navigation }) => ({
    headerRight: (
      <RkButton
        rkType='clear'
        onPress={() => {
          console.log(navigation.state.params.selectedStyleIds) <- [1,2,3,4,5]
          navigation.state.params.onCheck({selectedStyleIds: navigation.state.params.selectedStyleIds});
          navigation.goBack();
        }}>
        <RkText rkType="header3">SAVE</RkText>
      </RkButton>
    ),
  })

I'm guessing this.props.navigation.setParams is setting NOT current params in Screen A but params somewhere. I couldn't find how I can approach or debug this problem further. 

A: There is a more controlled approach to this. Could you try the following?


import { NavigationActions } from 'react-navigation';

...

const setParamsAction = NavigationActions.setParams({
  params: { onCheck: /* YOUR FUNCTION */ },
  key: 'ROUTE FOR PARAM CHANGE',
});

this.props.navigation.dispatch(setParamsAction);


