react-native-router-flux-5
Advanced tools
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]
FAQs
React Native Router using Flux architecture
The npm package react-native-router-flux-5 receives a total of 0 weekly downloads. As such, react-native-router-flux-5 popularity was classified as not popular.
We found that react-native-router-flux-5 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ECMAScript 2025 introduces Iterator Helpers, Set methods, JSON modules, and more in its latest spec update approved by Ecma in June 2025.
Security News
A new Node.js homepage button linking to paid support for EOL versions has sparked a heated discussion among contributors and the wider community.
Research
North Korean threat actors linked to the Contagious Interview campaign return with 35 new malicious npm packages using a stealthy multi-stage malware loader.