TextInput clears text when secureTextEntry is true

Question

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.

@David, No. I have not found a viable option yet. – Vishu Bhardwaj Mar 02 '20 at 12:06 — Vishu Bhardwaj, Mar 02 '20 at 12:06

Osiel Lima · Answer 1 · 2018-11-08T08:43:52.763

1

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.

edited Nov 08 '18 at 08:43

answered Nov 08 '18 at 08:31

Osiel Lima

217
2
3

Unfortunately, it seems that Osiel Lima is correct, and this is indeed the intended behavior for iOS. It's very poorly designed behavior, IMHO, but it does seem to be fairly consistent across various apps on iOS. – TheRealMikeD May 24 '22 at 00:29

score 1 · Answer 2 · answered Nov 08 '18 at 08:37

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

TextInput clears text when secureTextEntry is true

2 Answers2