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 and images</Text>
26        <SegmentedControl values={['One', 'Two', require('../../assets/images/user.png')]} />
27      </View>
28
29      <View style={styles.segmentSection}>
30        <SegmentedControl
31          values={[
32            'One',
33            'Two',
34            'Three',
35            // It seems images higher than 18pt render stretched
36            require('../../assets/images/react-native.png'),
37            'Four',
38            'Five',
39          ]}
40        />
41      </View>
42
43      <View style={styles.segmentSection}>
44        <Text style={styles.text}>Segmented controls can have pre-selected values</Text>
45        <SegmentedControl values={['One', 'Two']} selectedIndex={0} />
46      </View>
47
48      <View style={styles.segmentSection}>
49        <Text style={styles.text}>Segmented controls can be momentary</Text>
50        <SegmentedControl values={['One', 'Two']} momentary />
51      </View>
52
53      <View style={styles.segmentSection}>
54        <Text style={styles.text}>Segmented controls can be disabled</Text>
55        <SegmentedControl enabled={false} values={['One', 'Two']} selectedIndex={1} />
56      </View>
57
58      <View style={styles.segmentContainer}>
59        <Text style={styles.text}>Custom colors can be provided</Text>
60        <SegmentedControl
61          tintColor="#ff0000"
62          values={['One', 'Two', 'Three', 'Four']}
63          selectedIndex={0}
64          backgroundColor="#0000ff"
65          activeTextColor="white"
66        />
67      </View>
68      <View style={styles.segmentContainer}>
69        <SegmentedControl
70          tintColor="#00ff00"
71          values={['One', 'Two', 'Three']}
72          selectedIndex={1}
73          activeTextColor="black"
74        />
75      </View>
76      <View style={styles.segmentSection}>
77        <SegmentedControl textColor="#ff00ff" values={['One', 'Two']} selectedIndex={1} />
78      </View>
79
80      <View>
81        <Text style={styles.text}>Custom colors can be provided</Text>
82        <View style={styles.segmentContainer}>
83          <SegmentedControl
84            values={values}
85            selectedIndex={selectedIndex}
86            onChange={_onChange}
87            onValueChange={_onValueChange}
88          />
89        </View>
90        <Text style={[styles.text]}>
91          Value: {value} Index: {selectedIndex}
92        </Text>
93      </View>
94    </ScrollView>
95  );
96};
97
98const styles = StyleSheet.create({
99  text: {
100    fontSize: 14,
101    textAlign: 'center',
102    fontWeight: '500',
103    margin: 10,
104  },
105  segmentContainer: {
106    marginBottom: 10,
107  },
108  segmentSection: {
109    marginBottom: 25,
110  },
111  container: {
112    paddingTop: 80,
113  },
114});
115
116export default SegmentedControlScreen;
117