React-native render troubles - react-native

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

Related

Unknown and empty white page suddenly appears from bottom while typing

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!)

Problems with react-native-maps callout

I'm new to React Native and I'm having problems in both platforms with react-native-maps Callout. I'm using Apple maps on iOS and Google ones on Android. Callout shows title and image.
On iOS when I have several markers in the map, and some of them are very near each other, when clicking the marker the callout shows for a second but then it hides and shows the one from the nearest marker. I have searched for a solution and found people using some workarounds like setting pointerEvents="auto" but nothing worked for me.
On Android when clicking the marker the callout shows correctly but the image is not shown. I also searched and found a workaround including the image inside a but this didn't work for me at all, it works better, because the image is shown most of the times, but not always. So for now I'm only showing the title on Android.
I have tried using last react-native-maps version 0.28.0 and same behavior. I haven't tried Google Maps on iOS, I think that will be the following step if I can't find a solution.
I also tried react-native-mapbox-gl and works fine on iOS, the Callout shows correctly with title and image, but on Android I install the app and it opens for a second and then closes throwing MainActivity not found error. If I go back to the previous commit without react-native-mapbox-gl then it installs and opens correctly. I have thought also about using react-native-mapbox-gl on iOS and react-native-maps on Android. But, is it really so hard this to work with maps in React Native?
Thanks in advance.
I had the same issue and solved it adding this to the Marker
anchor={{x: 1, y: 1}}
pointerEvents="auto"

How to fix text that is not visible in react-native app

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.

keyboard pushes bottom elements upward

In my app when I select to give input to particular input field which positioned at top the keyboard pushes all my bottom element upward. I am using Ionic framework. In android platform it is solved by changing windowsoftinput to adjustpan from autoresize. How to solve this problem in case of ios platform.
you should be able to add the class hide-on-keyboard-open to the items you want to stay "behind the keyboard" you can read more about how this works here
it involves using the ionic keyboard plugin

Can we make Animated icons for iOS 7 now in Xcode?

When i saw new iOS 7.0 then i saw clock icon is on running state. So i am curious to know, that can we also make icons dynamically by Xcode?
i googled also about this but didn't found any question or hint on this.
No, we're not able to created animated Springboard icons. The following still applies to iOS7.
Changing Icon per Day
Dynamic icon iOS