React Native Router (v4.x)
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.
IMPORTANT NOTES
React Navigation v3.x
v4.1.0-beta.x is based onthis 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 v2.x]. SeeReact 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 onUsage
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 router Actions.home(PARAMS) // go back (i.e. pop the current screen off the nav stack) Actions.pop() // refresh the current Scene with the specified props Actions.refresh({param1: 'hello', param2: 'world'})
API
For a full listing of the API, view the API docs.
example apps
Try the# Get the code git clone https://github.com/aksonov/react-native-router-flux.git cd react-native-router-flux/examples/[expo|react-native|redux] # Installing dependencies yarn # Run it yarn start
v4 Features
- 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
Switch
replacement)- Each
Scene
withcomponent
defined can haveonEnter
/onExit
/on
handlers. onEnter
/on
handler can be async.- For 'truthy' return of
onEnter
/on
,success
handler (if defined) will be executed- if
success
is a string then router will navigate to theScene
with that key
- if
- in case of handler's failure,
failure
prop (if defined) will be run. - Combining
onEnter
,onExit
,success
, andfailure
makes patterns like authentication, data validation, and conditional transitions simple and intuitive.
- Each
- MobX-friendly: all scenes are wrapped with
observer
. You may subscribe tonavigationStore
(Actions
in 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
rightTitle
to a scene will apply to all child scenes simultaneously. See example app. - Access to your app navigations state as simple as
Actions.state
. - Use
Actions.currentScene
to get name of current scene.
Helpful tips if you run into some gotchas
Using Static on Methods with HOCs
-
This is just a helpful tip for anyone who use the onExit/onEnter methods as a static method in their Component Class. Please refer to this link https://reactjs.org/docs/higher-order-components.html.
-
If your Scene Components are Wrapped in Custom HOCs/ Decorators, then the static onExit/onEnter methods will not work as your Custom HOCs will not copy the static methods over to your Enhanced Component.Use the npm package called hoist-non-react-statics to copy your Component level static methods over to your Enhanced Component.
Implement onBack from your Scene after declaring it
- If you have a Scene where in you want to make some changes to your Component State when Back button is pressed, then doing this
<Scene key={...} component={...} onBack={()=>{/*code*/}}/>
will not help.
<Scene key={...} component={...} onBack={()=>{/*code*/}} back={true}/>
Make sure back = true is passed to your scene, now in your Component's lifecycle add this
componentDidMount(){ InteractionManager.runAfterInteractions(()=> { Actions.refresh({onBack:()=>this.changeSomethingInYourComponent()}) }) }
Contributors
This project exists thanks to all the people who contribute. [Contribute].
Backers
Thank you to all our backers!
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]