Skip to content

Commit a2a0035

Browse files
davidLeonardidavidLeonardi
committed
Merge pull request #104 from charpeni/examples/Explorer
Add examples folder with Explorer features
2 parents 5f0f80f + e7703eb commit a2a0035

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+2312
-3
lines changed

‎README.md

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -194,17 +194,28 @@ As of v0.8.0 the `leftCorner`, `rightCorner` and `titleComponent` have access to
194194
- `resetToRoute(route)`
195195
- `goToFirstRoute()`
196196

197-
198-
A more advanced example: Twitter app
197+
Examples
199198
------------------------------------
200199

200+
### Explorer app
201+
202+
To see available features in action, you can check out the Explorer app.
203+
204+
Clone this repo or go inside `node_modules/react-native-simple-router` folder and install dependencies, after that you will able to launch this as an standalone react-native application.
205+
```
206+
cd examples/Explorer
207+
npm install
208+
```
209+
210+
### Twitter app
211+
201212
To see more of the router in action, you can check out the Twitter example app that comes with the package.
202213

203214
Test the app by requiring the TwitterApp component:
204215

205216
```javascript
206217
import React, { AppRegistry } from 'react-native';
207-
import TwitterApp from './node_modules/react-native-simple-router/twitter-example';
218+
import TwitterApp from './node_modules/react-native-simple-router/examples/twitter-example';
208219

209220
AppRegistry.registerComponent('routerTest', () => TwitterApp);
210221
```

‎examples/Explorer/.flowconfig

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
[ignore]
2+
3+
# We fork some components by platform.
4+
.*/*.web.js
5+
.*/*.android.js
6+
7+
# Some modules have their own node_modules with overlap
8+
.*/node_modules/node-haste/.*
9+
10+
# Ugh
11+
.*/node_modules/babel.*
12+
.*/node_modules/babylon.*
13+
.*/node_modules/invariant.*
14+
15+
# Ignore react and fbjs where there are overlaps, but don't ignore
16+
# anything that react-native relies on
17+
.*/node_modules/fbjs/lib/Map.js
18+
.*/node_modules/fbjs/lib/Promise.js
19+
.*/node_modules/fbjs/lib/fetch.js
20+
.*/node_modules/fbjs/lib/ExecutionEnvironment.js
21+
.*/node_modules/fbjs/lib/isEmpty.js
22+
.*/node_modules/fbjs/lib/crc32.js
23+
.*/node_modules/fbjs/lib/ErrorUtils.js
24+
25+
# Flow has a built-in definition for the 'react' module which we prefer to use
26+
# over the currently-untyped source
27+
.*/node_modules/react/react.js
28+
.*/node_modules/react/lib/React.js
29+
.*/node_modules/react/lib/ReactDOM.js
30+
31+
# Ignore commoner tests
32+
.*/node_modules/commoner/test/.*
33+
34+
# See https://github.com/facebook/flow/issues/442
35+
.*/react-tools/node_modules/commoner/lib/reader.js
36+
37+
# Ignore jest
38+
.*/node_modules/jest-cli/.*
39+
40+
# Ignore Website
41+
.*/website/.*
42+
43+
[include]
44+
45+
[libs]
46+
node_modules/react-native/Libraries/react-native/react-native-interface.js
47+
48+
[options]
49+
module.system=haste
50+
51+
munge_underscores=true
52+
53+
module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
54+
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\)$' -> 'RelativeImageStub'
55+
56+
suppress_type=$FlowIssue
57+
suppress_type=$FlowFixMe
58+
suppress_type=$FixMe
59+
60+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
61+
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
62+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
63+
64+
[version]
65+
0.21.0

‎examples/Explorer/.gitignore

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
project.xcworkspace
24+
25+
# Android/IJ
26+
#
27+
.idea
28+
.gradle
29+
local.properties
30+
31+
# node.js
32+
#
33+
node_modules/
34+
npm-debug.log

