Skip to content

Commit 02148d5

Browse files
jmurzyjmurzy
committed
add simpler example
1 parent f351d31 commit 02148d5

Some content is hidden

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

43 files changed

+2259
-24
lines changed

‎README.md‎

Lines changed: 109 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -34,32 +34,119 @@ $ npm install --save react-router-native@v2.0.0-alpha.4 react-router@3.0.0-alpha
3434
* index.[ios|android].js
3535
*/
3636

37-
import React from 'react'
38-
import { AppRegistry } from 'react-native';
39-
import { Router, Route, TabsRoute, nativeHistory } from 'react-router-native';
40-
41-
const App = (props) => (/*...*/);
42-
const About = (props) => (/*...*/);
43-
const AboutHeader = (props) => (/*...*/);
44-
const Users = (props) => (/*...*/);
45-
const User = (props) => (/*...*/);
46-
const UserHeader = (props) => (/*...*/);
47-
const NoMatch = (props) => (/*...*/);
37+
import React from 'react';
38+
import {
39+
Header,
40+
Link,
41+
nativeHistory,
42+
Route,
43+
Router,
44+
StackRoute,
45+
withRouter,
46+
} from 'react-router-native';
47+
import {
48+
AppRegistry,
49+
ScrollView,
50+
StyleSheet,
51+
View,
52+
} from 'react-native';
53+
54+
const styles = StyleSheet.create({
55+
component: {
56+
backgroundColor: '#FFFFFF',
57+
flex: 1,
58+
},
59+
home: {
60+
backgroundColor: '#FFFFFF',
61+
flexDirection: 'row',
62+
flexWrap: 'wrap',
63+
justifyContent: 'center',
64+
},
65+
detailCard: {
66+
height: 100,
67+
margin: 20,
68+
width: 100,
69+
},
70+
});
71+
72+
const Master = (props) => (
73+
<View style={styles.component}>
74+
{props.children}
75+
</View>
76+
);
77+
78+
const HomeHeader = withRouter((props) => {
79+
const handleRightButtonPress = () => {
80+
props.router.push('/detail/gray');
81+
};
82+
83+
return (
84+
<Header
85+
{...props}
86+
style={{ backgroundColor: '#26BBE5' }}
87+
title="Feed"
88+
rightButtonText="Gray"
89+
onRightButtonPress={handleRightButtonPress}
90+
/>
91+
);
92+
});
93+
94+
const Home = () => {
95+
const DetailCard = ({ backgroundColor }) => (
96+
<Link to={`/detail/${encodeURIComponent(backgroundColor)}`} style={styles.detailCard}>
97+
<View style={{ flex: 1, backgroundColor }} />
98+
</Link>
99+
);
100+
101+
return (
102+
<ScrollView style={styles.component} contentContainerStyle={styles.home}>
103+
<DetailCard backgroundColor="#EF4E5E" />
104+
<DetailCard backgroundColor="#9498CA" />
105+
<DetailCard backgroundColor="#AFCCB3" />
106+
<DetailCard backgroundColor="#F0D73D" />
107+
<DetailCard backgroundColor="#A176B0" />
108+
<DetailCard backgroundColor="#416BB4" />
109+
<DetailCard backgroundColor="#94B5DC" />
110+
<DetailCard backgroundColor="#D48445" />
111+
</ScrollView>
112+
);
113+
};
114+
115+
const DetailHeader = withRouter((props) => {
116+
const { routeParams } = props;
117+
const title = routeParams.themeColor;
118+
const backgroundColor = routeParams.themeColor;
119+
const colors = ['#EF4E5E', '#D48445', '#AFCCB3', '#F0D73D', '#A176B0'];
120+
121+
const handleRightButtonPress = () => {
122+
const randomIndex = Math.floor(Math.random() * colors.length);
123+
const randomColor = colors[randomIndex];
124+
props.router.push(`/detail/${encodeURIComponent(randomColor)}`);
125+
};
126+
127+
return (
128+
<Header
129+
{...props}
130+
title={title}
131+
style={{ backgroundColor }}
132+
leftButtonText="Back"
133+
rightButtonText="Random"
134+
onRightButtonPress={handleRightButtonPress}
135+
/>
136+
);
137+
});
138+
139+
const Detail = (props) => (
140+
<View style={[styles.component, { backgroundColor: '#FFFFFF' }]}>{props.children}</View>
141+
);
48142

49143
const routes = (
50144
/* Address Bar can be toggled on or off by setting the addressBar prop */
51145
<Router history={nativeHistory} addressBar>
52-
<TabsRoute
53-
path="app"
54-
component={App}
55-
transition="horizontal-pager"
56-
>
57-
<Route path="/" component={About} overlayComponent={AboutHeader}/>
58-
<Route path="users" component={Users} overlayComponent={UserHeader}>
59-
<Route path="/user/:userId" component={User}/>
60-
</Route>
61-
</TabsRoute>
62-
<Route path="*" component={NoMatch}/>
146+
<StackRoute path="master" component={Master}>
147+
<Route path="/" component={Home} overlayComponent={HomeHeader} />
148+
<Route path="/detail/:themeColor" component={Detail} overlayComponent={DetailHeader} />
149+
</StackRoute>
63150
</Router>
64151
);
65152

‎docs/Examples.md‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,32 @@
11
## Examples
22

