react-native-router-flux: Actions.KEY doesn't work inside function that is passed to onPress

Question

I have the following code:

_renderMenuItem(name) {
    return (
        <TouchableHighlight onPress={() => this._onItemClicked(name) }>
            <Text>{name}</Text>
        </TouchableHighlight>
    )
}

_onItemClicked(name) {
    Actions.categoryScreen()
    this.props.dispatch(updateActivePage(name))

    // Close the NavigationDrawer
    Actions.refresh({ key: 'drawer', open: false })
}

The Actions.refresh() works fine but the Actions.categoryScreen() doesn't -looks like nothing really happens. If I replace the parameter passed to the onPress with onPress={Actions.categoryScreen} then it works fine and the categoryScreen is shown. However, this does not help me cause there are more stuff I want to do when onPress is triggered and I also need to pass the 'name' parameter.

Any ideas, anyone?

Thanks in advance.

Answer 1

I found the solution thanks to this reported issue on react-native-router-flux's repository. There seems to be a bug that when two Actions are triggered one after the other, then only the second one actually works. So the workaround that people posted and worked for me to is to trigger the second Action with a timeout. It works even if the timeout is 0. Here's how my _onItemClicked looks now:

_onItemClicked(name) {
    Actions.categoryScreen()
    this.props.dispatch(updateActivePage(name))

    // Close the NavigationDrawer. 
    setTimeout(() => Actions.refresh({ key: 'drawer', open: false }), 0)
}