rn-router
React Native routing system based on react router
Change Log:
-
2.5.7 : Small fix to render scene inspired by @zaynyatyi.
-
2.5.6 : Fix edge case with
transitionBack
. -
2.5.4 : Fix issue passing
routeProps
toIndexRoute
. -
2.5.3 : Fix issue passing
routeProps
. -
2.5.2 : Fix issue with
transitionBack
. -
2.5.1 : Fix for route with no component.
-
2.5.0 : Allow to pass props from router in routeProps params.
-
2.4.2 : Small code improvements.
-
2.4.0 : Improvements to how rendering is done.
-
2.3.0 : Add
routeWillFocus
androuteDidFocus
events that can be listened for.
How to use:
Install
npm i --save rn-router
Example - Setup
Routes.js
'use strict'; var React = ;var ReactRouter = ; var Home = ;var Login = ; var Router IndexRoute Route Transitions = ReactRouter; var Routes = React; moduleexports = Routes;
index.ios.js
'use strict'; var React = ;var AppRegistry = React; var Routes = ; var App = React; AppRegistry;
index.android.js
'use strict'; var React = ;var AppRegistry = React; var Routes = ; var App = React; AppRegistry;
Example - Usage ( Sub Routes )
... <Router ...thisprops> <IndexRoute name="home" component=Home /> <Route name="settings" component=SettingsLayout> <IndexRoute name="base" component=BaseSettings /> <Route name="advanced" component=AdvancedSettings /> </Route> <Route name="users"> <IndexRoute name="listing" component=UsersListing /> <Route name="profile" component=UsersProfile /> </Route> </Router> ... thiscontext; // goes to 'settings/base'thiscontext;thiscontext; thiscontext;
Example - Usage ( Url Params )
... <Router ...thisprops> <Route name="users"> <IndexRoute name="listing" component=UsersListing /> <Route name=":userId" component=UsersProfile /> </Route> </Router> ... thiscontext; // UsersProfile thispropsuserId
Example - Usage ( Link )
var ReactRouter = ;var Link Transitions = ReactRouter; ... { return <View> <Link to='home'><Text>Home</Text></Link> <Link to='login'><Text>Login</Text></Link> <Link to='users/listing' props= page: 2 > <Text>Listing Page 2</Text> </Link> <Link toBack=true><Text>Back</Text></Link> <Link to='login' transition=TransitionsFloatFromLeft><Text>Login</Text></Link> // Default transition is None <Link to='home' transition=TransitionsFloatFromBottom><Text>Home</Text></Link> <Link to='home' style=styleslinkButton><Text>Home</Text></Link> <Link to='home' activeLinkStyle=styleshighlight><Text>Home</Text></Link> // Default active style is opacity: 0.5 <Link to='home' props= id: 1 linkStyle=styleslinkText activeLinkStyle=styleshighlight> <Text>Home</Text> </Link> </View> ;}
Context Types
- platform : the given platform value to Router or 'undefined'
- route : the route object ( name, component, props, sceneConfig )
- transitionTo : transition function params (name, props(optional), transitionFunction(optional))
- transitionBack : transition to last route
- events : event listener for
routeWillFocus
androuteDidFocus
events
Example - Usage ( events )
var ReactRouter = ; ... contextTypes: events: ReactPropTypesobject ... thiscontextevents; thiscontextevents;
Example - Usage ( transitionTo / transitionBack )
var ReactRouter = ;var Transitions = ReactRouter; ... contextTypes: transitionTo: ReactPropTypesfunc transitionBack: ReactPropTypesfunc ... { return <View> <TouchableOpacity onPress= { thiscontext}> <Text> Back </Text> </TouchableOpacity> <TouchableOpacity onPress= { thiscontext}> <Text> Home </Text> </TouchableOpacity> </View> ;}
Example - Usage ( Transitions )
The available transitions are as follows
var ReactRouter = ;var Transitions = ReactRouter; TransitionsFloatFromRightTransitionsFloatFromLeftTransitionsFloatFromBottomTransitionsFloatFromBottomAndroidTransitionsFadeAndroidTransitionsHorizontalSwipeJumpTransitionsHorizontalSwipeJumpFromRightTransitionsVerticalUpSwipeJumpTransitionsVerticalDownSwipeJumpTransitionsNoneTransitionsFadeTransitions