Skip to content

Commit e0acb78

Browse files
bartolkaruzabartolkaruza
authored
chore(example): update example file structure (#77)
* chore(example): update example file structure to make it compatible with the tester * fix(example): lint and type errors
1 parent 55af6fa commit e0acb78

File tree

2 files changed

+133
-121
lines changed

2 files changed

+133
-121
lines changed

‎example/App.js‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @format
8+
* @flow
9+
*/
10+
11+
import React from 'react';
12+
import {
13+
Button,
14+
SafeAreaView,
15+
ScrollView,
16+
StyleSheet,
17+
Text,
18+
View,
19+
} from 'react-native';
20+
21+
import GeolocationExample from './GeolocationExample';
22+
23+
// Examples which show the user how to correctly use the library
24+
const EXAMPLES = [
25+
{
26+
id: 'getCurrentPosition',
27+
title: 'Geolocation.getCurrentPosition',
28+
description: 'Asynchronously load and observe location',
29+
render() {
30+
return <GeolocationExample />;
31+
},
32+
},
33+
];
34+
35+
// Test cases for the e2e tests. THESE ARE NOT EXAMPLES OF BEST PRACTICE
36+
import TEST_CASES from './testCases';
37+
38+
type State = {
39+
showExamples: boolean,
40+
};
41+
42+
type Props = {};
43+
44+
export default class ExampleApp extends React.Component<Props, State> {
45+
constructor(props: Props) {
46+
super(props);
47+
48+
this.state = {
49+
showExamples: true,
50+
};
51+
}
52+
53+
_toggleMode = () => {
54+
this.setState(state => ({showExamples: !state.showExamples}));
55+
};
56+
57+
render() {
58+
const {showExamples} = this.state;
59+
return (
60+
<ScrollView style={styles.container}>
61+
<SafeAreaView>
62+
<Button
63+
testID="modeToggle"
64+
onPress={this._toggleMode}
65+
title={showExamples ? 'Switch to Test Cases' : 'Switch to Examples'}
66+
/>
67+
{showExamples ? (
68+
<>
69+
<Text testID="examplesTitle" style={styles.sectionTitle}>
70+
Examples
71+
</Text>
72+
{EXAMPLES.map(this._renderExample)}
73+
</>
74+
) : (
75+
<>
76+
<Text testID="testCasesTitle" style={styles.sectionTitle}>
77+
Test Cases
78+
</Text>
79+
{TEST_CASES.map(this._renderExample)}
80+
</>
81+
)}
82+
</SafeAreaView>
83+
</ScrollView>
84+
);
85+
}
86+
87+
_renderExample = example => {
88+
return (
89+
<View
90+
testID={`example-${example.id}`}
91+
key={example.title}
92+
style={styles.exampleContainer}>
93+
<Text style={styles.exampleTitle}>{example.title}</Text>
94+
<Text style={styles.exampleDescription}>{example.description}</Text>
95+
<View style={styles.exampleInnerContainer}>{example.render()}</View>
96+
</View>
97+
);
98+
};
99+
}
100+
101+
const styles = StyleSheet.create({
102+
container: {
103+
flex: 1,
104+
backgroundColor: '#F5FCFF',
105+
},
106+
sectionTitle: {
107+
fontSize: 24,
108+
marginHorizontal: 8,
109+
marginTop: 24,
110+
},
111+
exampleContainer: {
112+
padding: 16,
113+
marginVertical: 4,
114+
backgroundColor: '#FFF',
115+
borderColor: '#EEE',
116+
borderTopWidth: 1,
117+
borderBottomWidth: 1,
118+
},
119+
exampleTitle: {
120+
fontSize: 18,
121+
},
122+
exampleDescription: {
123+
color: '#333333',
124+
marginBottom: 16,
125+
},
126+
exampleInnerContainer: {
127+
borderColor: '#EEE',
128+
borderTopWidth: 1,
129+
paddingTop: 16,
130+
},
131+
});

‎example/index.js‎

Lines changed: 2 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -8,126 +8,7 @@
88
* @flow
99
*/
1010

11-
import React from 'react';
12-
import {
13-
AppRegistry,
14-
Button,
15-
SafeAreaView,
16-
ScrollView,
17-
StyleSheet,
18-
Text,
19-
View,
20-
} from 'react-native';
21-
22-
import GeolocationExample from './GeolocationExample';
11+
import {AppRegistry} from 'react-native';
2312
import {name as appName} from './app.json';
2413

25-
// Examples which show the user how to correctly use the library
26-
const EXAMPLES = [
27-
{
28-
id: 'getCurrentPosition',
29-
title: 'Geolocation.getCurrentPosition',
30-
description: 'Asynchronously load and observe location',
31-
render() {
32-
return <GeolocationExample />;
33-
},
34-
},
35-
];
36-
37-
// Test cases for the e2e tests. THESE ARE NOT EXAMPLES OF BEST PRACTICE
38-
import TEST_CASES from './testCases';
39-
40-
type State = {
41-
showExamples: boolean,
42-
};
43-
44-
class ExampleApp extends React.Component<{}, State> {
45-
constructor(props) {
46-
super(props);
47-
48-
this.state = {
49-
showExamples: true,
50-
};
51-
}
52-
53-
_toggleMode = () => {
54-
this.setState(state => ({showExamples: !state.showExamples}));
55-
};
56-
57-
render() {
58-
const {showExamples} = this.state;
59-
return (
60-
<ScrollView style={styles.container}>
61-
<SafeAreaView>
62-
<Button
63-
testID="modeToggle"
64-
onPress={this._toggleMode}
65-
title={showExamples ? 'Switch to Test Cases' : 'Switch to Examples'}
66-
/>
67-
{showExamples ? (
68-
<>
69-
<Text testID="examplesTitle" style={styles.sectionTitle}>
70-
Examples
71-
</Text>
72-
{EXAMPLES.map(this._renderExample)}
73-
</>
74-
) : (
75-
<>
76-
<Text testID="testCasesTitle" style={styles.sectionTitle}>
77-
Test Cases
78-
</Text>
79-
{TEST_CASES.map(this._renderExample)}
80-
</>
81-
)}
82-
</SafeAreaView>
83-
</ScrollView>
84-
);
85-
}
86-
87-
_renderExample = example => {
88-
return (
89-
<View
90-
testID={`example-${example.id}`}
91-
key={example.title}
92-
style={styles.exampleContainer}>
93-
<Text style={styles.exampleTitle}>{example.title}</Text>
94-
<Text style={styles.exampleDescription}>{example.description}</Text>
95-
<View style={styles.exampleInnerContainer}>{example.render()}</View>
96-
</View>
97-
);
98-
};
99-
}
100-
101-
const styles = StyleSheet.create({
102-
container: {
103-
flex: 1,
104-
backgroundColor: '#F5FCFF',
105-
},
106-
sectionTitle: {
107-
fontSize: 24,
108-
marginHorizontal: 8,
109-
marginTop: 24,
110-
},
111-
exampleContainer: {
112-
padding: 16,
113-
marginVertical: 4,
114-
backgroundColor: '#FFF',
115-
borderColor: '#EEE',
116-
borderTopWidth: 1,
117-
borderBottomWidth: 1,
118-
},
119-
exampleTitle: {
120-
fontSize: 18,
121-
},
122-
exampleDescription: {
123-
color: '#333333',
124-
marginBottom: 16,
125-
},
126-
exampleInnerContainer: {
127-
borderColor: '#EEE',
128-
borderTopWidth: 1,
129-
paddingTop: 16,
130-
},
131-
});
132-
133-
AppRegistry.registerComponent(appName, () => ExampleApp);
14+
AppRegistry.registerComponent(appName, () => require('./App.js'));

0 commit comments

Comments
 (0)