TextInput issues on Android after updating to version 0.63.0

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 😃

[andordavoti]

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

[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.