React Native Navigator Router

Integration React Native Navigator with React Router.

Introduction

React Native is a powerful tool to build iOS and Android Apps by writing JavaScript code only once. As React works on web pages, React Native also has the same problem to navigating from different pages. React Router is a good solution to manage page and navigate by URL addresses. React Native has a component named Navigator to manage pages. But it only provided original interfaces so managing pages is a headache problem in developing apps. If we only use React Router without Navigator, we should invent some "wheels" to solve animations, page stacks problems. So integration React Native Navigator with React Router is a reasonable way to go.

Installation

npm install react-native-navigator-router --save

Usage

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { createMemoryHistory, Router, IndexRoute, Route } from 'react-router';
import { createNavigatorRouter } from 'react-native-navigator-router';

class App extends Component {
  render() {
    return (
      <Router history={createMemoryHistory('/')}>
        <Route path='/' component={createNavigatorRouter()}>
          <IndexRoute component={Home} />
          <Route path="/about" component={About} />
          <Route path="/detail" component={Detail} />
        </Route>
      </Router>
    );
  }
}

AppRegistry.registerComponent('Example', () => App);

For complete code, see Example.

Example

To run example project, you should run command as following lines:

cd Example
npm install
react-native run-ios

API

This component only has one function. It's quite simple.

createNavigatorRouter

createNavigatorRouter(onBack: (index) => boolean[, style: StyleSheet])

Use this function to create React Router root component, pass onBack argument to it if you are planing to handle back by your self. style argument will apply to Navigator component's style prop. Use it if you want to define your Navigator styles.

Once you configured it, you can use URL to define your pages and navgating between them by simply push or back url. Enjoy it!

Limition

• Only push, goBack and go with negative index are fully support, jump havn't been tested yet, any other operations are not support.
• Need more testing and feedback.
• Not support persist/restore the page stack.

Use with Redux

This component is compatible with Redux, you can use React Router Redux to integration them. No special configurations is needed, just following the documents.

Showcase

The following Apps are using:

• Uxiaor - iOS Android

Feedback

If you any questions, use Issues.

Sina Weibo: @starlight36

License

MIT Licence.