TextInput issues on Android after updating to version 0.63.0

[mhv1]

Description

After upgrading from React Native version 0.62.2 to 0.63.0 users of my app started observing duplicate words when typing on a TextInput. This happens when using Samsung keyboard with predictive typing or auto-correct enabled, making text fields practically unusable. Google keyboard seems to at least let them type normally, although some glitches are visible there too. This bug didn't happen on React Native 0.62.x and it's particularly bad for my app whose main functionality is form filling. I have tested with the latest release and the issue still exists.

After browsing possible ways to fix this I resorted to setting the TextInput's keyboardType prop to visible-password on Android, thus disabling the auto-correct and typing suggestion functionality of the Samsung keyboard. However this is just a workaround for now.

Due to the nature of my app (form filling) some memoization and re-rendering optimizations have to be done. I have provided the most minimal example of how this works on the sample repository linked below. The rationale is listed on the "Steps To Reproduce" section.

React Native version:

System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 13.24 GB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.19.0 - ~/.nvm/versions/node/v12.19.0/bin/node
    Yarn: Not Found
    npm: 6.14.8 - ~/.nvm/versions/node/v12.19.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.8.4 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.7, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 23, 25, 26, 27, 28, 29
      Build Tools: 23.0.1, 25.0.2, 25.0.3, 26.0.2, 26.0.3, 27.0.3, 28.0.3, 29.0.2
      System Images: android-27 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.7/11E801a - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_232 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.3 => 0.63.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Render multiple TextInput components on a FlatList and place it on a separate component. This will be the "Form" component and the TextInputs will be the form modules.
2. Update the form modules' values from a Redux store. Every value is assigned to the corresponding TextInput based on a unique ID and it's queried from the store using a selector.
3. The piece of the Redux store containing the form module values is also passed to the "Form" component to be used for other operations.
4. Override the "shouldComponentUpdate" method on the "Form" component to avoid it being re-rendered completely every time a form module value is updated. We only want the form module being updated to be rendered.
5. Type on any of the form modules. If using a Samsung keyboard many of the characters typed will be duplicated. Try moving the cursor to the middle of the sentence typed and try deleting some characters ans you will notice the cursor jumping back and deleting more than one character at a time. This last issue is also seen when using Google keyboard.

Expected Results

• TextInputs should behave correctly regarding on the keyboard being used.
• Values for these components should be able to be updated from a Redux store in any way necessary and overriding "shouldComponentUpdate" methods on the parent component shouldn't affect the way the text is displayed while typing.

Like I mentioned before, everything was working fine with my app prior to version 0.63.0. I noticed on the release notes some changes where made to the TextInputState but I don't see how these changes apply to my case. I need to access different sections of my Redux store, including the form module values, in many of my components.

Snack, code example, screenshot, or link to a repository:

You can see my case and how the bug is reproduced on this repository: https://github.com/MHV1/rn-text-input-issue

Thank you for your help in advance :)

[vittau]

Same here. We have just upgraded from Expo 37 to 39, and with it this major problem appeared.
Since the only publishable version (Google Play) at the moment is RN 63, this bug is literally crippling our ability to push new builds.

any news?

[wengkhing]

We are experiencing the same issue after upgrading to RN 0.63.3
However, this issue only happened to multiline input and does not affect single line input.

[jyungtong]

We are experiencing this issue. However, slightly different is that we are using redux-form with the TextInput component. We are able to solved it by populating the form state to props. In our cases here, we do this:

import { connect } from 'react-redux';

@connect(
  state => ({ ...state.form })
)
export default YourComponent;

This seems solved the issue. The first thing you probably could try out is populate the whole ...state to see if it works. Then narrow down to find out which props you are going to need it.

Hopefully this does help.

[ab-sami]

Facing the same issue after upgrading to RN 0.63.4.
Tried @jyungtong solution/suggestion but don't see much difference in our case.

[vittau]

We went through all of our apps and changed every form to Formik, mostly due to this issue. The lack of attention given to this issue is concerning.

[andordavoti]

