Created
September 12, 2016 21:49
-
-
Save jmurzy/f3f46e7b1807e1954321eb2ce2e83402 to your computer and use it in GitHub Desktop.
React Router Native example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { Header, Link, nativeHistory, Route, Router, StackRoute, withRouter } from 'react-router-native'; | |
import { 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> | |
); | |
export default routes; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment