React NavX
Navigation and state management in one place for your React Native projects.
Featuring React context & hooks, React Navigation, and MobX-React.
Quick Peek
In your main app file:
AppRegistry.registerComponent"MyApp",App
Then, in a screen or other component:
Features
Note that React-NavX supports React Native 0.60 and above only.
- React Navigation 3.x for navigation and routing
- MobX-React, MobX, MobX-State-Tree for state management
- AsyncStorage for automatic state persistance
- Reactotron bindings for easy debugging
- TypeScript support
Getting Started (React Native)
react-navx
and its dependencies:
1. Install yarn add -D react-navx
# or, if you prefer npm
npm i --save-dev react-navx
2. Add a store to your app
Add a MobX-State-Tree (MST) store to your app. See mobx-state-tree documentation for much more on what you can do with MST models.
Note that React-NavX exports everything from mobx-state-tree
, so you can access types
and other functions from there directly.
import types from "react-navx" // your primary mobx-state-tree store for app stateconst AppStoreModel = types
3. Create a main navigator for your app
This is powered by react-navigation. There are many types of navigators you can use, but here's an example StackNavigator:
4. Bring it all together with NavX
Now bring it all together in your main app file. This is often index.js
or app.tsx
or similar.
AppRegistry.registerComponent"MyApp",App
That's it!
Advanced Usage
Customizing the navigationStore
React-NavX creates its own navigation store by default. If you'd like to create your own and provide it, just use the navigationStore
prop on the NavX
component.
Adding additional stores
If you want more than just the appStore
, just add them to the stores
and storeModels
props:
These can then be accessed by any screens or components by using the useStore
hook:
Note: Currently, both stores
and storeModels
are required to be provided. In the future, I'd like to infer the storeModels
to make it easier.
Accessing the RootStore and NavigationStore
The RootStore is exposed via the useRootStore
hook:
The navigationStore
is a property on the RootStore:
Help and Support
The best way to get help is to join our vibrant Infinite Red community Slack.
If you have a replicable bug, please feel free to file an issue with steps to reproduce. If you can provide a pull request to fix the issue, even better.
License
This project is released under the MIT license.
Author
React-NavX was created by Jamon Holmgren of Infinite Red.