React-native: TextInput: no placeholder and white font in testflight

[wkibbler]

Issue with text input not showing placeholder and the value font being while when the project is compiled and released testflight

IOS Version: 13
React Native Version: 0.60.5
React Native CLI version: 2.0.1
Xcode version: 11.2.1
[skip envinfo]

Here is the code behind the textinput
<TextInput style={styles.input} keyboardType="numeric" onChangeText={(value) => this.afunction(value)} value={this.state.value} placeholder="placeholder"/>

This is what it looks like when in a development simulator:
https://github.com/wkibbler/rn-issue-screenshots/blob/master/in-simualator.png

This is what it looks like when downloaded into an iPhoneX using testflight and ios 13:
https://github.com/wkibbler/rn-issue-screenshots/blob/master/on-testflight.jpeg
(ignore the red circle thats just a tester illustrating the issue)

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the React Native version: section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] alongside an explanation in your Environment: section.

[markwillis82]

We are also seeing this on a single iPhone 7 plus. IOS 13.2.2. It's fine in the simulator and on other devices (iPhone XS. IOS 13.1.3)

Our react-native info is:

System:
OS: macOS 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
Memory: 630.31 MB / 32.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.15.3 - /usr/local/bin/node
npm: 6.4.1 - /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, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 27.0.3, 28.0.2, 28.0.3
System Images: android-23 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-26 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5692245
Xcode: 11.2.1/11B53 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.4 => 0.60.4
npmGlobalPackages:
create-react-native-app: 2.0.2
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
react-native-rename: 2.4.1

I'm currently updating one of our other test devices to 13.2.3 to try and reproduce the issue there.

[wkibbler]

@markwillis82 let me know what you find when updating to 13.2.3

[Sanglepp]

Just a quick question: do you have dark mode enabled in your iPhone?

[wkibbler]

Yes, I had not thought of that but that seems to be the causal factor @Sanglepp

[levibuzolic]

Dark mode affects the default colour of the placeholder. You can override this behaviour by setting placeholderTextColor on the TextInput.

<TextInput placeholderTextColor="red" />

[wkibbler]

Yes that works

[annjawn]

This is 100% a bug. <TextInput/> in dark mode and "userInterfaceStyle": "automatic" will show text in white and the placeholder is barely visible, however, <TextInput multiline = {true} numberOfLines={5}/> shows the placeholder ok and doesn't change the text color regardless of whether dark mode is on or off. And I can re-create this issue at will.

And no, setting userInterfaceStyle to light as suggested in #27142 is NOT the right solution, and setting placeholderTextColor is a mere workaround.

Unfortunately, I can't show this in expo snack because app.json isn't available there, but I have three apps in my local machine and they all suffer with this issue.

Code with "userInterfaceStyle": "automatic"

<View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <TextInput placeholder="This is a placeholder" style={{height: 50, borderBottomColor: 'black', borderWidth: 1, width: '50%', marginLeft: 40, marginRight: 40}}/>    
      <TextInput 
        placeholder="This is multiline" style={{height: 50, borderBottomColor: 'black', borderWidth: 1, width: '50%', marginLeft: 40, marginRight: 40}}
        multiline={true}
        numberOfLines={1}
        />
 </View>

[JonnyBurger]

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

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