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 (
       { /* left blank */ }
      })}/>
    )
  }
};

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