A routing library for React Native that strives for sensible API parity with react-router.
Please note that React Router v4 was just released. Over the next few weeks,
React Router Native will be refactored to make it fully compatible with v4.
React Router community decided that a reducer-based paradigm similar to that of NavigationExperimental is better suited to native navigation. Transition to a reducer-based paradigm is also being discussed for the web. On the other hand, NavigationExperimental has no intention to support a React Router-like interface and leaves the navigation state up to the developer to maintain.
A declarative API removes the need to write boilerplate code and speeds up development. React Router Native follows React's Learn Once, Write Anywhere principle by providing a superset of React Router's API that marries React Router to NavigationExperimental.
Note: This project contains components that are currently under active development and considered experimental—aka use in production at your own risk.
$ npm install --save react-router-native
$ yarn add react-router-native
/**
* index.[ios|android].js
*/
import React from 'react';
import {
Header,
Link,
nativeHistory,
Route,
Router,
StackRoute,
withRouter,
} from 'react-router-native';
import {
AppRegistry,
ScrollView,
StyleSheet,
View,
} from 'react-native';
const styles = StyleSheet.create({
component: {
backgroundColor: '#FFFFFF',
flex: 1,
},
home: {
backgroundColor: '#FFFFFF',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
},
detailCard: {
height: 100,
margin: 20,
width: 100,
},
});
const Master = (props) => (
<View style={styles.component}>
{props.children}
</View>
);
const HomeHeader = withRouter((props) => {
const handleRightButtonPress = () => {
props.router.push('/detail/gray');
};
return (
<Header
{...props}
style={{ backgroundColor: '#26BBE5' }}
title="Feed"
rightButtonText="Gray"
onRightButtonPress={handleRightButtonPress}
/>
);
});
const Home = () => {
const DetailCard = ({ backgroundColor }) => (
<Link to={`/detail/${encodeURIComponent(backgroundColor)}`} style={styles.detailCard}>
<View style={{ flex: 1, backgroundColor }} />
</Link>
);
return (
<ScrollView style={styles.component} contentContainerStyle={styles.home}>
<DetailCard backgroundColor="#EF4E5E" />
<DetailCard backgroundColor="#9498CA" />
<DetailCard backgroundColor="#AFCCB3" />
<DetailCard backgroundColor="#F0D73D" />
<DetailCard backgroundColor="#A176B0" />
<DetailCard backgroundColor="#416BB4" />
<DetailCard backgroundColor="#94B5DC" />
<DetailCard backgroundColor="#D48445" />
</ScrollView>
);
};
const DetailHeader = withRouter((props) => {
const { routeParams } = props;
const title = routeParams.themeColor;
const backgroundColor = routeParams.themeColor;
const colors = ['#EF4E5E', '#D48445', '#AFCCB3', '#F0D73D', '#A176B0'];
const handleRightButtonPress = () => {
const randomIndex = Math.floor(Math.random() * colors.length);
const randomColor = colors[randomIndex];
props.router.push(`/detail/${encodeURIComponent(randomColor)}`);
};
return (
<Header
{...props}
title={title}
style={{ backgroundColor }}
leftButtonText="Back"
rightButtonText="Random"
onRightButtonPress={handleRightButtonPress}
/>
);
});
const Detail = (props) => (
<View style={[styles.component, { backgroundColor: '#FFFFFF' }]}>{props.children}</View>
);
const routes = (
/* Address Bar can be toggled on or off by setting the addressBar prop */
<Router history={nativeHistory} addressBar>
<StackRoute path="master" component={Master}>
<Route path="/" component={Home} overlayComponent={HomeHeader} />
<Route path="/detail/:themeColor" component={Detail} overlayComponent={DetailHeader} />
</StackRoute>
</Router>
);
AppRegistry.registerComponent('YourApp', () => () => routes);
You can customize behavior of the default reducers that are used to create the navigationState
of <Route>
or its siblings.
This allows greater customizations on how <Link>
behaves for a particular route and is especially useful for nested <StackRoute>
's where default action doesn't always lead to the intended behavior, or <TabsRoute>
's where double-taps should reset the navigationState
of a nested <StackRoute>
.
const reducer = (
state: EnhancedNavigationState,
action: NavigationAction
): EnhancedNavigationState => ({
/* ... */
});
<TabsRoute path="/" component={Component} reducer={reducer}/>
The source includes a few examples that should help you get started. The example app from the GIF above can be found at examples/Aviato
. You can also view it with Exponent.
Route configuration for the example apps can be found in app/routes.js
. The address bar shown in the demo is used for development only and can be disabled by removing the addressBar
prop from the <Router>
component.
Documentation can be found here.
React Router Native is cross-platform. It supports all platforms that NavigationExperimental supports.
Want to hack on React Router Native? Awesome! We welcome contributions from anyone and everyone. Please see our guidelines for more information on workflow and setup.
Feel free to reach out to me on Twitter @jmurzy. If you have any questions, please submit an Issue with the "question" tag or come hang out in the React Router Reactiflux Channel and post your request there.
React Router Native is based on React Router. Thanks to Ryan Florence @ryanflorence, Michael Jackson @mjackson and all the contributors for their work on react-router and history.
Special thanks to Eric Vicenti @ericvicenti and Hedger Wang @hedgerwang for their work on NavigationExperimental.