react-native: [Samsung Galaxy S7, S7 Edge, S8] TextInput is breaking spell check red underline indicator for android devices.

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

For devices which have android’s red-underline-indicator spell check functionality turned on, it’s possible to see a rather strange behaviour for react native apps. The red underline appears for wrong words normally for all TextInput component as long as the developer is NOT using the onChangeText prop to update the string value of the state variable which is being used as the value prop of that same component. By using the onChangeText functionality to update the string value being typed in the TextInput component, the red underline indicator disappears right after, not following the standards set by the user on android’s main settings.

This is currently happening on Samsung android devices S7, S7 Edge and S8 (as stated in the issue https://github.com/facebook/react-native/issues/15590#issue-251666968 as well). Possibly this could be an issue for other android devices as well, although I don’t have more devices to test this.

.gif showing the behaviour on a Samsung Galaxy S7 Edge (please note how the red underline indicator “flashes” under the word once it’s finished being typed. This doesn’t happen on other apps in this same device):

React Native version:

System: OS: macOS 10.15.6 CPU: (8) x64 Intel® Core™ i7-4980HQ CPU @ 2.80GHz Memory: 806.82 MB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 10.14.2 - /usr/local/bin/node Yarn: 1.17.3 - /usr/local/bin/yarn npm: 6.4.1 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.9.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 14.0, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0 Android SDK: API Levels: 22, 23, 24, 25, 26, 27, 28, 29 Build Tools: 24.0.1, 25.0.0, 25.0.2, 25.0.3, 26.0.0, 26.0.2, 27.0.3, 28.0.3, 29.0.2 System Images: a…pis | Google APIs ARM EABI v7a Syste…, a…google_apis | Google APIs Intel x86 Atom Sys…, a…s_playstore | Google Play Intel x86 Atom Sys…, a…google_apis | Google APIs Intel x86 Atom Sys… Android NDK: Not Found IDEs: Android Studio: 3.2 AI-181.5540.7.32.5056338 Xcode: 12.0/12A7209 - /usr/bin/xcodebuild Languages: Java: 1.8.0_131 - /usr/bin/javac Python: 2.7.15 - /usr/local/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. Clone the repository I created to reproduce the code: https://github.com/gabcvit/ReactNativeTextInputBugExample
2. Install all dependencies (just like any react-native project)
3. Connect an android device to your computer and make sure that this device has the spell check red underline indicator turned ON on the device’s settings (in my case I’m using a Samsung Galaxy S7 Edge running android version 8.0.0)
4. Run npm run android on the project folder
5. Once the app is running on your device, type wrong words in a sequence. It’s possible to see that the red underline indicator appears after the word is finished being typed and disappears quickly right after.

Steps to illustrate how this is being caused by the onChangeText prop: 6. Now comment out the lines 56 and 57 of the App.js file, namely these ones:

https://github.com/gabcvit/ReactNativeTextInputBugExample/blob/f51923654cbcd92b227e7b28e03d1b2f3a9cfba8/App.js#L56

https://github.com/gabcvit/ReactNativeTextInputBugExample/blob/f51923654cbcd92b227e7b28e03d1b2f3a9cfba8/App.js#L57

1. Notice that the wrong words being typed now show a persistent and reliable red underline.

Expected Results

The app should always show a red underline indicator for grammatically incorrect words, if this is the configuration set in the device’s settings. Regardless if the developer is using the prop onChangeText to make changes in the value prop or not.

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

My own repository created to expose this behaviour: https://github.com/gabcvit/ReactNativeTextInputBugExample . To create this repository I simply wrote react-native init NameOfProject and edited the App.js file, so this should not be difficult to reproduce.