Unknown and empty white page suddenly appears from bottom while typing - react-native

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

Related

Animation lags with inverted Flatlist (Expo / TypeScript)

I was trying to implement a WhatsApp like cancelling recording button.
Everything was working fine, all animations lauching correctly, start and stop recording too.
But after a few seconds (could be 10 seconds or 1 minute) pressing the gesture handler, the app freeze, all animations start to lags and FPS drop to 0.
After trying many things, I found out that it is linked with a Flatlist I have in my view. When this Flatlist is inverted, that is when everything crash.
Here is the link of the Snack https://snack.expo.dev/#mikelh997/animationtest
Just try to move the mic for at least 30 seconds on a physical device and you will see the app freeze
I am doing my tests on Android emulator and on Samsung S21 Ultra. On iOS everything seems to work fine
Thinking it was may be my packages version, I started a new project and put inside my view only a Flatlist with text items and my PanGestureHandler. All packages are up to date, even though the behavior is the same. If I remove "inverted" from my Flatlist, everything work fine.
I also tried to use Animated.Flatlist but no change (actually it's worse because inverted in Animated.Flatlist is not working correctly)
I also tried to reproduce it on Snack Expo, on my phone it crashes.
I noticed also that it is not linked to PanGestureHandler or Reanimated, because if I just create an animation with React Animated (with Animated.timing), and loop it, it does the same.
Edit : it seems like it is happening only on Android 13
After research, it is linked to Android 13, more and more people are facing this issue.
Only solution I found on Github was here, it is the only way to make it worked while waiting for a fix
style={{transform: [{rotate: '180deg'}]}} seems to be the best workaround for the time being.

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"

Appium iOS can't inspect notification layer

Im using Appium to test my notifications in my iOS app.
Im sending with another device a notification while the iOS app is in BG. Then I swipe down using :
((IOSDriver) wd).swipe(500,0,500,1000,1000);
The above works, the screen get scrolled down and I can physically see the notification. The issue is that the appium still inspects the screen below.
I checked appium inspector and it verified that it doesn't recognize nothing but the elemnts of the layer below the notifications one.
Any approach ??
As long as I know it is known limitation for iOS now.
You can get notification bar elements on Android only
But based on top comment it should be possible to wrap up with Appium since Xcode 9 introduced interaction with multiple apps, so its matter of time.
I found a workaround that fits my needs.
I found out that if I click the home button and then swipe down the notification are visible to Appium.
Because Appium not having key events for iOS, iPhone has the an accessibility option for home button, I toggled that on and I can simply click it during the test and swipe down the notification center.
I know it's not ideal but its working.
Thanks for the help.

Xcode added Default-568#2x.png

About a week ago xcode showed me some error and when I clicked to solve the problem, xcode added this picture:
My questions are: What is it good for? Why do I need it?
Thank you.
Yes you must include one.
From Apple's Interface Guidelines
To enhance the user’s experience at app launch, you must provide at least one launch image. A launch image looks very similar to the first screen your app displays. iOS displays this image instantly when the user starts your app and until the app is fully ready to use. As soon as your app is ready for use, your app displays its first screen, replacing the launch placeholder image.
Without this default image (or a LaunchScreen storyboard), your app would not take all the available screen space on iPhones with 4" displays (iPhone 5, 5s, SE). This is the default image that those iPhones would use.
Of course you can (should!) change it with the one you designed.
Runtime, leading to the top and bottom of applications were empty out a lot , because the application is based on a 320x480 size to run.

understanding Launch images iPhone/iPad

As suggested by Apple I have provided a launch image which equals to my home page iOS app.
At the moment I am testing on the iPhone simulator and I wanted to know if the same happens on real devices.
Everything works fine, however when I am in pages other than home page and I exit from application by pressing the button, then when I enter again, the launch images shows for an instant, and then suddenly the last viewed pages appears.
I wonder how can I avoid this "flickering" of pages. I don't know if this is important, but I am using Storyboards.
This is the intended behaviour if you immediately start the app again. See my answer to another Stack Overflow question on a similar matter.
To explain, the Default.png image is used when the OS is unable to take a screen shot of your last view state. Giving the OS a little longer to screen shot the app will prevent the Default.png being used. This is done so that the device does not just show a black screen, followed by your app popping in.
I am not aware of functionality to see if the OS has finished taking a screen shot. If this was possible you could place a UIImageView on top of your last view and do a more subtle fade out one you have control again.