‎examples/Explorer/.watchmanconfig

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎examples/Explorer/Page.js

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
import React, {
2+
StyleSheet,
3+
Text,
4+
View,
5+
ListView,
6+
TouchableHighlight,
7+
} from 'react-native';
8+
9+
import LeftCorner from './components/LeftCorner';
10+
import RightCorner from './components/RightCorner';
11+
12+
const styles = StyleSheet.create({
13+
container: {
14+
flex: 1,
15+
},
16+
row: {
17+
flex: 1,
18+
flexDirection: 'row',
19+
justifyContent: 'center',
20+
alignItems: 'center',
21+
backgroundColor: '#F6F6F6',
22+
padding: 20,
23+
},
24+
separator: {
25+
height: 1,
26+
backgroundColor: '#CCCCCC',
27+
},
28+
});
29+
30+
export default class Page extends React.Component {
31+
constructor(props) {
32+
super(props);
33+
34+
const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
35+
36+
const features = [
37+
{
38+
method: 'toRoute',
39+
route: {
40+
component: Page,
41+
name: 'toRoute()',
42+
},
43+
},
44+
{
45+
method: 'replaceRoute',
46+
route: {
47+
component: Page,
48+
name: 'replaceRoute()',
49+
},
50+
},
51+
{
52+
method: 'resetToRoute',
53+
route: {
54+
component: Page,
55+
name: 'resetToRoute()',
56+
},
57+
},
58+
{
59+
method: 'toRoute',
60+
route: {
61+
component: Page,
62+
name: 'Random headerStyle',
63+
headerStyle: {
64+
backgroundColor: `#${Math.floor(Math.random() * 16777215).toString(16)}`,
65+
},
66+
},
67+
},
68+
{
69+
method: 'toRoute',
70+
route: {
71+
component: Page,
72+
name: '(Android) Random StatusBar color',
73+
statusBarProps: {
74+
animated: true,
75+
backgroundColor: `#${Math.floor(Math.random() * 16777215).toString(16)}`,
76+
},
77+
},
78+
},
79+
{
80+
method: 'toRoute',
81+
route: {
82+
component: Page,
83+
name: 'Hide StatusBar',
84+
statusBarProps: {
85+
animated: true,
86+
hidden: true,
87+
},
88+
},
89+
},
90+
{
91+
method: 'toRoute',
92+
route: {
93+
component: Page,
94+
name: 'Hide NavBar',
95+
hideNavigationBar: true,
96+
},
97+
},
98+
{
99+
method: 'toRoute',
100+
route: {
101+
component: Page,
102+
name: 'Hide NavBar & StatusBar',
103+
hideNavigationBar: true,
104+
statusBarProps: {
105+
animated: true,
106+
hidden: true,
107+
},
108+
},
109+
},
110+
{
111+
method: 'toRoute',
112+
route: {
113+
component: Page,
114+
name: 'Custom Components \n Left and right corners',
115+
leftCorner: LeftCorner,
116+
rightCorner: RightCorner,
117+
},
118+
},
119+
];
120+
121+
this.state = {
122+
dataSource: ds.cloneWithRows(features),
123+
};
124+
125+
this.selectedRow = {};
126+
features.forEach((feature) => {
127+
this.selectedRow[feature.route.name] = this.onPressRow.bind(this, feature);
128+
});
129+
130+
this.renderRow = this.renderRow.bind(this);
131+
}
132+
133+
onPressRow(feature) {
134+
this.props[feature.method](feature.route);
135+
}
136+
137+
renderRow(rowData) {
138+
return (
139+
<TouchableHighlight onPress={this.selectedRow[rowData.route.name]}>
140+
<View>
141+
<View style={styles.row}>
142+
<Text>{rowData.route.name}</Text>
143+
</View>
144+
<View style={styles.separator} />
145+
</View>
146+
</TouchableHighlight>
147+
);
148+
}
149+
150+
render() {
151+
return (
152+
<View style={styles.container}>
153+
<ListView
154+
dataSource={this.state.dataSource}
155+
renderRow={this.renderRow}
156+
/>
157+
</View>
158+
);
159+
}
160+
}

0 commit comments

Comments
 (0)