React Native TextInput color issue in fullscreen landscape mode

Question

I have a simple TextInput in my react-native Android app. And it opens as fullscreen when focused in landscape mode. However in the fullscreen keyboard mode, both the background and foreground is white, therefore I can't see the text I'm typing:

The TextInput looks normal when it is not focused:

And this is the related code:

<TextInput
    onChangeText={this.changeText}
    value={text}
    disableFullscreenUI={false}  />

I can give it a style with black color, however in that case black color won't be visible because the TextInput is in a dark screen as you can see above. So this needs a solution like giving two colors changing on focus and blur but that really should not be the way to use TextInput.

The same issue has been posted here and here. It's mentioned that this is fixed with react-native's versions above 0.50. However I'm already using 0.63.3 and the issue is still there.

Has anyone encountered this issue? Any help would be appreciated, thanks!

false != true ... in *React-native Text input color issue in full screen editing* jayson.centeno's answer looks different than your code — Selvin, Aug 23 '21 at 12:43
Does this answer your question? [React-native Text input color issue in full screen editing](https://stackoverflow.com/questions/46166526/react-native-text-input-color-issue-in-full-screen-editing) — Selvin, Aug 23 '21 at 12:43
I have to keep disableFullscreenUI={false}. This is a requirement that the keyboard should open in fullscreen mode. That user has got rid of the problem by totally disabling fullscreen mode. The problem is in fullscreen mode and I have to keep it. — Faruk Yazici, Aug 23 '21 at 12:47
@Selvin so no it does not solve my problem because it removes fullscreen mode. I already mentioned that link in my question.. That solution does not actually solve the problem, it just uses another mode and the problem is still there for developers who use fullscreen. — Faruk Yazici, Aug 23 '21 at 12:52
I'm pretty sure that there is part of the system ... I've just check in my native (not react) app and it's working in the same way ... so the only way is to use `flagNoExtractUi` in native android code (which prolly you can achive with `disableFullscreenUI=true` in react) — Selvin, Aug 23 '21 at 12:58
When I use true, it is not opening fullscreen editor anymore but editing the TextInput inline. — Faruk Yazici, Aug 23 '21 at 13:03
by *is part of the system* i meant that you customize TextView in extract mode ... and the only solution(to having it cutomized) is not using fullscreen/extracted mode — Selvin, Aug 23 '21 at 13:05

Faruk Yazici · Accepted Answer · 2021-08-25T11:09:29.017

After struggling with this for a day, I have found a workaround. This does not actually fix the bug, but it's a small "hack" that hides the bug. However, the bug still exists with react-native's latest version. So here is a brief explanation of the bug, why some solutions don't work and how I overcame it:

TextInput inherits the applied color style in its native fullscreen editor view, whereas it should not. The native fullscreen always opens with a white background. Imagine you have a TextInput in a dark screen in your app, then you most probably have a white font color. The problem happens right in this case, the fullscreen editor opens with a white font over a white background.

The first thing comes to mind is applying a black font color. However this leads to having a black color in your dark screen as well. So it's obvious that two colors should be applied changing dynamically.
Detecting the keyboard events, applying dark color when keyboard is shown, and applying light color when keyboard is hidden would be a good idea. However, keyboardDidShow and keyboardDidHide events are NOT fired when TextInput is used with disableFullscreenUI prop. That's very strange but yes it's another bug and they are simply not fired. I can confirm this by removing the prop and seeing they are fired again.
Applying different colors in focused/blurred states would be another solution in theory. However this is leading to much more complication. Going back from the editor with back button, the input is still on focused state, and there you have to use onTouch events and it will become a never ending loop. So definitely this is not a solution in practice.

Note: This bug also does not exist on secureTextEntry TextInputs. Interestingly, TextInputs with secureTextEntry do not inherit the color style in fullscreen mode.

The solution

The workaround is conditionally placing a Text component over the TextInput, and hiding the TextInput. This way, it is possible to give different colors for the fullscreen keyboard editor, and the text displayed.

So first write a simple method that detects if the app is in landscape orientation, disableFullscreenUI is false and it's not a secure text entry.

const isFullscreenKeyboardEnabled = () =>
   props.orientation === LANDSCAPE // Write your own logic of orientation
   && props.disableFullscreenUI === false
   && !props.secureTextEntry

Add a dummy Text with an absolute position and white font color before the TextInput. It should come before TextInput because user should still be able to interact with the TextInput by clicking on it.

{isFullscreenKeyboardEnabled() &&
    <Text style={styles.textInputOverlay}>{text}</Text>}

Modify the TextInput's style. In fullscreen mode, it should simple have a zero opacity and black font color.

<TextInput
    value={text}
    disableFullscreenUI={props.disableFullscreenUI}
    style={[
        styles.textInput, isFullscreenKeyboardEnabled() && styles.textInputFullscreen
    ]}/>

This way, user will see the white text in the screen, click on it and open the fullscreen editor with black font. The trick is hiding the TextInput with black font on dark screen as above. So I hope this solution helps anyone encountering the same issue.

React Native TextInput color issue in fullscreen landscape mode

1 Answers1