React-native: [iOS] TextInput default text color change to white when running on real device

[thormengkheang]

React Native version:

System:
OS: macOS 10.15.2
CPU: (4) x64 Intel(R) Core(TM) i5-4570R CPU @ 2.70GHz
Memory: 69.59 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 13.5.0 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.13.4 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 23, 25, 26, 27, 28
Build Tools: 23.0.1, 23.0.2, 25.0.0, 25.0.1, 25.0.2, 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
System Images: android-23 | Google APIs ARM EABI v7a, android-23 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom
IDEs:
Xcode: 11.3/11C29 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5

Steps To Reproduce

1. git clone [email protected]:james1888/RnTextInputBug.git
2. cd RnTextInputBug
3. npm start
4. npm ios
5. open xcode
6. connect real device
7. run on real device

On simulator

On real device

Describe what you expected to happen:

Default TextInput text color should be black on iOS

link to a repository:
https://github.com/james1888/RnTextInputBug

[Alexheibai]

me too; ios iphone XR device;TextInput default color was white,can't see it any more! simulator was ok,android was ok

[thormengkheang]

me too; ios iphone XR device;TextInput default color was white,can't see it any more! simulator was ok,android was ok

Yes it's working fine on Android and iOS Simulator but not on iOS real device.

[Alexheibai]

me too; ios iphone XR device;TextInput default color was white,can't see it any more! simulator was ok,android was ok

Yes it's working fine on Android and iOS Simulator but not on iOS real device.

just add +color= "#333"
+placeholderTextColor="#666"
it would work well on ios real devices;solve it! just to try

[akshit5230]

Looks like dark mode is turned on on the device. It happened with me too and I found out that if we don't specify color property to style of text, it defaults to white in dark mode and black in normal mode. Previously it only defaulted to black. So need to explicitly provide color to your texts and textinputs.

[KingAmo]

same problem here, seems it is dark mode to blame
see https://github.com/facebook/react-native/issues/27437#issuecomment-564328615

[thormengkheang]

me too; ios iphone XR device;TextInput default color was white,can't see it any more! simulator was ok,android was ok

Yes it's working fine on Android and iOS Simulator but not on iOS real device.

just add +color= "#333"
+placeholderTextColor="#666"
it would work well on ios real devices;solve it! just to try

Yes have to placeholderTextColor props and color style explicitly.

[thormengkheang]

Looks like dark mode is turned on on the device. It happened with me too and I found out that if we don't specify color property to style of text, it defaults to white in dark mode and black in normal mode. Previously it only defaulted to black. So need to explicitly provide color to your texts and textinputs.

Yep, got it now thanks.

[thormengkheang]

same problem here, seems it is dark mode to blame
see #27437 (comment)

Yep it happened when I upgraded to 0.61. I didn't see any mention of that in the changelog.

[hbarylskyi]

I'm using react-native-datepicker package. The package is using native iOS component for showing the datepicker. There is no way to set picker's text color, so above solutions do not work for this particular case. All my users who use dark mode are not seeing the text in the picker.

[waheedakhtar694]

My problem is my input textInput area is white so in dark mode if text colour change to white by default then text is not shown with white background of textInput.

[akshit5230]

My problem is my input textInput area is white so in dark mode if text colour change to white by default then text is not shown with white background of textInput.

You can try specifying the "_color_" attribute in the styles prop of the _TextInput_. Further there's _placeholderTextColor_ prop as well.
<TextInput style={{ color="#000000" }} />

[JonnyBurger]

It would be nicer default behavior IMO if the text color is the same by default on light mode and dark mode as I think the current behavior can be unexpected and people might forget about it.

If RN would accept it I can send a PR to fix this.

For people looking for an immediate solution, we pushed a new version of react-native-normalized, our library of what we think are components with better defaults. There is also an ESLint plugin which will make sure you catch all cases.

[JonnyBurger]

Actually found the bug I believe and made a PR: https://github.com/facebook/react-native/pull/28280

[kbrandwijk]

This is one of those weird bugs that's quite simply a unintended side effect (in this case of the 'improved' dark mode support), but isn't picked up. I understand there's a workaround explicitly specifying text color, but imho the fix should have made it's way into 0.62.

[akshit5230]

I don't think they would fix it because it doesn't make sense to force the color to black. As the native iOS is handling this, they would stick to that. Otherwise this issue will occur in black backgrounds, the text would be black and couldn't be seen so we'll have to again, explicitly mention the color.
Simply said, the issue is not with dark mode, it's just with the backgrounds we set around the texts that would affect the visibility of the texts.

[kbrandwijk]

It is a breaking change in behavior for 99% of the uses of TextInput, which is what you get when you change a _default_. It's very simple, it used to be black by default, unless you specified otherwise. Apps using a background color that caused them to use a different text color have already specified it explicitly, so really only all of the cases using the (former) default are affected.

In general, these kinds of things are one of the main reasons why people are calling for a 1.x release. Until then, all bets are off, because semantic versioning allows breaking changes even in patch releases on 0.x versions :(

[JonnyBurger]

I’m sure it is intended to show a black color by default in all cases and that this is a bug. If you view my PR you can see why.

[kbrandwijk]

I am too. My comment was in reply to akshit5230.

[JonnyBurger]

Should be fixed with https://github.com/facebook/react-native/pull/28708, I suggest closure of the issue

[Moimou]

me too; ios iphone XR device;TextInput default color was white,can't see it any more! simulator was ok,android was ok

Yes it's working fine on Android and iOS Simulator but not on iOS real device.

just add +color= "#333"
+placeholderTextColor="#666"
it would work well on ios real devices;solve it! just to try

thanks a lot

[taylorkline]

In case anyone simply wants to revert to old behavior, you can disable your app's dark mode support in your Info.plist:

<key>UIUserInterfaceStyle</key>
<string>Light</string>

[weblancaster]

Thank you @Taylor123 that worked for me. I originally had the style color set but for some reason, only 1 field out of 5 worked.

[salmanullahkhan15]

I tried this:

UIUserInterfaceStyle
Light

But still having same results