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