CODEWITHSUNDEEP
javascriptreact-nativereact-native-textinput
Vishu Bhardwaj
Vishu Bhardwaj

Reputation: 321

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.

Upvotes: 5

Views: 5284

Answers (2)

Osiel Lima
Osiel Lima

Reputation: 227

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.

Upvotes: 2

Ammar Tariq
Ammar Tariq

Reputation: 847

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

Upvotes: 0

Related Questions