react-native-router-flux

The first declarative React Native router

8,981

2,111

8,981

338

View on GitHub View on NPM

Top Related Projects

react-navigation

23,528

Routing and navigation for your React Native apps

react-native-screens

3,129

Native navigation primitives for your React Native app.

Quick Overview

React Native Router Flux is a routing library for React Native applications. It provides a declarative and flexible way to handle navigation and routing in mobile apps, offering features like nested routes, tab bars, and modals.

Pros

Easy to use with a declarative API
Supports nested routes and complex navigation structures
Integrates well with Redux for state management
Offers a wide range of customization options

Cons

Learning curve for developers new to the concept
Some users report performance issues with complex navigation structures
Documentation can be unclear or outdated in some areas
May have compatibility issues with certain React Native versions

Code Examples

Basic route configuration:

import React from 'react';
import { Router, Scene } from 'react-native-router-flux';
import { Home, Profile, Settings } from './components';

const App = () => (
  <Router>
    <Scene key="root">
      <Scene key="home" component={Home} initial={true} />
      <Scene key="profile" component={Profile} />
      <Scene key="settings" component={Settings} />
    </Scene>
  </Router>
);

Navigating between scenes:

import { Actions } from 'react-native-router-flux';

// Navigate to the profile scene
Actions.profile({ userId: 123 });

// Go back to the previous scene
Actions.pop();

Using tabs:

import React from 'react';
import { Router, Scene, Tabs } from 'react-native-router-flux';
import { Home, Profile, Settings } from './components';

const App = () => (
  <Router>
    <Scene key="root">
      <Tabs key="tabbar" tabBarStyle={{ backgroundColor: '#FFFFFF' }}>
        <Scene key="home" component={Home} title="Home" />
        <Scene key="profile" component={Profile} title="Profile" />
        <Scene key="settings" component={Settings} title="Settings" />
      </Tabs>
    </Scene>
  </Router>
);

Getting Started

Install the library:
```
npm install react-native-router-flux
```

Import and use in your app:

import { Router, Scene } from 'react-native-router-flux';

const App = () => (
  <Router>
    <Scene key="root">
      <Scene key="home" component={Home} initial={true} />
      <Scene key="profile" component={Profile} />
    </Scene>
  </Router>
);

Navigate between scenes:

import { Actions } from 'react-native-router-flux';

// In a component
const handlePress = () => {
  Actions.profile({ userId: 123 });
};

Competitor Comparisons

react-navigation

23,528

Routing and navigation for your React Native apps

Pros of react-navigation

More comprehensive documentation and community support
Better integration with React Native's native navigation components
More flexible and customizable navigation options

Cons of react-navigation

Steeper learning curve for beginners
Requires additional setup and configuration compared to react-native-router-flux

Code Comparison

react-navigation:

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

react-native-router-flux:

import { Router, Scene } from 'react-native-router-flux';

const App = () => (
  <Router>
    <Scene key="root">
      <Scene key="home" component={HomeScreen} initial={true} />
      <Scene key="profile" component={ProfileScreen} />
    </Scene>
  </Router>
);

Both libraries offer similar functionality for navigation in React Native apps. react-navigation provides a more native feel and better integration with React Native's ecosystem, while react-native-router-flux offers a simpler API and easier setup for basic navigation needs. The choice between the two depends on the specific requirements of your project and your familiarity with React Native development.

react-native-screens

3,129

Native navigation primitives for your React Native app.

Pros of react-native-screens

Better performance optimization for native navigation
Seamless integration with React Navigation
Supports native-driven animations and gestures

Cons of react-native-screens

Steeper learning curve for developers new to native navigation concepts
May require additional setup and configuration compared to react-native-router-flux

Code Comparison

react-native-screens:

import { Screen, ScreenContainer } from 'react-native-screens';

function MyScreen() {
  return (
    <ScreenContainer>
      <Screen>{/* Screen content */}</Screen>
    </ScreenContainer>
  );
}

react-native-router-flux:

import { Router, Scene } from 'react-native-router-flux';

function MyApp() {
  return (
    <Router>
      <Scene key="home" component={HomeScreen} title="Home" />
    </Router>
  );
}

Summary

react-native-screens focuses on optimizing native navigation performance and integrates well with React Navigation. It offers better support for native-driven animations and gestures but may have a steeper learning curve.

react-native-router-flux provides a simpler API for navigation and routing, making it easier to set up and use for basic navigation needs. However, it may not offer the same level of performance optimization for complex navigation scenarios.

The choice between the two depends on the project's specific requirements, performance needs, and the development team's familiarity with native navigation concepts.

react-router

52,969

Declarative routing for React

Pros of React Router

More comprehensive and widely adopted solution for web-based React applications
Offers a rich set of features including nested routing, route parameters, and programmatic navigation
Extensive documentation and community support

Cons of React Router

Not specifically designed for React Native, may require additional setup or libraries for mobile use
Can be more complex to set up and use compared to React Native Router Flux
May have a steeper learning curve for beginners

Code Comparison

React Router:

import { BrowserRouter, Route, Switch } from 'react-router-dom';

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  </Switch>
</BrowserRouter>

React Native Router Flux:

import { Router, Scene } from 'react-native-router-flux';

<Router>
  <Scene key="root">
    <Scene key="home" component={Home} initial={true} />
    <Scene key="about" component={About} />
  </Scene>
</Router>

React Router is more suited for web applications, offering a comprehensive routing solution with extensive features. React Native Router Flux is specifically designed for React Native, providing a simpler API and mobile-oriented features. The choice between the two depends on the target platform and specific project requirements.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

React Native Router (v4.x)

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.

Examples
Motivation
v4 Features
API
Migrating from v3
Sponsors/Backers/Contributors

Getting Started

Install native dependencies used by RNRF (see below, 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)
react-native-safe-area-context (npm install react-native-safe-area-context || yarn add react-native-react-native-safe-area-context)
@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 = () => (
  <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' });

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

<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()})
    })
}