1<TextInput
2 multiline={true}
3 numberOfLines={4}
4 onChangeText={(val) => setText(val)}
5 value={text}
6/>
1 <View style={styles.textAreaContainer} >
2 <TextInput
3 style={styles.textArea}
4 underlineColorAndroid="transparent"
5 placeholder="Type something"
6 placeholderTextColor="grey"
7 numberOfLines={10}
8 multiline={true}
9 />
10 </View>
11...
12
13const styles = StyleSheet.create({
14 textAreaContainer: {
15 borderColor: COLORS.grey20,
16 borderWidth: 1,
17 padding: 5
18 },
19 textArea: {
20 height: 150,
21 justifyContent: "flex-start",
22 textAlignVertical: 'top'
23 }
24})
1import React, { Component } from 'react';
2import { TextInput } from 'react-native';
3
4export default function UselessTextInput() {
5 const [textInputValue, setTextInputValue] = React.useState('');
6
7 return (
8 <TextInput
9 style={{
10 height: 40,
11 borderColor: 'gray',
12 borderWidth: 1,
13 placeholderTextColor: 'gray',
14 }}
15 onChangeText={text => setTextInputValue(text)}
16 value={textInputValue}
17 placeholder="Insert your text!"
18 />
19 );
20}
1import React, { Component } from 'react';
2import { TextInput } from 'react-native';
3
4export default function UselessTextInput() {
5 const [value, onChangeText] = React.useState('Useless Placeholder');
6
7 return (
8 <TextInput
9 style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
10 onChangeText={text => onChangeText(text)}
11 value={value}
12 />
13 );
14}
1import React, { useState } from 'react'
2import * as rn from 'react-native'
3
4const FormLogin = () => {
5 const [value, setValue] = useState({
6 username: '',
7 password: ''
8 })
9
10 const onPress = () => {
11 rn.Alert.alert(JSON.stringify(value))
12 setValue({
13 username: '',
14 password: ''
15 })
16 }
17
18 return (
19 <rn.View style={styles.container}>
20 <rn.Text style={styles.titleLogin}>Form Login</rn.Text>
21 <rn.View style={styles.form}>
22 <rn.TextInput
23 style={styles.input}
24 placeholder='enter username'
25 placeholderTextColor='lightgrey'
26 onChangeText={(text) => setValue({ ...value, username: text })}
27 value={value.username}
28 autoCompleteType='off'
29 />
30 <rn.TextInput
31 style={styles.input}
32 placeholder='enter password'
33 placeholderTextColor='lightgrey'
34 onChangeText={(text) => setValue({ ...value, password: text })}
35 value={value.password}
36 autoCompleteType='off'
37 secureTextEntry
38 />
39 <rn.View style={styles.button}>
40 <rn.Button title='login' color='green' onPress={onPress} />
41 </rn.View>
42 </rn.View>
43 </rn.View>
44 )
45}
46
47const styles = rn.StyleSheet.create({
48 container: {
49 flex: 1,
50 justifyContent: 'flex-start',
51 alignItems: 'center',
52 padding: 10,
53 margin: 10
54 },
55 titleLogin: {
56 fontSize: 22,
57 textAlign: 'center',
58 color: 'black',
59 fontWeight: '600'
60 },
61 form: {
62 width: '100%',
63 height: 'auto',
64 justifyContent: 'center',
65 alignItems: 'center',
66 padding: 5,
67 marginTop: 5
68 },
69 input: {
70 width: 350,
71 height: 40,
72 padding: 5,
73 margin: 5,
74 borderWidth: 1,
75 borderColor: 'grey',
76 borderStyle: 'solid',
77 borderRadius: 3
78 },
79 button: {
80 width: 360,
81 height: 40,
82 padding: 5,
83 margin: 5,
84 borderRadius: 3
85 }
86})
87
88export default FormLogin