CODEWITHSUNDEEP
react-nativetext
flix
flix

Reputation: 1974

React Native - Handling <Text/> to used "SecureTextEntry" like <TextInput/>

I'm tried to find any props in react native docs how to used <Text/> to hide Password Text,

I have a dynamic JS Object to show and used map to handle:

renderProfile(){
  var tampil = this.state.data[0].detail.map((item, index)=>{
    return(
      <View key={index}>
        <Text>{item.Header} :</Text>
        {
          this.state.editProfile ?
          item.Header == 'Password' || item.Header == 'Username' || item.Header == 'Telepon' ?
          <View>
          <TextInput
            //MyProps
          />
          {item.Header=='Password' && this.state.editProfile ? <FontAwesome onPress={()=>{this.setState({hidePassword: !this.state.hidePassword})}} name="eye" size={20} color="#000"/> : null}
          </View>
          : <Text>{item.Value}</Text>
          : <Text>{item.Value}</Text>
        }
      </View>
    )
  })
  return tampil
}

I can handle the <TextInput/> with SecureTextEntry, but on <Text/> I don't see SecureTextEntry props

Is there a way to hide Password in <Text/> component?

Upvotes: 1

Views: 1752

Answers (2)

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

Since there is no prop to hide the password in the Text and you want to use the Text node, then you can make your own text mask.

securePasswordEntry (value) { 
  return value && value.replace(/./g, '*')
}

<Text>{securePasswordEntry(/*Text you want to secure*/)}<Text>

Upvotes: 3

Gaurav
Gaurav

Reputation: 2005

You should use TextInput for Password fields.

<View>
    <TextInput secureTextEntry={true}>
    </TextInput>
</View>

Upvotes: 0

Related Questions