TextInput clears text when secureTextEntry is true

user_8668276 0
Viewed 3116

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.

react-native-textinput react-native javascript
2 Answers
user_105519950

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