TextInput clears text when secureTextEntry is true

Hello I am using TextInput of react native and there is an eye option to view or hide password. When I set secureTextEntry to true and type another character in input it clears all previous data and just types the character.

Here is my code :

<TextInput
 ref={ref => this._password = ref}
 style={[style.greyTextStyle, style.textinputStyle]}
 placeholder={strings.PASSWORD}
 secureTextEntry={this.state.securepass}
 placeholderTextColor={color.GREY_TEXT_COLOR}
 underlineColorAndroid='transparent'
 value={this.state.password}
 onChangeText={(text) => { this.setState({ password: text }) }} />

On clicking on eye btn I toggle secure text entry

showPassword() {
 this.setState({ securepass: !this.state.securepass });
 if (this.state.securepass == false) {
  this.setState({ passIcon: 'eye' })
 } else {
  this.setState({ passIcon: 'eye-off' })
 }
}

Please help.

2 answers

  • answered 2018-11-08 08:31 Osiel Lima

    I think this is the iOS native behavior. Please check this https://github.com/facebook/react-native/issues/9148 and this https://github.com/facebook/react-native/issues/12939. You can try save the value before toggling show/hide password and set again after that.

  • answered 2018-11-08 08:37 Ammar Tariq

    setting property clearTextOnFocus to false in your textInput might help

    <TextInput
     clearTextOnFocus={false}
     ref={ref => this._password = ref}
     style={[style.greyTextStyle, style.textinputStyle]}
     placeholder={strings.PASSWORD}
     secureTextEntry={this.state.securepass}
     placeholderTextColor={color.GREY_TEXT_COLOR}
     underlineColorAndroid='transparent'
     value={this.state.password}
     onChangeText={(text) => { this.setState({ password: text }) }} />