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 · Accepted 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

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

User · Answer

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

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

User · Answer

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

User · Answer

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

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

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

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       lt TextInput value  this state password  textContentType   password   multiline  false  secureTextEntry  true  onChangeText   text    gt    this  savePassword text   this setState   password  text        style  styles input  placeholder  Github password    gt

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

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

Examples related to react-native