How do you style a TextInput in react native for password input
I have a TextInput. Instead of showing the actual text entered, when the user enters text I want it to show the password dots / asterisks (****
) you typically see in apps when typing a password. How can I do this?
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
onChangeText={(text) => this.setState({input: text})}
/>
Solution 1:
When this was asked there wasn't a way to do it natively, however this will be added on the next sync according to this pull request. Here is the last comment on the pull request - "Landed internally, will be out on the next sync"
When it is added you will be able to do something like this
<TextInput secureTextEntry={true} style={styles.default} value="abc" />
refs
Solution 2:
May 2018 react-native version 0.55.2
This works fine:
secureTextEntry={true}
And this does not work anymore:
password={true}
Solution 3:
Just add the line below to the <TextInput>
secureTextEntry={true}
Solution 4:
Add
secureTextEntry={true}
or just
secureTextEntry
property in your TextInput.
Working Example:
<TextInput style={styles.input}
placeholder="Password"
placeholderTextColor="#9a73ef"
returnKeyType='go'
secureTextEntry
autoCorrect={false}
/>
Solution 5:
I had to add:
secureTextEntry={true}
Along with
password={true}
As of 0.55