3+
Please note that the __address bar__ used in examples is for development only and can be disabled by removing the [`addressBar`](https://github.com/jmurzy/react-router-native/blob/b988ea696cca272296c424e7381df00944c9d062/examples/Aviato/app/routes.js#L23-L24) prop from the ``<Router>`` component.
4+
5+
### Simple
6+
7+
To build and run the Simple app:
8+
9+
```bash
10+
git clone https://github.com/jmurzy/react-router-native
11+
12+
cd react-router-native/examples/Simple
13+
npm install
14+
```
15+
16+
To deploy to iOS simulator:
17+
18+
```bash
19+
npm run ios
20+
```
21+
22+
—or—
23+
24+
To deploy to Android simulator:
25+
26+
```bash
27+
npm run android
28+
```
29+
330
### Aviato
431

532
To build and run the Aviato app:
@@ -24,4 +51,3 @@ To deploy to Android simulator:
2451
```bash
2552
npm run android
2653
```
27-
Please note that the __address bar__ is used for development only and can be disabled by removing the [`addressBar`](https://github.com/jmurzy/react-router-native/blob/b988ea696cca272296c424e7381df00944c9d062/examples/Aviato/app/routes.js#L23-L24) prop from the ``<Router>`` component.

‎examples/Simple/.buckconfig‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
[android]
3+
target = Google Inc.:Google APIs:23
4+
5+
[maven_repositories]
6+
central = https://repo1.maven.org/maven2

‎examples/Simple/.eslintrc‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"settings": {
3+
"import/resolver": {
4+
"node": {
5+
"extensions": [".ios.js", ".android.js", ".js"]
6+
}
7+
}
8+
},
9+
"rules": {
10+
"import/no-unresolved": "off",
11+
"import/prefer-default-export": "off",
12+
"react/no-multi-comp": "off",
13+
"react/prop-types": "off"
14+
}
15+
}

‎examples/Simple/.flowconfig‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
[ignore]
2+
3+
# We fork some components by platform.
4+
.*/*.android.js
5+
6+
# Ignore templates with `@flow` in header
7+
.*/local-cli/generator.*
8+
9+
# Ignore malformed json
10+
.*/node_modules/y18n/test/.*\.json
11+
12+
# Ignore the website subdir
13+
<PROJECT_ROOT>/website/.*
14+
15+
# Ignore BUCK generated dirs
16+
<PROJECT_ROOT>/\.buckd/
17+
18+
# Ignore unexpected extra @providesModule
19+
.*/node_modules/commoner/test/source/widget/share.js
20+
21+
# Ignore duplicate module providers
22+
# For RN Apps installed via npm, "Libraries" folder is inside node_modules/react-native but in the source repo it is in the root
23+
.*/Libraries/react-native/React.js
24+
.*/Libraries/react-native/ReactNative.js
25+
.*/node_modules/jest-runtime/build/__tests__/.*
26+
27+
[include]
28+
29+
[libs]
30+
node_modules/react-native/Libraries/react-native/react-native-interface.js
31+
node_modules/react-native/flow
32+
flow/
33+
34+
[options]
35+
module.system=haste
36+
37+
esproposal.class_static_fields=enable
38+
esproposal.class_instance_fields=enable
39+
40+
experimental.strict_type_args=true
41+
42+
munge_underscores=true
43+
44+
module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
45+
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\|pdf\)$' -> 'RelativeImageStub'
46+
47+
suppress_type=$FlowIssue
48+
suppress_type=$FlowFixMe
49+
suppress_type=$FixMe
50+
51+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(30\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
52+
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(30\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
53+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
54+
55+
unsafe.enable_getters_and_setters=true
56+
57+
[version]
58+
^0.30.0

‎examples/Simple/.gitignore‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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+
*.iml
28+
.idea
29+
.gradle
30+
local.properties
31+
32+
# node.js
33+
#
34+
node_modules/
35+
npm-debug.log
36+
37+
# BUCK
38+
buck-out/
39+
\.buckd/
40+
android/app/libs
41+
android/keystores/debug.keystore

‎examples/Simple/.watchmanconfig‎

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

‎examples/Simple/android/app/BUCK‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import re
2+
3+
# To learn about Buck see [Docs](https://buckbuild.com/).
4+
# To run your application with Buck:
5+
# - install Buck
6+
# - `npm start` - to start the packager
7+
# - `cd android`
8+
# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
9+
# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
10+
# - `buck install -r android/app` - compile, install and run application
11+
#
12+
13+
lib_deps = []
14+
for jarfile in glob(['libs/*.jar']):
15+
name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile)
16+
lib_deps.append(':' + name)
17+
prebuilt_jar(
18+
name = name,
19+
binary_jar = jarfile,
20+
)
21+
22+
for aarfile in glob(['libs/*.aar']):
23+
name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile)
24+
lib_deps.append(':' + name)
25+
android_prebuilt_aar(
26+
name = name,
27+
aar = aarfile,
28+
)
29+
30+
android_library(
31+
name = 'all-libs',
32+
exported_deps = lib_deps
33+
)
34+
35+
android_library(
36+
name = 'app-code',
37+
srcs = glob([
38+
'src/main/java/**/*.java',
39+
]),
40+
deps = [
41+
':all-libs',
42+
':build_config',
43+
':res',
44+
],
45+
)
46+
47+
android_build_config(
48+
name = 'build_config',
49+
package = 'com.simple',
50+
)
51+
52+
android_resource(
53+
name = 'res',
54+
res = 'src/main/res',
55+
package = 'com.simple',
56+
)
57+
58+
android_binary(
59+
name = 'app',
60+
package_type = 'debug',
61+
manifest = 'src/main/AndroidManifest.xml',
62+
keystore = '//android/keystores:debug',
63+
deps = [
64+
':app-code',
65+
],
66+
)

0 commit comments

Comments
 (0)