The first declarative React Native router
react-native-router-fluxis 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-fluxinherits all limitations and changes from updated versions.
yarn add react-native-router-flux
npm install react-native-screens || yarn add react-native-screens)
npm install react-native-gesture-handler || yarn add react-native-gesture-handler)
npm install react-native-reanimated || yarn add react-native-reanimated)
npm install react-native-safe-area-context || yarn add react-native-react-native-safe-area-context)
npm install @react-native-community/masked-view || yarn add @react-native-community/masked-view)
Define all your routes in one React component...
const App = () => ( );
...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' });
For a full listing of the API, view the API docs.
# 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
Switchreplacement)
Scenewith
componentdefined can have
onEnter/
onExit/
onhandlers.
onEnter/
onhandler can be async.
onEnter/
on,
successhandler (if defined) will be executed
successis a string then router will navigate to the
Scenewith that key
failureprop (if defined) will be run.
onEnter,
onExit,
success, and
failuremakes patterns like authentication, data validation, and conditional transitions simple and intuitive.
observer. You may subscribe to
navigationStore(
Actionsin v3) and observe current navigation state. Not applicable to Redux.
rightTitleto a scene will apply to all child scenes simultaneously. See example app.
Actions.state.
Actions.currentSceneto get name of current scene.
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.
{/*code*/}}/>
will not help.
{/*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()}) }) }
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]