Toggling secureTextEntry between true and false cause text to disappear on iOS

Description

I’m trying to create a custom password input where you can toggle if you can see the password or not. The bug is that when you change between true and false on textInput, the content of the input disappear.

Reproduction

First, you need to have a textInput with secureTextEntry. Then you enter a string in the textinput. After that you set the secureTextEntry to false and then back to true and you enter another character. The field should be set empty and then the new character appear.

On android, the cursor is set to the beginning of the field you do the same steps.

Solution

I found that the onChangeText props of the TextInput return an empty string when you set secureTextEntry to true.

Additional Information

React Native version : 0.41 Platform: iOS and Android OS : MacOS

Here’s a simple example of what I’m trying to do :

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity
} from 'react-native';

export default class test_secureTextEntry extends Component {
  constructor(props) {
        super(props);
        this.state = {
          hidden: true
        };
    }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          secureTextEntry={this.state.hidden}
          style={{ width: 100, height: 40, backgroundColor: 'grey' }}
        />
        <TouchableOpacity
          onPress={ () => this.setState({ hidden: !this.state.hidden })}
        >
          <Text>Go</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

AppRegistry.registerComponent('test_secureTextEntry', () => test_secureTextEntry);

[nateReiners]

• 1 this is still an issue for me (RN 0.50.3) and this should be re-opened

[altaf933]

I have same issue on react-native version react-native: 0.55.3