-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
60 lines (55 loc) · 1.38 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
import React from 'react';
import {
View,
TextInput,
TouchableWithoutFeedback,
Keyboard,
StyleSheet,
Text,
} from 'react-native';
//to achieve the same effect, you can wrap your TextInput in a View
const TextInputMultiline = (props) => {
//remove paddingTop for correct the question the positioning
return (
<View style={styles.input}>
<TextInput {...props} style={{ paddingTop: 0 }} />
</View>
);
};
const TextInputMultilineMultiplataform = () => {
const [value, onChangeText] = React.useState();
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.container}>
<Text style={styles.text}>
Example de TextInput multine align correctly!
</Text>
<TextInputMultiline
placeholder="Type something cool"
placeholderTextColor="#fff"
multiline
onChangeText={(text) => onChangeText(text)}
value={value}
/>
</View>
</TouchableWithoutFeedback>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#EB4C49',
alignItems: 'center',
justifyContent: 'center',
padding: 15,
width: '100%',
},
input: {
maxHeight: 150,
backgroundColor: '#9849EB',
width: '100%',
padding: 15,
},
text: { color: '#fff', marginBottom: 10 },
});
export default TextInputMultilineMultiplataform;