Also facing the same issue on 0.63.4. Had to downgrade to 0.62.2 to fix the issue in the meantime.

[thaiphamvan]

Description

After upgrading from React Native version 0.62.2 to 0.63.0 users of my app started observing duplicate words when typing on a TextInput. This happens when using Samsung keyboard with predictive typing or auto-correct enabled, making text fields practically unusable. Google keyboard seems to at least let them type normally, although some glitches are visible there too. This bug didn't happen on React Native 0.62.x and it's particularly bad for my app whose main functionality is form filling. I have tested with the latest release and the issue still exists.

After browsing possible ways to fix this I resorted to setting the TextInput's keyboardType prop to visible-password on Android, thus disabling the auto-correct and typing suggestion functionality of the Samsung keyboard. However this is just a workaround for now.

Due to the nature of my app (form filling) some memoization and re-rendering optimizations have to be done. I have provided the most minimal example of how this works on the sample repository linked below. The rationale is listed on the "Steps To Reproduce" section.

React Native version:

System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 13.24 GB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.19.0 - ~/.nvm/versions/node/v12.19.0/bin/node
    Yarn: Not Found
    npm: 6.14.8 - ~/.nvm/versions/node/v12.19.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.8.4 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.7, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 23, 25, 26, 27, 28, 29
      Build Tools: 23.0.1, 25.0.2, 25.0.3, 26.0.2, 26.0.3, 27.0.3, 28.0.3, 29.0.2
      System Images: android-27 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.7/11E801a - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_232 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.3 => 0.63.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Render multiple TextInput components on a FlatList and place it on a separate component. This will be the "Form" component and the TextInputs will be the form modules.
2. Update the form modules' values from a Redux store. Every value is assigned to the corresponding TextInput based on a unique ID and it's queried from the store using a selector.
3. The piece of the Redux store containing the form module values is also passed to the "Form" component to be used for other operations.
4. Override the "shouldComponentUpdate" method on the "Form" component to avoid it being re-rendered completely every time a form module value is updated. We only want the form module being updated to be rendered.
5. Type on any of the form modules. If using a Samsung keyboard many of the characters typed will be duplicated. Try moving the cursor to the middle of the sentence typed and try deleting some characters ans you will notice the cursor jumping back and deleting more than one character at a time. This last issue is also seen when using Google keyboard.

Expected Results

• TextInputs should behave correctly regarding on the keyboard being used.
• Values for these components should be able to be updated from a Redux store in any way necessary and overriding "shouldComponentUpdate" methods on the parent component shouldn't affect the way the text is displayed while typing.

Like I mentioned before, everything was working fine with my app prior to version 0.63.0. I noticed on the release notes some changes where made to the TextInputState but I don't see how these changes apply to my case. I need to access different sections of my Redux store, including the form module values, in many of my components.

Snack, code example, screenshot, or link to a repository:

You can see my case and how the bug is reproduced on this repository: https://github.com/MHV1/rn-text-input-issue

Thank you for your help in advance :)

I removed the props value and add defaultValue in TextInput. It's work for me

[fabOnReact]

Please, is it possible to merge this PR in the next version ?

To answer the question of when the pr #29070 which fixes this issue will be released in the next version of React Native, I suggest you to follow the discussions at https://github.com/react-native-community/releases/issues by subscribing to those threads. The process of releasing a new version with a bug fix is the following:

• an Issue is opened in facebook/react-native
• a contributor writes a Pull Request to fix/close the react-native Issue
• The Pull Request is merged in Master
• For each realease (the upcoming one is 0.64.1) there will be a separate discussion on https://github.com/react-native-community/releases/issues where anyone can request a commit to be cherrypicked from master. The link need to be from the a commit from master (for ex. [Android] Adding Hyphenation Frequency prop for Text component #29157 (comment)) and not a Pull Request not yet merged in master ☮️ 🙏

[andordavoti]

React Native v0.64.1 is out and there is still no fix. This is very concerning...

[sannajammeh]

Dark mode 6months ETA. And this since Nov 30th.
Refactoring to Flutter.