Skip to content

Commit 8c69705

Browse files
mjacksonmjackson
committed
Fix up some react-router-native docs and examples
1 parent bff4af5 commit 8c69705

13 files changed

+773
-710
lines changed

‎packages/react-router-native/README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@ Then `import` or `require` as you would anything else:
1212

1313
```js
1414
// using ES6 modules
15-
import { NativeRouter, Route, Link } from 'react-router-native'
15+
import { NativeRouter, Route, Link } from "react-router-native";
1616

1717
// using CommonJS modules
18-
var NativeRouter = require('react-router-native').NativeRouter
19-
var Route = require('react-router-native').Route
20-
var Link = require('react-router-native').Link
18+
var NativeRouter = require("react-router-native").NativeRouter;
19+
var Route = require("react-router-native").Route;
20+
var Link = require("react-router-native").Link;
2121
```
2222

2323
## Issues

‎packages/react-router-native/examples/Ambiguous.js

Lines changed: 50 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,40 @@
1-
import React from 'react'
2-
import { StyleSheet, Text, AppRegistry, View } from 'react-native'
3-
import { NativeRouter, Route, Link, Switch } from 'react-router-native'
4-
5-
const About = () => <Text style={styles.header}>About</Text>
6-
const Company = () => <Text style={styles.header}>Company</Text>
7-
const User = ({ match }) => (
8-
<Text style={styles.header}>User: {match.params.user}</Text>
9-
)
10-
11-
const AmbiguousExample = () => (
12-
<NativeRouter>
13-
<View style={styles.container}>
14-
<View>
15-
<Link to="/about" underlayColor='#f0f4f7'>
16-
<Text>About Us (static)</Text>
17-
</Link>
18-
<Link to="/company" underlayColor='#f0f4f7'>
19-
<Text>Company (static)</Text>
20-
</Link>
21-
<Link to="/kim" underlayColor='#f0f4f7'>
22-
<Text>Kim (dynamic)</Text>
23-
</Link>
24-
<Link to="/chris" underlayColor='#f0f4f7'>
25-
<Text>Chris (dynamic)</Text>
26-
</Link>
27-
</View>
1+
import React from "react";
2+
import { StyleSheet, Text, AppRegistry, View } from "react-native";
3+
4+
import { NativeRouter, Route, Link, Switch } from "react-router-native";
5+
6+
function About() {
7+
return <Text style={styles.header}>About</Text>;
8+
}
9+
10+
function Company() {
11+
return <Text style={styles.header}>Company</Text>;
12+
}
2813

29-
{/*
14+
function User({ match }) {
15+
return <Text style={styles.header}>User: {match.params.user}</Text>;
16+
}
17+
18+
function AmbiguousExample() {
19+
return (
20+
<NativeRouter>
21+
<View style={styles.container}>
22+
<View>
23+
<Link to="/about" underlayColor="#f0f4f7">
24+
<Text>About Us (static)</Text>
25+
</Link>
26+
<Link to="/company" underlayColor="#f0f4f7">
27+
<Text>Company (static)</Text>
28+
</Link>
29+
<Link to="/kim" underlayColor="#f0f4f7">
30+
<Text>Kim (dynamic)</Text>
31+
</Link>
32+
<Link to="/chris" underlayColor="#f0f4f7">
33+
<Text>Chris (dynamic)</Text>
34+
</Link>
35+
</View>
36+
37+
{/*
3038
Sometimes you want to have a whitelist of static paths
3139
like "/about" and "/company" but also allow for dynamic
3240
patterns like "/:user". The problem is that "/about"
@@ -39,23 +47,24 @@ const AmbiguousExample = () => (
3947
"/about" to "/:user", just wrap your <Route>s in a
4048
<Switch>. It will render the first one that matches.
4149
*/}
42-
<Switch>
43-
<Route path="/about" component={About}/>
44-
<Route path="/company" component={Company}/>
45-
<Route path="/:user" component={User}/>
46-
</Switch>
47-
</View>
48-
</NativeRouter>
49-
)
50+
<Switch>
51+
<Route path="/about" component={About} />
52+
<Route path="/company" component={Company} />
53+
<Route path="/:user" component={User} />
54+
</Switch>
55+
</View>
56+
</NativeRouter>
57+
);
58+
}
5059

