React Native Stack Router

This is a simpler way to use Navigator with URI driven navigation facilitating simple transfer of data between Screens.

This component provides Navigation and 2 useful utilities to provide Stack Like navigation.

Quick start

Install:

npm install --save rn-stack-router

Add it you your application:

First let create a Screen

1
2import React from 'react';
3
4import {
5    Text,
6    Navigator
7    Platform
8} from 'react-native';
9
10import { NavigationHelper, Screen } from 'rn-stack-router';
11
12export default class MyFirstScreen extends Screen {
13    constructor(props) {
14        super(props);
15    }
16
17    static screenName() {
18        return 'myscreen';
19    }
20
21    static routeName() {
22        return '/myscreen';
23    }
24
25    static getDefaultProps() {
26        return {
27            defaultAnimation: Navigator.SceneConfigs.FadeAndroid,
28            useCache: false,
29            props: {
30                id: 'something'
31            }
32        };
33    }
34
35    render() {
36        return (
37            <Text>Hello World</Text>
38        );
39    }
40}

1
2import React from 'react';
3import {AppRegistry} from 'react-native';
4
5import { 
6    Router, 
7    RouteNavigator, 
8    NavigationHelper 
9} from 'rn-stack-router';
10
11import MyFirstScreen from './MyFirstScreen';
12
13class MyApp extends React.Component {
14	render() {
15    return <RouteNavigator initialRouteStack={[{name: '/myscreen'}]}
16                                           router={this.router}
17                                              app={this} />;
18  }
19
20  get router() {
21        var _router = NavigationHelper.getRouter();
22
23        // Add Routes if empty
24        if (!NavigationHelper.hasRoutes()) {
25            this.addRoutes();
26        }
27
28        // Return the router
29        return _router;
30    }
31
32  addRoutes() {
33      var options = {};
34      
35      // Add our routes here
36      NavigationHelper.addRoute(MyFirstScreen);
37  }
38}
39
40AppRegistry.registerComponent('MyApp',  () => MyApp);

RouteNavigator

This extends reacts Navigator class.

• app - Application reference to pass to all managed components.
• Router - The composed router to use for route navigation.

Screen

When you define an screen there are some important steps to folow:

1. Your Component must extend from Screen instead of React.Component

1export default class MyScreen extends Screen {
2
3}

2. Define screenName static Method. This method will give the Screen a name

1static screenName() {
2    return 'myscreen';
3}

3. Define routeName static Method. This method will give the Screen the route-parser URI.

1static routeName() {
2    return '/myscreen';
3}

Optional

You can define some options on the View using the getDefaultProps static method

1static getDefaultProps() {
2        return {
3            defaultAnimation: Navigator.SceneConfigs.FadeAndroid,
4            useCache: false,
5            props: {
6                id: 'something'
7            }
8        };
9    }

How To Navigate

You can navigate using NavigationHelper

Methods:

• NavigationHelper.push: push the view into the Stack
• NavigationHelper.pop: Navigates back to the previous view on the Stack
• NavigationHelper.replace: Replace the current View from the Stack

Nav Object Components:

• name - The name or URI of the route
• animation - The animation to use for the transition
• props - Additional props to use for the controller
• body - The body object to pass to the controller.

Examples:

1// Go back to previous controller in route stack
2NavigationHelper.pop();
3
4// Navigate By URI
5NavigationHelper.push('/myscreen/123');
6
7// URI with Non Default Animation
8NavigationHelper.push({ 
9	name: '/myscreen/123',
10	animation: Navigator.SceneConfigs.FadeAndroid,
11	props: {
12		isRed: true
13	},
14	body: {
15		id: 'my_id'
16	}
17});
18
19// Navigate By Name
20NavigationHelper.push('page1');
21NavigationHelper.push({ name: 'page1'});

Reading Navigation Query/Body

Important To receive body and query you must query them from componentDidMount

You can receive URI parameters via this.state.query and the body object via this.state.body.

Credits

This Navigation component is heavily inspired on react-native-route-navigator.