aksonov

The first declarative React Native router

8.9K Stars 2.2K Forks Last release: 10 months ago (4.2.0) MIT License 1.4K Commits 68 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Readme

React Native Router (v4.x)

Name: react-native-router-flux
Brand: react-native-router-flux
SKU: //aksonov/react-native-router-flux
Rating: 4.875444444444445 (8879 reviews)

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

Install native dependencies used by React Native Router (https://reactnavigation.org/docs/en/getting-started.html)
Install this component

yarn add react-native-router-flux

install the following libraries first

react-native-screens by (

npm install react-native-screens || yarn add react-native-screens

)

react-native-gesture-handler (

npm install react-native-gesture-handler || yarn add react-native-gesture-handler

)

react-native-reanimated (

npm install react-native-reanimated || yarn add react-native-reanimated

)

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]

react-native-router-flux

by aksonov