React Native Router Flux

The first declarative React Native router
Alternatives To React Native Router Flux
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Developer Roadmap17,849
4 months ago35otherJavaScript
Roadmap to becoming a React developer
React Native Router Flux9,0133,478886 months ago273March 26, 2021336mitJavaScript
The first declarative React Native router
React Pxq7,226
a year ago15mitJavaScript
一个 react + redux 的完整项目 和 个人总结
React Router Tutorial5,564
4 years ago73JavaScript
Wouter5,170715a day ago34November 09, 202116JavaScript
🥢 A minimalist-friendly ~1.5KB routing for React and Preact. Nothing else but HOOKS.
Router4,7393520 days ago127January 31, 202239mitTypeScript
🤖 Type-safe router w/ built-in caching & URL state management for JS/TS, React, Preact, Solid, Vue, Svelte and Angular
Connected React Router4,7312,0666203 months ago51July 11, 2022175mitJavaScript
A Redux binding for React Router v4
After.js4,103445a month ago34November 01, 202113mitTypeScript
Next.js-like framework for server-rendered React apps built with React Router
2 years ago58otherJavaScript
從零開始學 ReactJS(ReactJS 101)是一本希望讓初學者一看就懂的 React 中文入門教學書,由淺入深學習 ReactJS 生態系 (Flux, Redux, React Router, ImmutableJS, React Native, Relay/GraphQL etc.)。
4 years ago65mitJavaScript
:dog: :clap: :star2: Welcome to star
Alternatives To React Native Router Flux
Select To Compare

Alternative Project Comparisons

React Native Router (v4.x) Backers on Open Collective Sponsors on Open Collective Join the chat at Codacy Badge npm version CircleCI

Follow author @PAksonov

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.


v5.0.alpha.x is based on React Navigation v5.x (very early alpha, development in progress, help wanted!)

v4.2.x is based on React Navigation v4.x

v4.1.0-beta.x is based on React Navigation v3.x

v4.0.x is based on [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.0.0-beta.x 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.

Getting Started

  1. Install native dependencies used by RNRF (see below,
  2. Install this component
yarn add react-native-router-flux

install the following libraries first

  1. react-native-screens by ( npm install react-native-screens || yarn add react-native-screens)
  2. react-native-gesture-handler ( npm install react-native-gesture-handler || yarn add react-native-gesture-handler)
  3. react-native-reanimated (npm install react-native-reanimated || yarn add react-native-reanimated)
  4. react-native-safe-area-context (npm install react-native-safe-area-context || yarn add react-native-react-native-safe-area-context)
  5. @react-native-community/masked-view (npm install @react-native-community/masked-view || yarn add @react-native-community/masked-view)


Define all your routes in one React component...

const App = () => (
    <Stack key="root">
      <Scene key="login" component={Login} title="Login" />
      <Scene key="register" component={Register} title="Register" />
      <Scene key="home" component={Home} />

...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

// go back (i.e. pop the current screen off the nav stack)

// 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.

Try the example apps


# Get the code
git clone
cd react-native-router-flux/examples/[expo|react-native|redux]

# Installing dependencies

# 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 with component defined can have onEnter/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 the Scene with that key
    • in case of handler's failure, failure prop (if defined) will be run.
    • Combining onEnter, onExit, success, and failure makes patterns like authentication, data validation, and conditional transitions simple and intuitive.
  • MobX-friendly: all scenes are wrapped with observer. You may subscribe to navigationStore (Actions in v3) and observe current navigation state. Not applicable to Redux.
  • Flexible Nav bar customization, currently not allowed by React Navigation:
  • 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

  • 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

    InteractionManager.runAfterInteractions(()=> {


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]

Popular Router Projects
Popular Reactjs Projects
Popular Networking Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
React Navigation