Uncontrolled TextInput - color style not updating with multiline=true (ios, android) and text lost (android)

[CostachescuCristinel]

Description

It seems that TextInputs with multiline={true}, but which do not specify either value or defaultValue, behave somewhat unexpectedly on both iOS and Sndroid.

On both iOS and Android, the text color does not update even if the style prop changes and specifies a different value. This does not happen if the TextInput has multiline={false} (or no multiline prop specified). For sure, the color styling prop is affected, but I haven't tested other props.

On Android, if there is no value or defaultValue specified, the TextInput will completely loose any typed text on each re-render. If there is defaultValue specified, the TextInput will reset to the values specified by it (again, any changes immediately lost on the next re-render). This happens for both multiline={true} and multiline={false}.

Admittedly, this may not be a huge issue, there's no reason to have a TextInput with no value prop. However, in early development stages where developers only get the UI done with mostly no logic or actual data, this can be a source of issues. I have personally lost 2 hours trying to figure out why the styles did not update correctly in a custom component with complicated styling logic.

React Native version:

info Fetching system and libraries information...
System:
    OS: macOS 11.3.1
    CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
    Memory: 2.53 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.18.2 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 12.5/12E262 - /usr/bin/xcodebuild
  Languages:
    Java: 14.0.1 - /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: https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz => 0.63.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Please see the snack below for a complete test. TLDR, render multiple TextInputs with different multiline, value and defaultValue props (unspecified/undefined, and true/false), save style in state, use state as style for the inputs. update state and compare render output.

Expected Results

The TextInputs should respect the color prop in the style for both multiline={true} and multiline={false}, but only the multiline={false} will actually do. On Android, the TextInputs should keep any typed text even if no value or defaultValue is specified, but neither will.

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

https://snack.expo.io/@cristian-nxtl/uncontrolled-textinput---style-not-updating-with-multiline-true-ios-android---text-lost-android

[safaiyeh]

A bunch of these bugs seem to be related. https://github.com/facebook/react-native/issues/31573, also points to some weird state when multiline is enabled.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.