Skip to content

Commit d087d26

Browse files
YajanaRaoYajanaRao
authored
Example react native test app (#594)
1 parent b65422a commit d087d26

Some content is hidden

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

66 files changed

+8176
-2830
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,11 +70,16 @@ jobs:
7070
strategy:
7171
matrix:
7272
node-version: [14]
73+
java-version: [11]
7374
steps:
7475
- uses: actions/checkout@v2
7576
- uses: actions/setup-node@v1
7677
with:
7778
node-version: ${{ matrix.node-version }}
79+
- uses: actions/setup-java@v3
80+
with:
81+
distribution: 'zulu'
82+
java-version: ${{ matrix.java-version }}
7883
- name: Get yarn cache
7984
id: yarn-cache
8085
run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -84,6 +89,10 @@ jobs:
8489
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
8590
- name: Install Dependencies
8691
run: yarn
92+
- name: Install Example Dependencies
93+
run: cd example && yarn
94+
- name: Build android
95+
run: cd example && yarn build:android
8796
- name: Build Android Example App and Library
8897
run: cd example/android && ./gradlew clean assembleDebug
8998
ios:
@@ -105,7 +114,11 @@ jobs:
105114
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
106115
- name: Install Dependencies
107116
run: yarn
108-
- name: Install Podfiles
109-
run: cd example && npx pod-install
110-
- name: Build example app
111-
run: yarn ios
117+
- name: Install Example
118+
run: cd example && yarn
119+
- name: Build ios
120+
run: cd example && yarn build:ios
121+
- name: Pod install
122+
run: cd example && pod install --project-directory=ios
123+
- name: Run ios app
124+
run: cd example && yarn ios

‎example/.buckconfig‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎example/.gitattributes‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎example/.gitignore‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
*.binlog
2+
*.hprof
3+
*.xcworkspace/
4+
*.zip
5+
.DS_Store
6+
.gradle/
7+
.idea/
8+
.vs/
9+
Pods/
10+
build/
11+
dist/
12+
local.properties
13+
msbuild.binlog
14+
node_modules/

‎example/App.expo.js‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎example/App.js‎

Lines changed: 182 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,184 @@
1-
import App from './src/App';
1+
/**
2+
* Sample React Native App
3+
* https://github.com/facebook/react-native
4+
*
5+
* @flow
6+
*/
7+
8+
import SegmentedControl from '@react-native-segmented-control/segmented-control';
9+
import React, {useEffect, useState} from 'react';
10+
import {ScrollView, StyleSheet, Text, View, useColorScheme} from 'react-native';
11+
12+
const App = () => {
13+
const colorScheme = useColorScheme();
14+
const [textColor, setTextColor] = useState('#000');
15+
const [value, setValue] = useState('Unselected');
16+
const [selectedIndex, setSelectedIndex] = useState(undefined);
17+
18+
useEffect(() => {
19+
setTextColor(colorScheme === 'dark' ? '#FFF' : '#000');
20+
}, [colorScheme]);
21+
22+
const _onChange = (event) => {
23+
setSelectedIndex(event.nativeEvent.selectedSegmentIndex);
24+
};
25+
26+
const _onValueChange = (val) => {
27+
setValue(val);
28+
};
29+
30+
return (
31+
<ScrollView
32+
contentContainerStyle={[
33+
styles.container,
34+
{backgroundColor: colorScheme === 'dark' ? '#000' : '#FFF'},
35+
]}>
36+
<View style={styles.segmentContainer}>
37+
<Text style={[styles.text, {color: textColor}]}>
38+
Segmented controls can have values and images
39+
</Text>
40+
<SegmentedControl
41+
values={['One', 'Two', require('./assets/images/user.png')]}
42+
/>
43+
</View>
44+
<View style={styles.segmentSection}>
45+
<SegmentedControl
46+
values={[
47+
'One',
48+
'Two',
49+
require('../assets/images/user.png'),
50+
'Three',
51+
'Four',
52+
'Five',
53+
]}
54+
/>
55+
</View>
56+
<View style={styles.segmentSection}>
57+
<Text style={[styles.text, {color: textColor}]}>
58+
Segmented controls can have pre-selected values
59+
</Text>
60+
<SegmentedControl values={['One', 'Two']} selectedIndex={0} />
61+
</View>
62+
<View style={styles.segmentSection}>
63+
<Text style={[styles.text, {color: textColor}]}>
64+
Segmented controls can be momentary
65+
</Text>
66+
<SegmentedControl values={['One', 'Two']} momentary={true} />
67+
</View>
68+
<View style={styles.segmentSection}>
69+
<Text style={[styles.text, {color: textColor}]}>
70+
Segmented controls can be disabled
71+
</Text>
72+
<SegmentedControl
73+
enabled={false}
74+
values={['One', 'Two']}
75+
selectedIndex={1}
76+
/>
77+
</View>
78+
<View style={styles.segmentContainer}>
79+
<Text style={[styles.text, {color: textColor}]}>
80+
Custom colors can be provided
81+
</Text>
82+
<SegmentedControl
83+
tintColor="#ff0000"
84+
values={['One', 'Two', 'Three', 'Four']}
85+
selectedIndex={0}
86+
backgroundColor="#0000ff"
87+
/>
88+
</View>
89+
<View style={styles.segmentContainer}>
90+
<SegmentedControl
91+
tintColor="#00ff00"
92+
values={['One', 'Two', 'Three']}
93+
selectedIndex={1}
94+
/>
95+
</View>
96+
<View style={styles.segmentSection}>
97+
<SegmentedControl
98+
fontStyle={{color: '#ff00ff'}}
99+
activeFontStyle={{color: 'blue'}}
100+
values={['One', 'Two']}
101+
selectedIndex={1}
102+
/>
103+
</View>
104+
<View style={styles.segmentContainer}>
105+
<Text style={[styles.text, {color: textColor}]}>
106+
Segmented controls can have defined fontSize
107+
</Text>
108+
<View style={styles.segmentContainer}>
109+
<SegmentedControl
110+
values={['One', 'Two']}
111+
style={{height: 80}}
112+
fontStyle={styles.fontStyle}
113+
/>
114+
</View>
115+
<SegmentedControl
116+
values={['One', 'Two']}
117+
tintColor="red"
118+
style={{height: 80}}
119+
fontStyle={{
120+
fontFamily: 'Optima',
121+
fontSize: 32,
122+
}}
123+
activeFontStyle={styles.activeFontStyle}
124+
/>
125+
</View>
126+
<View>
127+
<Text style={[styles.text, {color: textColor}]}>
128+
Custom colors can be provided
129+
</Text>
130+
<View style={styles.segmentContainer}>
131+
<SegmentedControl
132+
values={['One', 'Two', 'Three']}
133+
selectedIndex={selectedIndex}
134+
onChange={_onChange}
135+
onValueChange={_onValueChange}
136+
/>
137+
</View>
138+
<Text style={[styles.text, {color: textColor}]}>
139+
Value: {value} Index: {selectedIndex}
140+
</Text>
141+
</View>
142+
143+
<View>
144+
<Text style={[styles.text, {color: textColor}]}>
145+
Appearance value can be provided
146+
</Text>
147+
<View style={styles.segmentContainer}>
148+
<SegmentedControl
149+
appearance="light"
150+
values={['One', 'Two', 'Three']}
151+
selectedIndex={1}
152+
/>
153+
</View>
154+
<View style={styles.segmentContainer}>
155+
<SegmentedControl
156+
appearance="dark"
157+
values={['One', 'Two', 'Three']}
158+
selectedIndex={2}
159+
/>
160+
</View>
161+
</View>
162+
</ScrollView>
163+
);
164+
};
165+
166+
const styles = StyleSheet.create({
167+
text: {
168+
fontSize: 14,
169+
textAlign: 'center',
170+
fontWeight: '500',
171+
margin: 10,
172+
},
173+
segmentContainer: {
174+
marginBottom: 10,
175+
},
176+
segmentSection: {
177+
marginBottom: 25,
178+
},
179+
container: {
180+
paddingTop: 80,
181+
},
182+
});
2183

3184
export default App;

‎example/android/.project‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎example/android/.settings/org.eclipse.buildship.core.prefs‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎example/android/app/_BUCK‎

Lines changed: 0 additions & 55 deletions
This file was deleted.

0 commit comments

Comments
 (0)