4

Normal view Landscape view - full screen edit In my react-native android app, This is the same text box in portrait & Landscape views. I have used selectionColor & underlineColorAndroid properties to set the font color.

<TextInput selectionColor={FormElements.textInputSelectionColor} underlineColorAndroid={FormElements.textInputSelectionColor} placeholder={"Email Address"} placeholderTextColor={FormElements.textInputPlaceholderColor} keyboardType="email-address" value={this.props.email}/>

But the issue is in the full screen edit (on landscape mode) it's hard to read in white background.

So I want either to change make full screen edit background color or text color back to black on full screen.

I tried, but couldn't find a solution yet. Cam someone please give me a solution for this?

This full screen popup doesn't come up only landscape mode. it comes up when ever there is not enough space to occupy the keyboard.

Lakshitha Ruwan
  • 949
  • 1
  • 9
  • 12

3 Answers3

2

I was encountering this issue too. After a few hours of exploring I found this property of React Native TextInput "disableFullscreenUI"

In my case I only want the normal input editing and don't show the Fullscreen editor.

<TextInput disableFullscreenUI={true} />

and the fullscreen mode will go away upon edit then the editing will remain inside the TextInput.

Hope this helps

jayson.centeno
  • 835
  • 11
  • 15
0

There are libs such as react-native-orientation https://github.com/yamill/react-native-orientation/ which allow you to check if the user changed the screen orientation. It would be possible to apply different styles based on the orientation.

However, for the scenario you mentioned, I don't think it would be user friendly to change colors depending on the orientation. I'd recommend you to use a standard color combination that looks fine in all resolution and orientations.

Hope it helps.

soutot
  • 3,531
  • 1
  • 18
  • 22
  • 1
    Thanks, But I have seen apps does that. It's actually not about the orientation of the screen. I can check the orientation using onLayout event. Issue here is, this full screen editor pops up when there is not enough space to occupy the keyboard. I have seen some apps has text box background black and text is white. when full screen editor, it becomes black text in white background. – Lakshitha Ruwan Sep 12 '17 at 07:45
0

This was an issue with RN. I have updated my app to RN V50.0 (earlier it was V47.0). Now the above issue is not there anymore. TextBox shows black color fonts when it's popped up.

Lakshitha Ruwan
  • 949
  • 1
  • 9
  • 12