Example react native test app

.github/workflows/ci.yml

@@ -70,11 +70,16 @@ jobs:
  strategy:
  matrix:
  node-version: [14]
+ java-version: [11] 
  steps:
  - uses: actions/checkout@v2
  - uses: actions/setup-node@v1
  with:
  node-version: ${{ matrix.node-version }}
+ - uses: actions/setup-java@v3
+ with:
+ distribution: 'zulu'
+ java-version: ${{ matrix.java-version }}
  - name: Get yarn cache
  id: yarn-cache
  run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -84,6 +89,10 @@ jobs:
  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
  - name: Install Dependencies
  run: yarn
+ - name: Install Example Dependencies
+ run: cd example && yarn
+ - name: Build android
+ run: cd example && yarn build:android
  - name: Build Android Example App and Library
  run: cd example/android && ./gradlew clean assembleDebug
  ios:
@@ -105,7 +114,11 @@ jobs:
  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
  - name: Install Dependencies
  run: yarn
- - name: Install Podfiles
- run: cd example && npx pod-install
- - name: Build example app
- run: yarn ios
+ - name: Install Example
+ run: cd example && yarn
+ - name: Build ios
+ run: cd example && yarn build:ios 
+ - name: Pod install
+ run: cd example && pod install --project-directory=ios
+ - name: Run ios app
+ run: cd example && yarn ios

example/.gitignore

@@ -0,0 +1,14 @@
+*.binlog
+*.hprof
+*.xcworkspace/
+*.zip
+.DS_Store
+.gradle/
+.idea/
+.vs/
+Pods/
+build/
+dist/
+local.properties
+msbuild.binlog
+node_modules/

example/App.js

@@ -1,3 +1,184 @@
-import App from './src/App';
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @flow
+ */
+
+import SegmentedControl from '@react-native-segmented-control/segmented-control';
+import React, {useEffect, useState} from 'react';
+import {ScrollView, StyleSheet, Text, View, useColorScheme} from 'react-native';
+
+const App = () => {
+ const colorScheme = useColorScheme();
+ const [textColor, setTextColor] = useState('#000');
+ const [value, setValue] = useState('Unselected');
+ const [selectedIndex, setSelectedIndex] = useState(undefined);
+
+ useEffect(() => {
+ setTextColor(colorScheme === 'dark' ? '#FFF' : '#000');
+ }, [colorScheme]);
+
+ const _onChange = (event) => {
+ setSelectedIndex(event.nativeEvent.selectedSegmentIndex);
+ };
+
+ const _onValueChange = (val) => {
+ setValue(val);
+ };
+
+ return (
+ <ScrollView
+ contentContainerStyle={[
+ styles.container,
+ {backgroundColor: colorScheme === 'dark' ? '#000' : '#FFF'},
+ ]}>
+ <View style={styles.segmentContainer}>
+ <Text style={[styles.text, {color: textColor}]}>
+ Segmented controls can have values and images
+ </Text>
+ <SegmentedControl
+ values={['One', 'Two', require('./assets/images/user.png')]}
+ />
+ </View>
+ <View style={styles.segmentSection}>
+ <SegmentedControl
+ values={[
+ 'One',
+ 'Two',
+ require('../assets/images/user.png'),
+ 'Three',
+ 'Four',
+ 'Five',
+ ]}
+ />
+ </View>
+ <View style={styles.segmentSection}>
+ <Text style={[styles.text, {color: textColor}]}>
+ Segmented controls can have pre-selected values
+ </Text>
+ <SegmentedControl values={['One', 'Two']} selectedIndex={0} />
+ </View>
+ <View style={styles.segmentSection}>
+ <Text style={[styles.text, {color: textColor}]}>
+ Segmented controls can be momentary
+ </Text>
+ <SegmentedControl values={['One', 'Two']} momentary={true} />
+ </View>
+ <View style={styles.segmentSection}>
+ <Text style={[styles.text, {color: textColor}]}>
+ Segmented controls can be disabled
+ </Text>
+ <SegmentedControl
+ enabled={false}
+ values={['One', 'Two']}
+ selectedIndex={1}
+ />
+ </View>
+ <View style={styles.segmentContainer}>
+ <Text style={[styles.text, {color: textColor}]}>
+ Custom colors can be provided
+ </Text>
+ <SegmentedControl
+ tintColor="#ff0000"
+ values={['One', 'Two', 'Three', 'Four']}
+ selectedIndex={0}
+ backgroundColor="#0000ff"
+ />
+ </View>
+ <View style={styles.segmentContainer}>
+ <SegmentedControl
+ tintColor="#00ff00"
+ values={['One', 'Two', 'Three']}
+ selectedIndex={1}
+ />
+ </View>
+ <View style={styles.segmentSection}>
+ <SegmentedControl
+ fontStyle={{color: '#ff00ff'}}
+ activeFontStyle={{color: 'blue'}}
+ values={['One', 'Two']}
+ selectedIndex={1}
+ />
+ </View>
+ <View style={styles.segmentContainer}>
+ <Text style={[styles.text, {color: textColor}]}>
+ Segmented controls can have defined fontSize
+ </Text>
+ <View style={styles.segmentContainer}>
+ <SegmentedControl
+ values={['One', 'Two']}
+ style={{height: 80}}
+ fontStyle={styles.fontStyle}
+ />
+ </View>
+ <SegmentedControl
+ values={['One', 'Two']}
+ tintColor="red"
+ style={{height: 80}}
+ fontStyle={{
+ fontFamily: 'Optima',
+ fontSize: 32,
+ }}
+ activeFontStyle={styles.activeFontStyle}
+ />
+ </View>
+ <View>
+ <Text style={[styles.text, {color: textColor}]}>
+ Custom colors can be provided
+ </Text>
+ <View style={styles.segmentContainer}>
+ <SegmentedControl
+ values={['One', 'Two', 'Three']}
+ selectedIndex={selectedIndex}
+ onChange={_onChange}
+ onValueChange={_onValueChange}
+ />
+ </View>
+ <Text style={[styles.text, {color: textColor}]}>
+ Value: {value} Index: {selectedIndex}
+ </Text>
+ </View>
+
+ <View>
+ <Text style={[styles.text, {color: textColor}]}>
+ Appearance value can be provided
+ </Text>
+ <View style={styles.segmentContainer}>
+ <SegmentedControl
+ appearance="light"
+ values={['One', 'Two', 'Three']}
+ selectedIndex={1}
+ />
+ </View>
+ <View style={styles.segmentContainer}>
+ <SegmentedControl
+ appearance="dark"
+ values={['One', 'Two', 'Three']}
+ selectedIndex={2}
+ />
+ </View>
+ </View>
+ </ScrollView>
+ );
+};
+
+const styles = StyleSheet.create({
+ text: {
+ fontSize: 14,
+ textAlign: 'center',
+ fontWeight: '500',
+ margin: 10,
+ },
+ segmentContainer: {
+ marginBottom: 10,
+ },
+ segmentSection: {
+ marginBottom: 25,
+ },
+ container: {
+ paddingTop: 80,
+ },
+});
 
 export default App;