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