mobx-navigation (react-native)
simplified the integration of mobx on top of react-navigation.
- Support android hardware back button automatically
- Using render prop for more customization in the future
Installation
yarn add mobx-navigation
make sure you have mobx
, mobx-react
and react-navigation
installed.
Usage
There is a MobxNavigationStore
which keeps track of navigation state and there is MobxNavigation
which is a render prop react component.
first you defined your routes in react-navigation style and save it in routes.js
file
// @flow <{} {}> { return <View> <Text>Index Screen</Text> </View> } <{} {}> { return <View> <Text>Main Screen</Text> </View> } const MainRouter =
then wire everything in your main component
// @flow // instantiating your mobx navigation store// and pass the react-navigation routes and your default route.const mobxNavigationStore = MainRouter 'index' <{} {}> { mobxNavigationStore } { } { return <MobxNavigation store=mobxNavigationStore> <MainRouter navigation=navigation /> </MobxNavigation> }
Credit
thank Paul Xue for your great article.