I'm facing an issue with react-native.
It is working correctly on the simulator and iPhone7, but it isn't working on iPhone XR.
I'm not sure if this happens for all iPhone XR.
The first one is from iPhone XR and the second one is from the simulator.
As you can see here, I'm able to select text and clear text, just they are not visible.
Can anyone help me to fix this issue?
It looks like the text has a white color.
It looks like you have dark mode enabled, which can cause the text in a <TextInput/> to show up blank (this is a React Native issue). Adding color: '#000000' to the text input styles should fix it.
Related
A lot of iOS users (mainly iOS 15, but iOS 14 also) started to report a strange behaviour: while they're typing in the login screen or signup screen, the app became blank.
Watching the videos provided, it seems that a white "something" (like a modal, but not a modal) comes from the bottom at any time they are writing inside text input and cover the full app, so the only thing the user can do it's to kill the app.
It's impossible for us to recreate this behaviour (both on simulator than real devices).
Any idea or any known issue?
react-native version: 0.63.4
Found:
It's a well-known bug of KeyboardAvoidingView on iOS when user enables "Prefer Cross-Fade Transitions". They just forgot to solve it or, at least, add a warn on KeyboardAvoidingView documentation.
https://github.com/facebook/react-native/issues/29974
(thank you Wilson!)
I've tried to run my react-native application on real device after makin it for iOS and Android emulators and found some problem. All components I tried to align by parent flex are without last one symbol or word. Even RNNavigation tabbar have troubles with displaying text.
Also items inside of flex justified at center are displaced to top of parent. Maybe who knows, where is my mistake or how to fix it?
Differences between devices
Left: Xiaomi mi9t with custom rom PixelPlus UI android 11
Right: Emulator Pixel_2_api SDK 29
PS: Now only one device has this bugs
Can‘t tell exactly whats wrong With just a screenshot.
I guesst the tab have an incorrect flex value
The Textinput might have a padding
The search bar at the bottom doesn‘t have padding
When my app is launching I can see a brief white flash when screens are changing. I have a dark theme app so it's pretty annoying to see those flashes.
I have found react-native-flash-screen module which could help me (install, link, edit MainActivity.java, import to App.js) but after installing of it my app goes to loop of rebooting.
Does someone know how to prevent white flashes, probably, on another way?
it's hard question because I have not seen your code
but
wrap your app container with a view and style that backgroundColor to black
this might help your
This is for iOS app created using react-native. I am using KeyboardAvoidingView in a form which contains a few TextInput fields. I have observed that the view is not moved high enough to accommodate the keyboard when a TextInput field towards the bottom of the screen is selected.
I created a snack that demonstrates this behavior (Link below). I have also observed that in some cases, the view is moved high enough on one iPhone but not the other. Initially, the problem was reported for iPhone 6S Plus in which users reported that the view is not moved high enough to accommodate the keyboard and in such cases, they are not able to see what they are typing the input box. When I was trying to create a snack to reproduce the problem, I found that I was able to reproduce that even on an iPhone 5s.
https://snack.expo.io/ry15dng2-
In the above snack, if you click on the TextInput box with value jug, you should see that the keyboard overlaps the input box and it is not clearly visible.
I am sorry for the quality of the snack. I just tried to create a minimal example to reproduce the problem.
How can I fix this problem?
I also experienced this issue (on Android). They key is this prop in the KeyboardAvoidingView:
/**
* This is the distance between the top of the user screen and the react native view,
* may be non-zero in some use cases. The default value is 0.
*/
keyboardVerticalOffset: PropTypes.number.isRequired,
The view does not automatically identify the offset between the top of the app frame and the top of the KeyboardAvoidingView that you are rendering, so it doesn't shift itself enough if that number is nonzero.
To fix this, either add an explicit keyboardVerticalOffset if it's known, like this...
<KeyboardAvoidingView behavior={"position"} keyboardVerticalOffset={Constants.statusBarHeight}>
... or move the KeyboardAvoidingView to the root of your component tree so that there is no offset above it.
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.
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
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.
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.