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