I am using ReactNative v.0.52.0 and currently developing a TextInput for password, but want to enable user to show / hide their typed input. The problem when toggling the value of secureTextEntry, the caret always move to the beginning of the input.

I have only tested this in Android device.

Environment

Environment:

• OS: Windows 10
• Node: 6.11.5
• Yarn: 1.3.2
• npm: 4.6.1
• Watchman: Not Found
• Xcode: N/A
• Android Studio: Version 3.0.0.0 AI-171.4443003

Packages: (wanted => installed)

• react: 16.2.0 => 16.2.0
• react-native: 0.52.0 => 0.52.0

Expected Behavior

I expect the caret will always stay at the end of the input, when toggling the secureTextEntry

Steps to Reproduce

I manage to reproduce this using a very simple code, I put it at the App.js

export default class App extends Component {

  constructor() {
    super();
    this.state = {
      showPassword: false
    };
  }

  toggleShow() {
    this.setState({
      showPassword: !this.state.showPassword
    });
  }

  render() {
    return (
      <View>
        <TextInput secureTextEntry={this.state.showPassword} />
        <Button title={'Toggle'} onPress={this.toggleShow.bind(this)} />
      </View>
    );
  }
}