├── .jshintrc ├── README.md ├── docs └── transistions.md ├── example ├── app.js ├── handler.js └── some-component.js ├── index.js └── package.json /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "esnext": true, 3 | "globals": { 4 | "__dirname": true, 5 | "require": true, 6 | "module": true, 7 | "exports": true, 8 | "console": true, 9 | "describe": true, 10 | "it": true 11 | }, 12 | "strict": false, 13 | "globalstrict": true, 14 | "quotmark": "single", 15 | "smarttabs": true, 16 | "trailing": true 17 | } 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-routes # 2 | 3 | The simplest react native router yet. 4 | 5 | `npm install react-native-routes --save` 6 | 7 | ### Requiring ### 8 | ```javascript 9 | let Router = require('react-native-routes'); 10 | ``` 11 | 12 | ### API ### 13 | 14 | ```js 15 | class Application extends Component { 16 | render() { 17 | return ( 18 | 21 | ); 22 | } 23 | } 24 | ``` 25 | 26 | #### `this.props.goForward(Route Object)` #### 27 | 28 | Call directly on a **Route Object**. 29 | 30 | ```js 31 | let SomeComponent = require('./some-component'); 32 | var SomeRoute = { 33 | name: 'SomeComponent', 34 | component: SomeComponent, 35 | configureScene() { 36 | return Navigator.SceneConfigs.FloatFromRight; 37 | } 38 | }; 39 | // ... Inside your Application somewhere ... 40 | this.props.goForward(SomeRoute); 41 | // ... 42 | ``` 43 | 44 | Call on a registered **Route Object**, used for lazy loading opportunities. See the **example** folder. 45 | 46 | ```js 47 | let { SomeRoute } = require('./handler'); 48 | 49 | // ... Inside your Application somewhere ... 50 | this.props.goForward(SomeRoute()); 51 | // ... 52 | ``` 53 | 54 | #### `this.props.goBackwards()` #### 55 | Pop the next from the route stack and render. 56 | 57 | ### Route Objects ### 58 | 59 | | Property | Type | Description | 60 | | -------- | ---- | ----------- | 61 | | name (\*) | String | Name of the route, i.e. 'SomeComponent'. | 62 | | component (\*) | Component | **Component** to be rendered when the Router renders the new route. | 63 | | configureScene | Function | Return the scene configuration for the route. | 64 | 65 | (\*) **Required** property 66 | 67 | You can attach a **configureScene** function to your route to replace animations and customize them. Do something like this: 68 | 69 | ```js 70 | { 71 | name: 'SomeComponent', 72 | component: SomeComponent, 73 | configureScene: function() { 74 | return Navigator.SceneConfigs.FloatFromRight; 75 | } 76 | } 77 | ``` 78 | 79 | 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** 80 | 81 | ### Navigator.SceneConfigs ### 82 | + **PushFromRight** 83 | + **FloatFromRight** 84 | + **FloatFromLeft** 85 | + **FloatFromBottom** 86 | + **FloatFromBottomAndroid** 87 | + **FadeAndroid** 88 | + **HorizontalSwipeJump** 89 | -------------------------------------------------------------------------------- /docs/transistions.md: -------------------------------------------------------------------------------- 1 | ``` 2 | { 3 | SceneConfigs:{ 4 | PushFromRight:{ 5 | gestures:{ 6 | pop:{ 7 | isDetachable:false, 8 | gestureDetectMovement:2, 9 | notMoving:0.3, 10 | directionRatio:0.66, 11 | snapVelocity:2, 12 | edgeHitWidth:30, 13 | stillCompletionRatio:0.6, 14 | fullDistance:375, 15 | direction:'left-to-right' 16 | } 17 | }, 18 | springFriction:26, 19 | springTension:200, 20 | defaultTransitionVelocity:1.5, 21 | animationInterpolators:{ 22 | into:[ 23 | Function 24 | ], 25 | out:[ 26 | Function 27 | ] 28 | } 29 | }, 30 | FloatFromRight:{ 31 | gestures:{ 32 | pop:{ 33 | isDetachable:false, 34 | gestureDetectMovement:2, 35 | notMoving:0.3, 36 | directionRatio:0.66, 37 | snapVelocity:2, 38 | edgeHitWidth:30, 39 | stillCompletionRatio:0.6, 40 | fullDistance:375, 41 | direction:'left-to-right' 42 | } 43 | }, 44 | springFriction:26, 45 | springTension:200, 46 | defaultTransitionVelocity:1.5, 47 | animationInterpolators:{ 48 | into:[ 49 | Function 50 | ], 51 | out:[ 52 | Function 53 | ] 54 | } 55 | }, 56 | FloatFromLeft:{ 57 | gestures:{ 58 | pop:{ 59 | isDetachable:false, 60 | gestureDetectMovement:2, 61 | notMoving:0.3, 62 | directionRatio:0.66, 63 | snapVelocity:2, 64 | edgeHitWidth:30, 65 | stillCompletionRatio:0.6, 66 | fullDistance:375, 67 | direction:'left-to-right' 68 | } 69 | }, 70 | springFriction:26, 71 | springTension:200, 72 | defaultTransitionVelocity:1.5, 73 | animationInterpolators:{ 74 | into:[ 75 | Function 76 | ], 77 | out:[ 78 | Function 79 | ] 80 | } 81 | }, 82 | FloatFromBottom:{ 83 | gestures:{ 84 | pop:{ 85 | isDetachable:false, 86 | gestureDetectMovement:2, 87 | notMoving:0.3, 88 | directionRatio:0.66, 89 | snapVelocity:2, 90 | edgeHitWidth:150, 91 | stillCompletionRatio:0.6, 92 | fullDistance:667, 93 | direction:'top-to-bottom' 94 | } 95 | }, 96 | springFriction:26, 97 | springTension:200, 98 | defaultTransitionVelocity:1.5, 99 | animationInterpolators:{ 100 | into:[ 101 | Function 102 | ], 103 | out:[ 104 | Function 105 | ] 106 | } 107 | }, 108 | FloatFromBottomAndroid:{ 109 | gestures:null, 110 | springFriction:20, 111 | springTension:200, 112 | defaultTransitionVelocity:3, 113 | animationInterpolators:{ 114 | into:[ 115 | Function 116 | ], 117 | out:[ 118 | Function 119 | ] 120 | } 121 | }, 122 | FadeAndroid:{ 123 | gestures:null, 124 | springFriction:26, 125 | springTension:200, 126 | defaultTransitionVelocity:1.5, 127 | animationInterpolators:{ 128 | into:[ 129 | Function 130 | ], 131 | out:[ 132 | Function 133 | ] 134 | } 135 | }, 136 | HorizontalSwipeJump:{ 137 | gestures:{ 138 | jumpBack:{ 139 | isDetachable:true, 140 | gestureDetectMovement:2, 141 | notMoving:0.3, 142 | directionRatio:0.66, 143 | snapVelocity:2, 144 | edgeHitWidth:null, 145 | stillCompletionRatio:0.6, 146 | fullDistance:375, 147 | direction:'left-to-right', 148 | overswipe:{ 149 | frictionConstant:1, 150 | frictionByDistance:1.5 151 | } 152 | }, 153 | jumpForward:{ 154 | isDetachable:true, 155 | gestureDetectMovement:2, 156 | notMoving:0.3, 157 | directionRatio:0.66, 158 | snapVelocity:2, 159 | edgeHitWidth:null, 160 | stillCompletionRatio:0.6, 161 | fullDistance:375, 162 | direction:'right-to-left', 163 | overswipe:{ 164 | frictionConstant:1, 165 | frictionByDistance:1.5 166 | } 167 | } 168 | }, 169 | springFriction:26, 170 | springTension:200, 171 | defaultTransitionVelocity:1.5, 172 | animationInterpolators:{ 173 | into:[ 174 | Function 175 | ], 176 | out:[ 177 | Function 178 | ] 179 | } 180 | } 181 | }, 182 | getDefaultProps:{ 183 | [ 184 | Function 185 | ] isReactClassApproved:{ 186 | 187 | } 188 | }, 189 | defaultProps:{ 190 | configureScene:[ 191 | Function 192 | ], 193 | sceneStyle:13 194 | } 195 | } 196 | ``` -------------------------------------------------------------------------------- /example/app.js: -------------------------------------------------------------------------------- 1 | let { Component } = require('react-native'); 2 | let Router = require('react-native-routes'); 3 | let { SomeRoute } = require('./handler'); 4 | 5 | class Application extends Component { 6 | render() { 7 | return ( 8 | 11 | ); 12 | } 13 | } 14 | 15 | module.exports = Application; 16 | -------------------------------------------------------------------------------- /example/handler.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | let { Navigator } = require('react-native'); 3 | 4 | module.exports = { 5 | SomeRoute() { 6 | let SomeComponent = require('./some-component'); 7 | return { 8 | name: 'Component', 9 | component: SomeComponent, 10 | configureScene() { 11 | return Navigator.SceneConfigs.FloatFromRight; 12 | } 13 | }; 14 | } 15 | }; 16 | -------------------------------------------------------------------------------- /example/some-component.js: -------------------------------------------------------------------------------- 1 | let { Component, View, Text } = require('react-native'); 2 | 3 | class SomeComponent extends Component { 4 | render() { 5 | return ( 6 | 7 | { `Hello from the ${this.props.name} route.` } 8 | 9 | ); 10 | } 11 | } 12 | 13 | module.exports = SomeComponent; 14 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var React = require('react-native'); 3 | var { Navigator, View } = React; 4 | 5 | var Router = React.createClass({ 6 | getInitialState() { 7 | return { 8 | route: { 9 | name: null, 10 | index: 0 11 | } 12 | }; 13 | }, 14 | _handleBack(route,navigator) { 15 | if (this.state.route.index > 0) { 16 | if (route.configureScene) { 17 | this.setState({ sceneConfig: route.configureScene() }); 18 | } 19 | navigator.pop(); 20 | } 21 | }, 22 | _handleForward(route, navigator) { 23 | route.index = this.state.route.index + 1; 24 | this.state.route.index = route.index; 25 | this.state.route.index = this.state.route.index + 1; 26 | if (route.configureScene) { 27 | this.setState({ sceneConfig: route.configureScene() }); 28 | } 29 | navigator.push(route); 30 | }, 31 | renderScene(route, navigator) { 32 | var Yield = route.component; 33 | var goBackwards = function() { 34 | this._handleBack(route, navigator); 35 | }.bind(this); 36 | var goForward = function(route) { 37 | this._handleForward(route, navigator); 38 | }.bind(this); 39 | var goToFirstRoute = function() { 40 | navigator.popToTop(); 41 | }; 42 | return ( 43 | { 46 | return true; 47 | }}> 48 | 54 | 55 | ); 56 | }, 57 | render() { 58 | return ( 59 | { 63 | var scene = this.state.sceneConfig; 64 | scene.gestures = null; 65 | return scene; 66 | }}/> 67 | ); 68 | } 69 | }); 70 | 71 | module.exports = Router; 72 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-routes", 3 | "version": "1.0.3", 4 | "description": "A react native router with awesome transitions.", 5 | "main": "index.js", 6 | "author": "Sam Wenke", 7 | "license": "MIT", 8 | "peerDependencies": { 9 | "react-native": "^0.7.1" 10 | } 11 | } 12 | --------------------------------------------------------------------------------