How do you style a TextInput in react native for password input

Question

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   lt TextInput   style    height  40  borderColor   gray   borderWidth  1      onChangeText   text    gt  this setState  input  text      gt

User · Answer

An TextInput must include secureTextEntry={true}, note that the docs of React state that you must not use multiline={true} at the same time, as that combination is not supported.

You can also set textContentType={'password'} to allow the field to retrieve credentials from the keychain stored on your mobile, an alternative way to enter credentials if you got biometric input on your mobile to quickly insert credentials. Such as FaceId on iPhone X or fingerprint touch input on other iPhone models and Android.

 <TextInput value={this.state.password} textContentType={'password'} multiline={false} secureTextEntry={true} onChangeText={(text) => { this._savePassword(text); this.setState({ password: text }); }} style={styles.input} placeholder='Github password' />

User · Answer

A little plus   version   RN 0 57 7  secureTextEntry  true    does not work when the keyboardType was  phone-pad  or  email-address

User · Answer

I am using 0 56RC secureTextEntry  true  Along with password  true  then only its working as mentioned by  NicholasByDesign

User · Answer

If you added secureTextEntry  true  but did not work then check the multiline  true  prop  because if it is true  secureTextEntry does not work

User · Answer

May 2018 react-native version 0 55 2  secureTextEntry  true  works  password  true  does not work

User · Answer

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   lt TextInput secureTextEntry  true  style  styles default  value  abc    gt    refs

User · Answer

Just add the line below to the  lt TextInput gt   secureTextEntry  true

User · Answer

I had to add   secureTextEntry  true    Along with   password  true    As of 0 55

User · Answer

You can get the example and sample code at the official site  as following    lt TextInput password  true  style  styles default  value  abc    gt    Reference  http   facebook github io react-native docs textinput html

User · Answer

Add   secureTextEntry  true    or just  secureTextEntry    property in your TextInput   Working Example    lt TextInput style  styles input             placeholder  Password             placeholderTextColor   9a73ef             returnKeyType  go             secureTextEntry            autoCorrect  false    gt

[react-native] How do you style a TextInput in react native for password input

Examples related to react-native