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})}
/>

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

May 2018 react-native version 0.55.2

This works fine:

secureTextEntry={true}

And this does not work anymore:

password={true} 

Just add the line below to the <TextInput>

secureTextEntry={true}

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}
/>

I had to add:

secureTextEntry={true}

Along with

password={true}

As of 0.55

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' />
   

  

A little plus:

version = RN 0.57.7

secureTextEntry={true}

does not work when the keyboardType was "phone-pad" or "email-address"

<TextInput
  placeholderTextColor={colors.Greydark}
  placeholder={'Enter Password'}
  secureTextEntry={true} />

You can get the example and sample code at the official site, as following:

<TextInput password={true} style={styles.default} value="abc" />

Reference: http://facebook.github.io/react-native/docs/textinput.html

If you added secureTextEntry={true} but did not work then check the multiline={true} prop, because if it is true, secureTextEntry does not work.

<TextInput 
   secureTextEntry 
   placeholder="password" placeholderTextColor="#297542" 
   autoCorrect={false} style={mystyles.inputStylee} 
/>

You can simply add the secureTextEntry prop to TextInput and omit its value. By default, it is set to true. To make it to false do this secureTextEntry={false}

 <TextInput
        placeholder="Password"
        secureTextEntry={true}
        style={styles.input}
        onChangeText={setPassword}
        value={password}
      />