React Navigation) is in beta. See this branch and docs for v3.NOTE: v4 (based on
Define all your routes in one React component...
const App =<Router><Stack key="root"><Scene key="login" component=Login title="Login"/><Scene key="register" component=Register title="Register"/><Scene key="home" component=Home/></Stack></Router>;
...and navigate from scene to scene with a simple, powerful API
// Login.js// navigate to 'home' as defined in your top-level routerActions// go back (i.e. pop the current screen off the nav stack)Actions// refresh the current Scene with the specified propsActions
Try the example app
# Get the codegit clone https://github.com/aksonov/react-native-router-flux.gitcd react-native-router-flux/Example# Install dependenciesyarn# Run itreact-native run-ios
- Based on latest React Navigation API
- Separate navigation logic from presentation. You may change now navigation state directly from your business logic code - stores/reducers/etc. navigationStore
- Built-in state machine (v3
componentdefined can have
onhandler can be async.
- For 'truthy' return of
successhandler (if defined) will be executed
successis a string then router will navigate to the
Scenewith that key
- in case of handler's failure,
failureprop (if defined) will be run.
failuremakes patterns like authentication, data validation, and conditional transitions simple and intuitive.
- MobX-friendly: all scenes are wrapped with
observer. You may subscribe to
Actionsin v3) and observe current navigation state. Not applicable to Redux.
- Flexible nav bar customization not currently allowed by React Navigation: https://github.com/react-community/react-navigation/issues/779
- Drawer support (provided by React Navigation)
- Inheritance of scene attributes allow you to avoid any code/attribute duplications. Adding
rightTitleto a scene will apply to all child scenes. See example app.
- Access to your app navigations state as simple as
Actions.currentSceneto get name of current scene.
This project exists thanks to all the people who contribute. [Contribute].
Thank you to all our backers! 🙏 [Become a backer]
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]