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;