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?

<TextInput
  style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
  onChangeText={(text) => this.setState({input: text})}
/>

Answer 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

Answer 2

May 2018 react-native version 0.55.2

This works fine:

secureTextEntry={true}

And this does not work anymore:

password={true} 

Answer 3

Just add the line below to the <TextInput>

secureTextEntry={true}

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

Answer 5

You need to set a secureTextEntry prop to true and for better user experience you can use an eye icon to show the actual password

 import {TextInput, Card} from 'react-native-paper';
 const [hidePass, setHidePass] = useState(true);

 const [password, setPassword] = useState('');


<TextInput
            
            label="Password"
            outlineColor="black"
            activeOutlineColor="#326A81"
            autoCapitalize="none"
            returnKeyType="next"
            mode="outlined"
            secureTextEntry={hidePass ? true : false}
            selectionColor="#326A81"
            blurOnSubmit={false}
            onChangeText={password => updateState({password})}
            right={
              <TextInput.Icon
                name="eye"
                onPress={() => setHidePass(!hidePass)}
              />
            }
          />

Answer 6

I had to add:

secureTextEntry={true}

Along with

password={true}

As of 0.55

Answer 7

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

Answer 8

A little plus:

version = RN 0.57.7

secureTextEntry={true}

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

Answer 9

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

Answer 10

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

Answer 11

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

Answer 12

You need to set a secureTextEntry prop to true

<TextInput
  placeholder="Re-enter password"
  style={styles.input}
  secureTextEntry={true}
  value={confirmPsw}
  onChangeText={setconfirmPsw}
/>

Answer 13

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

Answer 14

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

Answer 15

const [password, setPassword] = useState('');  
const [passwordVisibility, setPasswordVisibility] = useState(true);  
const [rightIcon, setRightIcon] = useState('eye');  
const [rightIconColor, setRightIconColor] = useState('#0C8A7B');

 const handlePasswordVisibility = () => {  
        if (rightIcon === 'eye') {  
            setRightIcon('eye-slash');  
            //setRightIconColor('#FF0000')  
            setPasswordVisibility(!passwordVisibility);  
        } else if (rightIcon === 'eye-slash') {  
            setRightIcon('eye');  
            //setRightIconColor('#0C8A7B')
            setPasswordVisibility(!passwordVisibility);  
        }  
    };  
 <TextInput  
     style={{
        height: 45,  
        margin: 12,  
        padding: 10,  
        backgroundColor: 'white',  
        borderRadius: 10  
    }}  
   name="password"  
   placeholder="Enter password"  
   autoCapitalize="none"  
   autoCorrect={false}  
   secureTextEntry={passwordVisibility}  
   value={password}  
   enablesReturnKeyAutomatically  
   onChangeText={text => setPassword(text)}  
  />

  <TouchableOpacity
      onPress={handlePasswordVisibility}>
  <Icon name={rightIcon} size={25} color={rightIconColor} />
  </TouchableOpacity>
</View>


**I Hope this will help you**