react native form input

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