react-native-native-select/tests/android_demo.tsx at main · wneel/react-native-native-select · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

import { useState } from "react";
import { Text, View } from "react-native"
import { Select } from "react-native-native-select";

const App = () => {
	const array = [
		"Apple",
		"Banana",
		"Orange",
		"Really really really long text"
	]

	const [first, setFirst] = useState(0);
	const [second, setSecond] = useState(0);

	return (
		<View style={{
			flex: 1,
			alignItems: "center",
			justifyContent: "space-evenly",
			backgroundColor: "white"
		}}>
			<Text>react-native-native-select</Text>
			<View>
				<Text>style it as you want :</Text>
				<View style={{flexDirection: "row", marginBlock: 25}}>
					<View style={{ width: 100, height: 50, backgroundColor: "#2483ff", marginRight: 12, borderRadius: 12, alignItems: "center", justifyContent: "center" }}>
						<Text style={{color: "white", fontWeight: 700}}>{array[second]}</Text>
						<Select
							style={{ width: 100, height: 50, opacity: 0, position: "absolute" }}
							mode="dropdown"
							options={array}
							selectedIndex={second}
							onValueChange={(e) => setSecond(e.nativeEvent.index)}
						/>
					</View>
					<View style={{ width: 100, height: 50, backgroundColor: "#000000AA", marginRight: 12, borderRadius: 12, alignItems: "center", justifyContent: "center" }}>
						<Text style={{color: "white", fontWeight: 700}}>Click me !</Text>
						<Select
							style={{ width: 100, height: 50, opacity: 0, position: "absolute" }}
							mode="dropdown"
							options={array}
							selectedIndex={second}
							onValueChange={(e) => setSecond(e.nativeEvent.index)}
						/>
					</View>
					<View style={{ width: 100, height: 50, backgroundColor: "#000000AA" }}>
						<Select
							style={{ flex: 1, opacity: 0 }}
							mode="dropdown"
							options={array}
							selectedIndex={second}
							onValueChange={(e) => setSecond(e.nativeEvent.index)}
						/>
					</View>
				</View>
				<Text>selected : {array[second]}</Text>
			</View>
			<View>
				<Text>because it's not working properly with the native style :</Text>
				<Select
					style={{ width: 300, height: 100 }}
					options={array}
					selectedIndex={first}
					onValueChange={(e) => { console.d(e.nativeEvent);setFirst(e.nativeEvent.index) }}
				/>
				<Text>selected : {array[first]}</Text>
			</View>
		</View>
	);
}

export default App;