1import SegmentedControl from '@react-native-community/segmented-control';
2import React, { useState } from 'react';
3import { StyleSheet, ScrollView, Text, View } from 'react-native';
4
5// This example is a copy from https://github.com/react-native-community/segmented-control/blob/master/example
6
7const SegmentedControlScreen = () => {
8  const [values] = useState(['One', 'Two', 'Three']);
9  const [value, setValue] = useState('Unselected');
10  const [selectedIndex, setIndex] = useState(undefined);
11
12  const _onChange = event => {
13    setIndex(event.nativeEvent.selectedSegmentIndex);
14  };
15
16  const _onValueChange = (value: string) => {
17    setValue(value);
18  };
19
20  return (
21    <ScrollView contentContainerStyle={styles.container}>
22      <View style={styles.segmentContainer}>
23        <Text style={styles.text}>Segmented controls can have values</Text>
24        <SegmentedControl values={['One', 'Two']} />
25      </View>
26
27      <View style={styles.segmentSection}>
28        <SegmentedControl values={['One', 'Two', 'Three', 'Four', 'Five']} />
29      </View>
30
31      <View style={styles.segmentSection}>
32        <Text style={styles.text}>Segmented controls can have pre-selected values</Text>
33        <SegmentedControl values={['One', 'Two']} selectedIndex={0} />
34      </View>
35
36      <View style={styles.segmentSection}>
37        <Text style={styles.text}>Segmented controls can be momentary</Text>
38        <SegmentedControl values={['One', 'Two']} momentary />
39      </View>
40
41      <View style={styles.segmentSection}>
42        <Text style={styles.text}>Segmented controls can be disabled</Text>
43        <SegmentedControl enabled={false} values={['One', 'Two']} selectedIndex={1} />
44      </View>
45
46      <View style={styles.segmentContainer}>
47        <Text style={styles.text}>Custom colors can be provided</Text>
48        <SegmentedControl
49          tintColor="#ff0000"
50          values={['One', 'Two', 'Three', 'Four']}
51          selectedIndex={0}
52          backgroundColor="#0000ff"
53          activeTextColor="white"
54        />
55      </View>
56      <View style={styles.segmentContainer}>
57        <SegmentedControl
58          tintColor="#00ff00"
59          values={['One', 'Two', 'Three']}
60          selectedIndex={1}
61          activeTextColor="black"
62        />
63      </View>
64      <View style={styles.segmentSection}>
65        <SegmentedControl textColor="#ff00ff" values={['One', 'Two']} selectedIndex={1} />
66      </View>
67
68      <View>
69        <Text style={styles.text}>Custom colors can be provided</Text>
70        <View style={styles.segmentContainer}>
71          <SegmentedControl
72            values={values}
73            selectedIndex={selectedIndex}
74            onChange={_onChange}
75            onValueChange={_onValueChange}
76          />
77        </View>
78        <Text style={[styles.text]}>
79          Value: {value} Index: {selectedIndex}
80        </Text>
81      </View>
82    </ScrollView>
83  );
84};
85
86const styles = StyleSheet.create({
87  text: {
88    fontSize: 14,
89    textAlign: 'center',
90    fontWeight: '500',
91    margin: 10,
92  },
93  segmentContainer: {
94    marginBottom: 10,
95  },
96  segmentSection: {
97    marginBottom: 25,
98  },
99  container: {
100    paddingTop: 80,
101  },
102});
103
104export default SegmentedControlScreen;
105