Need help with react-native-router-flux?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

aksonov
9.0K Stars 2.2K Forks MIT License 1.4K Commits 257 Opened issues

Description

The first declarative React Native router

Services available

!
?

Need anything else?

Contributors list

# 23,025
JavaScr...
React N...
Android
mapbox-...
173 commits
# 47,640
JavaScr...
Objecti...
Shell
React N...
48 commits
# 20,688
Objecti...
css-fra...
Markdow...
docusau...
23 commits
# 74,856
React N...
TypeScr...
osx
Bash
21 commits
# 12,609
image-p...
JavaScr...
TypeScr...
React N...
15 commits
# 109,135
JavaScr...
11 commits
# 119,422
JavaScr...
9 commits
# 113,077
CSS
Objecti...
React N...
mobile-...
9 commits
# 122,430
React N...
GraphQL
timeago
jQuery
7 commits
# 11,101
React N...
Ruby
devise
omniaut...
7 commits
# 73,903
tslint
node
TypeScr...
Express
7 commits
# 74,249
Ruby
payment...
Rails
Shell
7 commits
# 43,585
keyboar...
React
React N...
scrollv...
7 commits
# 138,807
Objecti...
HTML
6 commits
# 55,333
Shell
truffle...
solidit...
web3js
6 commits
# 1,858
Swift
Objecti...
React
React N...
6 commits
# 106,152
Elixir
CSS
HTML
Shell
6 commits
# 138,096
Shell
TypeScr...
C++
6 commits
# 24,612
Java
Objecti...
React N...
webrtc
5 commits
# 136,354
Kotlin
TypeScr...
convent...
lint
5 commits

React Native Router (v4.x) Backers on Open Collective Sponsors on Open Collective Join the chat at https://gitter.im/aksonov/react-native-router-flux 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.

IMPORTANT NOTES

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, https://reactnavigation.org/docs/en/getting-started.html)
  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
    )

Usage

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' });

API

For a full listing of the API, view the API docs.

Try the example apps

rnrf

# 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
      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: 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
{/*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()})
    })
}

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.