react-native-router-flux is a different API over
react-navigation. It helps users to define all the routes in one central place and navigate and communicate between different screens in an easy way. But it also means that
react-native-router-flux inherits all limitations and changes from updated versions.
React Navigation v2.x. See this branch and docs for v3 based on deprecated React Native Experimental Navigation API. It is not supported and may not work with latest React Native versions.v4 is based on
React Navigation v1.5.x. See this branch for this version. It is also not supported and may not work with the latest React Native versions.v4.0.0-beta.x is 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 one scene to another scene with a simple and 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
For a full listing of the API, view the API docs.
# Get the codegit clone https://github.com/aksonov/react-native-router-flux.gitcd react-native-router-flux/examples/[expo|react-native|redux]# Installing dependenciesyarn# Run ityarn start
- Based on latest React Navigation API
- Separate navigation logic from presentation. You may now change 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, currently not 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 simultaneously. 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]