5160
const styles = StyleSheet.create({
5261
container: {
5362
marginTop: 25,
54-
padding: 10,
63+
padding: 10
5564
},
5665
header: {
57-
fontSize: 20,
58-
},
59-
})
66+
fontSize: 20
67+
}
68+
});
6069

61-
export default AmbiguousExample
70+
export default AmbiguousExample;

‎packages/react-router-native/examples/Auth.js

Lines changed: 102 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,160 @@
1-
import React, { Component } from 'react'
1+
import React, { Component } from "react";
22
import {
33
StyleSheet,
44
Text,
55
View,
66
AppRegistry,
77
TouchableHighlight
8-
} from 'react-native'
9-
10-
import { NativeRouter, Route, Link, Redirect, withRouter } from 'react-router-native'
11-
12-
const AuthExample = () => (
13-
<NativeRouter>
14-
<View style={styles.container}>
15-
<AuthButton/>
16-
<View style={styles.nav}>
17-
<Link
18-
to="/public"
19-
style={styles.navItem}
20-
underlayColor='#f0f4f7'>
8+
} from "react-native";
9+
10+
import {
11+
NativeRouter,
12+
Route,
13+
Link,
14+
Redirect,
15+
withRouter
16+
} from "react-router-native";
17+
18+
function AuthExample() {
19+
return (
20+
<NativeRouter>
21+
<View style={styles.container}>
22+
<AuthButton />
23+
<View style={styles.nav}>
24+
<Link to="/public" style={styles.navItem} underlayColor="#f0f4f7">
2125
<Text>Public Page</Text>
22-
</Link>
23-
<Link
24-
to="/protected"
25-
style={styles.navItem}
26-
underlayColor='#f0f4f7'>
26+
</Link>
27+
<Link to="/protected" style={styles.navItem} underlayColor="#f0f4f7">
2728
<Text>Protected Page</Text>
28-
</Link>
29-
</View>
29+
</Link>
30+
</View>
3031

31-
<Route path="/public" component={Public}/>
32-
<Route path="/login" component={Login}/>
33-
<PrivateRoute path="/protected" component={Protected}/>
34-
</View>
35-
</NativeRouter>
36-
)
32+
<Route path="/public" component={Public} />
33+
<Route path="/login" component={Login} />
34+
<PrivateRoute path="/protected" component={Protected} />
35+
</View>
36+
</NativeRouter>
37+
);
38+
}
3739

3840
const fakeAuth = {
3941
isAuthenticated: false,
4042
authenticate(cb) {
41-
this.isAuthenticated = true
42-
setTimeout(cb, 100) // fake async
43+
this.isAuthenticated = true;
44+
setTimeout(cb, 100); // fake async
4345
},
4446
signout(cb) {
45-
this.isAuthenticated = false
46-
setTimeout(cb, 100)
47+
this.isAuthenticated = false;
48+
setTimeout(cb, 100);
4749
}
48-
}
50+
};
4951

