🚊 A Tiny React Native Router
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
example
.jshintrc
README.md
index.js
package.json

README.md

react-native-routes

The simplest react native router yet.

npm install react-native-routes --save

Requiring

let Router = require('react-native-routes');

API

class Application extends Component {
    render() {
        return (
            <Router
              firstRoute={ SomeRoute }
            />
        );
    }
}

this.props.goForward(Route Object)

Call directly on a Route Object.

let SomeComponent = require('./some-component');
var SomeRoute = {
  name: 'SomeComponent',
  component: SomeComponent,
  configureScene() {
    return Navigator.SceneConfigs.FloatFromRight;
  }
};
// ... Inside your Application somewhere ...
  this.props.goForward(SomeRoute);
// ...

Call on a registered Route Object, used for lazy loading opportunities. See the example folder.

let { SomeRoute } = require('./handler');

// ... Inside your Application somewhere ...
  this.props.goForward(SomeRoute());
// ...

this.props.goBackwards()

Pop the next from the route stack and render.

Route Objects

Property Type Description
name (*) String Name of the route, i.e. 'SomeComponent'.
component (*) Component Component to be rendered when the Router renders the new route.
configureScene Function Return the scene configuration for the route.

(*) Required property

You can attach a configureScene function to your route to replace animations and customize them. Do something like this:

{
    name: 'SomeComponent',
    component: SomeComponent,
    configureScene: function() {
        return Navigator.SceneConfigs.FloatFromRight;
    }
}

Now, there is little-to-none documentation of this, but check out below on the different options you can choose for transitions and things you can do with them for customization. See the docs for transitions.md

Navigator.SceneConfigs

  • PushFromRight
  • FloatFromRight
  • FloatFromLeft
  • FloatFromBottom
  • FloatFromBottomAndroid
  • FadeAndroid
  • HorizontalSwipeJump