React-native: [0.57.2][IOS] TextInput secureTextEntry keyboard locale updated

[yohannpoli]

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Memory: 682.65 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.11.0 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
Android SDK:
Build Tools: 23.0.1, 27.0.3
API Levels: 23, 27
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5014246
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.2 => 0.57.2
npmGlobalPackages:
react-native-cli: 2.0.1

Description

It seems that the secureTextEntry change the keyboard locale on IOS when there is one field in form who's not secure.

Reproducible Demo

Reproduction on a fresh install via CLI:

1 - Change OS lang to French.
2 - Copy this App.js content.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

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

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
        <TextInput placeholder={'email'} />
        <TextInput secureTextEntry={true} placeholder={'password'} />
        <TextInput secureTextEntry={true} placeholder={'confirm password'} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Expected result

Keyboard locale should stay in OS language for each fields.

Actual result

Email input keyboard is Azerty.
Password and his confirmation are in Qwerty.

Some tests

If you set all fields with

secureTextEntry
={true}

Keyboard locale does not change, and stay Azerty for each one.

Any help is welcome.

[yohannpoli]

After some investigations, it seems that the problem only appear when i have 2 input with the secureTextEntry in the the same view.

[juspriet]

Same problem for me. But only IOs !!

[sepion02]

Same here I can confirm that it only occur in IOS and when there is two secureTextEntry input in the same form. Any workaround so far ?

[yohannpoli]

At moment, i removed the second secure input and replace it by a "show password feature".

[AndreyPatseiko]

If you collapse your application and come back, you can get crash app.

[kddc]

Same Problem here. Doesnt have any impact if those fields are placed in different components as well.

[kddc]

I just found out, that this problem does not occur when the one of the fields is set to editable={false}. So i toggle the editable property based on which text input field i clicked. Had to put a TouchableWithoutFeedback component on top, as the TextInput ignores the click events, when it's disabled, so it looks something like this.

...
<TextInput />
<View style={{ position: 'relative' }}>
  <TextInput
    secureTextEntry={true}
    editable={this.state.current === 4}
  />
  {this.state.current !== 4 && (
    <TouchableWithoutFeedback onPress={() => this.setState({ current: 4 })}>
      <View style={{ height: '100%', width: '100%', position: 'absolute' }}/ >
    </TouchableWithoutFeedback>
  ) || null}
</View>
<View style={{ position: 'relative' }}>
  <TextInput
    secureTextEntry={true}
    editable={this.state.current === 5}
  />
  {this.state.current !== 5 && (
    <TouchableWithoutFeedback onPress={() => this.setState({ current: 5 })}>
      <View style={{ height: '100%', width: '100%', position: 'absolute' }}/ >
    </TouchableWithoutFeedback>
  ) || null}
</View>
...

[AndreyPatseiko]

Thanks men!! It's help me.

[chawax]

I have the same problem but only on simulators. No problem when running on a real device. Same for you ?

[ishigamii]

Hi, I am actually having the same problem and here is some more informations about it :

First of all this issue is related to the latest version of iOS starting with iOS 12.0 and more (I wasn't experimenting this issue using the iOS 11.1)

My current project is using react-native 55.4 and I am having the same problem with it.
For my test I created a new project with the newest version of react-native 👍

react-native init test577

Package.json

{
  "name": "test577",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.1",
    "react-native": "0.57.7"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.50.0",
    "react-test-renderer": "16.6.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Code

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

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

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <TextInput placeholder={'email'} />
        <TextInput secureTextEntry={true} placeholder={'password'} />
        <TextInput secureTextEntry={true} placeholder={'confirm password'} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Just the simple default example with the bug as describe before.

In addition we can see that the problem seems to be cause by the secureTextEntry={true} only when you have two or more (the behavior is actually not very logical)

So if you change the code and keep only two fields as follow, it will work perfectly :

        <TextInput placeholder={'email'} />
        <TextInput secureTextEntry={true} placeholder={'password'} />

As soon as you add another TextInput with a secureTextEntry following another of the same type like in the example the keyboard starts to bug as described.

With Three :

        <TextInput placeholder={'email'} />
        <TextInput secureTextEntry={true} placeholder={'password'} />
        <TextInput secureTextEntry={true} placeholder={'confirm password'} />
        <TextInput secureTextEntry={true} placeholder={'reconfirm password'} />

The first one and last one keeps the keyboard as it is and the two others change the keyboard.

So one way to "deal" with it to make it works is by adding a line in between the secureTextEntry as follow :

        <TextInput placeholder={'email'} />
        <TextInput secureTextEntry={true} placeholder={'password'} />
        <TextInput placeholder={'foo'} />
        <TextInput secureTextEntry={true} placeholder={'confirm password'} />

In this case the keyboard keeps working properly.
I so tried to add the field and hide it with style :

Works

<TextInput placeholder={'foo'} style={{height:1}}/>

Doesn't Works

<TextInput placeholder={'foo'} style={{height:0}}/>

I also tried with other elements like a View or a Text but didn't work with these elements.

Hope all this informations will be helping to correct this bug that is pretty annoying
And that is reproduce on both Simulator and Device

I created a new issue about with a little more informations and video and screen

[tinmar33]

Well found ! thanks for the trick.

The solution : <TextInput placeholder={'foo'} style={{height:1}}/> doesn't work for me

[ishigamii]

I also open another issue about it but that's a very annoying bug :s
I created another issue about it but still no answer

[rajivshah3]

This looks like an iOS bug. It's happening in native apps as well: https://stackoverflow.com/q/52701160/3188334

[slorber]

I also had the problem on iOS, with Expo SDK32, real device.

Adding this between the 2 consecutive password inputs did solve the problem:

            <TextInput
              style={{ width: 0, height: 0 }}
            />

[alloy]

As noted by @rajivshah3, this appears to be a upstream iOS bug, i.e. it affects non-RN code as well:
https://stackoverflow.com/q/52701160/3188334

I did a quick search through https://openradar.appspot.com but couldn’t quickly find any reports for this. I would suggest all of you affected take a minute to report the bug to Apple–and it would be great if you would copy the report into [openradar](https://openradar.appspot.com and link it here.

For now, in an effort to reduce the number of open issues in the issue tracker, I’ll close this ticket.

[Jhony-Reyes]

Hi, I solved this as follows, this isn't the best but it works for me

<TextInput secureTextEntry style={{ zIndex: 0 }} />
<View style={{ zIndex: 2, marginTop: -30, paddingTop: 10,}}>
     <TextInput secureTextEntry />
     <TextInput secureTextEntry  />
</View>