Issue with Unstated and React Navigation in React Native

Question

I have the function

onPress = (store) => {
//store.flipState();
this.props.navigation.navigate('anotherScreen');
console.log('hi');
}

If I run it as above the navigation works. If I uncomment the store.flipState() line the state changes but the navigation doesn't work (the screen just refreshes). The console.log works in both cases.

How can I change the state and navigate at the same time?

I use Unstated and React Navigation in React Native.

Thank you.

Answer 1

I know this is really old, but what if you pass the navigate action to flipState

const {navigation: {navigate}} = this.props

store.flipState(navigate('anotherScreen'))

then, in flipState, when you call setState, pass the navigate as the success action callback

flipState = (callback) => {
  this.setState((state) => {
    return { flippedState: !state.flippedState };
  }, callback);
};