[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 git@github.com: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

[AlexKitC]

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.

[AlexKitC]

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 #27437 (comment)

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