search

react-native-simple-router-community / react-native-simple-router

A community maintained router component for React Native
MIT License
268 stars 56 forks source link
navigation react-native react-native-navigation react-navigation react-router router

readme

React Native Simple Router

Awesome navigation for your React Native app.

NavBar Example

Install

Make sure that you are in your React Native project directory and run:

$ npm install react-native-simple-router --save

Usage

import Router from 'react-native-simple-router';

The basics:

import React from 'react';
import { StyleSheet } from 'react-native';

// The initial page
class HelloPage extends React.Component {

  render() {
    return <Text>Hello world!</Text>;
  }

}

const styles = StyleSheet.create({
  header: {
    backgroundColor: '#5cafec',
  },
});

// Your route object should contain at least:
// - The name of the route (which will become the navigation bar title)
// - The component object for the page to render
const firstRoute = {
  name: 'Welcome!',
  component: HelloPage,
};

// The Router wrapper
class MyApp extends React.Component {

  render() {
    return (
      <Router
        firstRoute={firstRoute}
        headerStyle={styles.header}
      />
    );
  }
}

AppRegistry.registerComponent('routerTest', () => MyApp);

Boom. That's it.

From the "Hello world!"-page you can then navigate further to a new component by calling this.props.toRoute(). Let's build upon the HelloPage component in our first example:

import React, { PropTypes } from 'react';
import { StyleSheet } from 'react-native';

const propTypes = {
  toRoute: PropTypes.func.isRequired,
};

class HelloPage extends React.Component {
  constructor(props) {
      super(props);

      this.nextPage = this.nextPage.bind(this);
  }

  nextPage() {
    this.props.toRoute({
      name: "A new screen",
      component: HelloPage
    });
  }

  render() {
    return (
      <View>
        <TouchableHighlight onPress={this.nextPage} underlayColor="transparent">
          <Text>Next page please!</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

HelloPage.propTypes = propTypes;

export default HelloPage;

Now, when you click on "Next page please!", it will go to the next page (which in this case is still HelloPage but with a new title). Keep in mind that this.props.toRoute() needs to be called from one of the top-level routes, therefore, if your link is deeply nested within multiple components, you need to make sure that the action "bubbles up" until it reaches the parent route, which in turn calls this.props.toRoute().

Configurations

The <Router /> object used to initialize the navigation can take the following props:

The this.props.toRoute() callback prop takes one parameter (a JavaScript object) which can have the following keys:

The this.props.replaceRoute function takes in an object that can contain the same keys as toRoute(). The difference is that instead of adding a route to your stack, it replaces the route that you're on with the new route that you pass it.

The this.props.resetToRoute function takes in an object that can contain the same keys as toRoute(). The difference is that instead of adding a route to your stack, it replaces the route that you're on with the new route that you pass it, and empties the navigation stack as well.

The this.props.popToRoute function takes in an object that can contain the same keys as toRoute(). The difference is that instead of adding a route to your stack, it pop all routes until the desired one.

The this.props.getCurrentRoutes() returns the current list of routes (same as ReactNative Navigator getCurrentRoutes(0) ). This can be used as an argument for popToRoute().

The functions this.props.setRightProps, this.props.setLeftProps and this.props.setTitleProps take in an object of props and sends that to your navbar's RightComponent, LeftComponent or TitleComponent, respectively.

As of 0.7.0 the router acts as a relay for events emitted by the navigator, and extends these to the following list:

You can listen to these events by adding an event listener as such:

  this.props.routeEmitter.addListener('didFocus', (route) => {
      console.log(route.name, 'didFocus');
  });

As of v0.8.0 the leftCorner, rightCorner and titleComponent have access to the following router functions :

Examples

Explorer app

To see available features in action, you can check out the Explorer app.

Clone this repo or go inside node_modules/react-native-simple-router folder and install dependencies, after that you will able to launch this as an standalone react-native application.

cd examples/Explorer
npm install

Twitter app

To see more of the router in action, you can check out the Twitter example app that comes with the package.

Test the app by requiring the TwitterApp component:

import { AppRegistry } from 'react-native';
import TwitterApp from './node_modules/react-native-simple-router/examples/twitter-example';

AppRegistry.registerComponent('routerTest', () => TwitterApp);