50-
const AuthButton = withRouter(({ history }) => (
51-
fakeAuth.isAuthenticated ? (
52-
<View>
53-
<Text>Welcome!</Text>
54-
<TouchableHighlight style={styles.btn} underlayColor='#f0f4f7' onPress={() => {
55-
fakeAuth.signout(() => history.push('/'))
56-
}}><Text>Sign out</Text></TouchableHighlight>
57-
</View>
58-
) : (
59-
<Text>You are not logged in.</Text>
60-
)
61-
))
62-
63-
const PrivateRoute = ({ component: Component, ...rest }) => (
64-
<Route {...rest} render={props => (
52+
const AuthButton = withRouter(
53+
({ history }) =>
6554
fakeAuth.isAuthenticated ? (
66-
<Component {...props}/>
55+
<View>
56+
<Text>Welcome!</Text>
57+
<TouchableHighlight
58+
style={styles.btn}
59+
underlayColor="#f0f4f7"
60+
onPress={() => {
61+
fakeAuth.signout(() => history.push("/"));
62+
}}
63+
>
64+
<Text>Sign out</Text>
65+
</TouchableHighlight>
66+
</View>
6767
) : (
68-
<Redirect to={{
69-
pathname: '/login',
70-
state: { from: props.location }
71-
}}/>
68+
<Text>You are not logged in.</Text>
7269
)
73-
)}/>
74-
)
70+
);
7571

76-
const Public = () => <Text style={styles.header}>Public</Text>
77-
const Protected = () => <Text style={styles.header}>Protected</Text>
72+
function PrivateRoute({ component: Component, ...rest }) {
73+
return (
74+
<Route
75+
{...rest}
76+
render={props =>
77+
fakeAuth.isAuthenticated ? (
78+
<Component {...props} />
79+
) : (
80+
<Redirect
81+
to={{
82+
pathname: "/login",
83+
state: { from: props.location }
84+
}}
85+
/>
86+
)
87+
}
88+
/>
89+
);
90+
}
91+
92+
function Public() {
93+
return <Text style={styles.header}>Public</Text>;
94+
}
95+
96+
function Protected() {
97+
return <Text style={styles.header}>Protected</Text>;
98+
}
7899

79100
class Login extends Component {
80-
state = {
81-
redirectToReferrer: false
82-
}
101+
state = { redirectToReferrer: false };
83102

84103
login = () => {
85104
fakeAuth.authenticate(() => {
86-
this.setState({ redirectToReferrer: true })
87-
})
88-
}
105+
this.setState({ redirectToReferrer: true });
106+
});
107+
};
89108

90109
render() {
91-
const { from } = this.props.location.state || { from: { pathname: '/' } }
92-
const { redirectToReferrer } = this.state
110+
const { from } = this.props.location.state || { from: { pathname: "/" } };
111+
const { redirectToReferrer } = this.state;
93112

94113
if (redirectToReferrer) {
95-
return (
96-
<Redirect to={from}/>
97-
)
114+
return <Redirect to={from} />;
98115
}
99116

100117
return (
101118
<View>
102119
<Text>You must log in to view the page at {from.pathname}</Text>
103120

104-
<TouchableHighlight style={styles.btn} underlayColor='#f0f4f7' onPress={this.login}>
121+
<TouchableHighlight
122+
style={styles.btn}
123+
underlayColor="#f0f4f7"
124+
onPress={this.login}
125+
>
105126
<Text>Log in</Text>
106127
</TouchableHighlight>
107128
</View>
108-
)
129+
);
109130
}
110131
}
111132

112133
const styles = StyleSheet.create({
113134
container: {
114135
marginTop: 25,
115-
padding: 10,
136+
padding: 10
116137
},
117138
header: {
118-
fontSize: 20,
139+
fontSize: 20
119140
},
120141
nav: {
121-
flexDirection: 'row',
122-
justifyContent: 'space-around'
142+
flexDirection: "row",
143+
justifyContent: "space-around"
123144
},
124145
navItem: {
125146
flex: 1,
126-
alignItems: 'center',
127-
padding: 10,
147+
alignItems: "center",
148+
padding: 10
128149
},
129150
btn: {
130151
width: 200,
131-
backgroundColor: '#E94949',
132-
justifyContent: 'center',
133-
alignItems: 'center',
152+
backgroundColor: "#E94949",
153+
justifyContent: "center",
154+
alignItems: "center",
134155
padding: 10,
135-
marginTop: 10,
156+
marginTop: 10
136157
}
137-
})
158+
});
138159

139-
export default AuthExample
160+
export default AuthExample;

0 commit comments

Comments
 (0)