gem-hunter
Language: JavaScript
The first declarative React Native router
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.
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 = () => ( <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' });
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
Switch replacement)
Scene with component defined can have onEnter/onExit/on handlers.onEnter/on handler can be async.onEnter/on, success handler (if defined) will be executed
success is a string then router will navigate to the Scene with that keyfailure prop (if defined) will be run.onEnter, onExit, success, and failure makes patterns like authentication, data validation, and conditional transitions simple and intuitive.observer. You may subscribe to navigationStore (Actions in v3) and observe current navigation state. Not applicable to Redux.rightTitle to a scene will apply to all child scenes simultaneously. See example app.Actions.state.Actions.currentScene to 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.
<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()}) }) }
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]