❤
npm
Sign UpSign In

react-native-route-navigator

1.0.2 • Public • Published

react-native-route-navigator

react-native Navigator with URI driven navigation facilitating simple transfer of data between components using query, and body parameters.

Quick start

Install the module:

npm install --save react-native-route-navigator

Add it you your application:

var React = require('React');
var { RouteNavigator, Router } = require('react-native-route-navigator');
 
class DemoApp extends React.Component {
    render() {
        return <RouteNavigator initialRouteStack={['/page1/my-id-string']]}
                            			   router={this.router}
                                              app={this}/>
    }
    
    get router() {
        if ( !this._router ) {
        	this._router = new Router();
     		this.addRoutes(this._router);
    	}
        return this._router;
    }
    
    addRoutes(router) {
        // Add our routes here
    	router.addRoute( 'page1', '/page1/:id', Page1, {
      		defaultAnimation: Navigator.SceneConfigs.FadeAndroid,
    	});
    	router.addRoute( 'page2', '/page2/', Page2, {
      		defaultAnimation: Navigator.SceneConfigs.FadeAndroid,
          	props: {
          		name: 'joe',
        		didPressButton: () => alert('Action from my app!')
      		}
    	});
    }
}
 
React.AppRegistry.registerComponent('DemoApp',  () => DemoApp);

RouteNavigator

This extends reacts Navigator class.

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

Routes

  • name - The name of the route.
  • URI - The route-parser URI.
  • component - Unconstructed React component class to use for the page.
  • options
    • defaultAnimation - The default animation to use if none are specific.
    • props - The props to construct the component with.
    • useCache - States if the component should persist when unmounted.

How To Navigate

The RouteNavigator will construct mounted components with app and nav. app being the app prop passed to the route navigator, and nav being a reference to the Navigator component.

The nav object can be an object or a string.

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.

Example calls:

// Go back to previous controller in route stack
this.props.nav.pop();
 
// Navigate By URI
this.props.nav.push('/page1/123');
 
// URI with Non Default Animation
this.props.nav.push({ 
    name: '/page1/123',
    animation: Navigator.SceneConfigs.FadeAndroid,
    props: {
        isRed: true
    },
    body: {
        cakeIs: 'lie'
    }
});
 
// Navigate By Name
this.props.nav.push('page1');
this.props.nav.push({ name: 'page1'});

Reading Navigation Query/Body

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

Readme

Keywords

Package Sidebar

Install

npm i react-native-route-navigator

Repository

github.com/Andr3wHur5t/react-native-route-navigator

Homepage

github.com/Andr3wHur5t/react-native-route-navigator#readme

Weekly Downloads

3

Version

1.0.2

License

MIT

Last publish

Collaborators

  • andr3whur5t
Try on RunKit
Report malware