How to navigate in mobx store using react navigation?

Question

I can use this.props.navigation from screen component to navigate. How should I do the similar in mobx store file? Or should I perform navigation in store?

Answer 1

You can keep all your states including navigation state in mobx store.

For example:

// sourced and modified from https://github.com/react-community/react-navigation/issues/34#issuecomment-281651328

class NavigationStore {
  @observable headerTitle = "Index"
  @observable.ref navigationState = {
    index: 0,
    routes: [
      { key: "Index", routeName: "Index" },
    ],
  }

  // NOTE: the second param, is to avoid stacking and reset the nav state
  @action dispatch = (action, stackNavState = true) => {
    const previousNavState = stackNavState ? this.navigationState : null;
    return this.navigationState = AppNavigator
        .router
        .getStateForAction(action, previousNavState);
  }
}

// NOTE: the top level component must be a reactive component
@observer
class App extends React.Component {
  constructor(props, context) {
    super(props, context)
    // initialize the navigation store
    this.store = new NavigationStore()
  }

  render() {
    // patch over the navigation property with the new dispatch and mobx observed state
    return (
      <AppNavigator navigation={addNavigationHelpers({
        dispatch: this.store.dispatch,
        state: this.store.navigationState,
        addListener: () => { /* left blank */ }
      })}/>
    )
  }
};

Then you can directly call the dispatch action of the store to navigate to a new screen.

Answer 2

Send this one this.props.navigation as a parameter to the store. Then use as you use on the component side.

LoginStore.login(this.props.navigation)

in the LoginStore

@action login = (navigation) => { navigation.navigate('Page');}

Answer 3

Yes either:

forward the navigation class to the store when calling the method:

// add nivagation parameter to store fucntion:
this.props.store.handleSomething(data, this.props.navigation);

Or you can singleton the navigator (warning only works for one ofc):

return <Navigator ref={(nav) => this.props.store.navigator = nav} />;

after this is rendered it will set the navigator property in the store.

But I would suggest to store all your routing state also in a routing store like this: https://github.com/alisd23/mobx-react-router.

This way you always have easy access to the navigation state and you can be sure everything properly re-renders. (when in render function in components also depends on navigation changes!)