-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
144 lines (141 loc) · 5.52 KB
/
App.js
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
import React, {useState} from 'react';
import { StyleSheet, Text, View, KeyboardAvoidingView, TextInput, ScrollView, TouchableOpacity, Alert } from 'react-native';
import Navigation from "./Navigation";
import Button from "./Button";
export default function App() {
const [tab, setTab] = useState(1)
const EXAMPLE_AMOUNT = 4;
const EXAMPLES = {
0: (
<KeyboardAvoidingView style={styles.keyboardAvoidingView} behavior="padding">
<View style={styles.wrapper}>
<Navigation amount={EXAMPLE_AMOUNT} setTab={setTab} current={tab} />
<ScrollView contentContainerStyle={styles.scrollViewContainer} keyboardShouldPersistTaps="handled">
<View style={styles.frame}>
<Text style={styles.mb10}>
Form with multiple inputs:{'\n'}
KeyboardAvoidingView ✅{'\n'}
keyboardShouldPersistTaps: handled
</Text>
<TextInput value="Hey you 1" style={styles.input} />
<TextInput value="Hey you 2" style={styles.input} />
<TextInput value="Hey you 3" style={styles.input} />
<TextInput value="Hey you 4" style={styles.input} />
<TextInput value="Hey you 5" style={styles.input} />
<TextInput value="Hey you 6" style={styles.input} />
<TextInput value="Hey you 7" style={styles.input} />
<TextInput value="Hey you 8" style={styles.input} />
<TextInput value="Hey you 9" style={styles.input} />
<TextInput value="Hey you 10" style={styles.input} />
<TextInput value="Hey you 11" style={styles.input} />
<TextInput value="Hey you 12" style={styles.input} />
<TextInput value="Hey you 13" style={styles.input} />
<Button />
</View>
</ScrollView>
</View>
</KeyboardAvoidingView>
),
1: (
<KeyboardAvoidingView style={styles.keyboardAvoidingView} behavior="padding">
<View style={styles.wrapper}>
<Navigation amount={EXAMPLE_AMOUNT} setTab={setTab} current={tab} />
<ScrollView contentContainerStyle={styles.scrollViewContainer} keyboardShouldPersistTaps="handled" keyboardDismissMode="on-drag">
<View style={styles.frameSpread}>
<View>
<Text style={styles.mb10}>
Single / focused input:{'\n'}
KeyboardAvoidingView ✅{'\n'}
keyboardShouldPersistTaps: handled
keyboardDismissMode: on-drag
</Text>
<TextInput value="Hey you 1" style={styles.input} />
</View>
<Button />
</View>
</ScrollView>
</View>
</KeyboardAvoidingView>
),
2: (
<KeyboardAvoidingView style={styles.keyboardAvoidingView} behavior="padding">
<View style={styles.wrapper}>
<Navigation amount={EXAMPLE_AMOUNT} setTab={setTab} current={tab} />
<ScrollView contentContainerStyle={styles.scrollViewContainer} keyboardShouldPersistTaps="handled" keyboardDismissMode="on-drag">
<View style={styles.frameSpread}>
<View>
<Text style={styles.mb10}>
Few focused inputs:{'\n'}
KeyboardAvoidingView ✅{'\n'}
keyboardShouldPersistTaps: handled
keyboardDismissMode: on-drag
</Text>
<TextInput value="Hey you 1" style={styles.input} />
<TextInput value="Hey you 2" style={styles.input} />
</View>
<Button />
</View>
</ScrollView>
</View>
</KeyboardAvoidingView>
),
3: (
<KeyboardAvoidingView style={styles.keyboardAvoidingView} behavior="padding">
<View style={styles.wrapper}>
<Navigation amount={EXAMPLE_AMOUNT} setTab={setTab} current={tab} />
<ScrollView contentContainerStyle={styles.scrollViewContainer} keyboardShouldPersistTaps="handled" keyboardDismissMode="on-drag">
<View style={styles.frameSpread}>
<View>
<Text style={styles.mb10}>
Too much focused inputs, but it still works:{'\n'}
KeyboardAvoidingView ✅{'\n'}
keyboardShouldPersistTaps: handled
keyboardDismissMode: on-drag
</Text>
<TextInput value="Hey you 1" style={styles.input} />
<TextInput value="Hey you 2" style={styles.input} />
<TextInput value="Hey you 3" style={styles.input} />
<TextInput value="Hey you 4" style={styles.input} />
<TextInput value="Hey you 5" style={styles.input} />
<TextInput value="Hey you 6" style={styles.input} />
</View>
<Button />
</View>
</ScrollView>
</View>
</KeyboardAvoidingView>
),
}
return EXAMPLES[tab] != null ? EXAMPLES[tab] : <Navigation amount={EXAMPLE_AMOUNT} setTab={setTab} />;
}
const styles = StyleSheet.create({
keyboardAvoidingView: {
flex: 1,
},
wrapper: {
backgroundColor: '#fff',
flex: 1,
},
scrollViewContainer: {
flexGrow: 1,
},
frame: {
padding: 20,
},
frameSpread: {
padding: 20,
flex: 1,
justifyContent: 'space-between',
},
input: {
borderRadius: 6,
borderWidth: 1,
borderColor: '#dee2e6',
padding: 15,
backgroundColor: '#f8f9fa',
marginBottom: 10,
},
mb10: {
marginBottom: 10,
},
});