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.
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'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"
I am trying to work around the shadow limitation on react native for android. Basically I need box shadows. My solution was to build a native ui component (java) with which I can create box shadows.
Now I ran into a weird bug. In a bare minimum app, with nothing but just some navigation and the box shadow ui components, the navigation is extremely laggy/ drops frames, when the app has to load the box shadow component.
The weird thing is. This just happens on some phones. From my tests so far I can say the native component runs smoothly on:
Fairphone 3 (Snapdragon),
Samsung galaxy s21 (Snapdragon) and
xiaomi redmi note 9 (Snapdragon)
The app drops frames on:
Samsung galax s41 (Mediatek)
Huawei mate 20 (Kirin)
Samsung galaxy s7 (Snapdragon)
Does anyone have an idea what the Problem could be? Does it perhaps have something to do with the CPU?
I am really gratefull for every tip and idea. I really have no idea what the Problem could be.
Thanks!
You have a problem of optimization.
Try to do a Profiling of your app on different phones to find the process that is more time consuming.
i created simple app in react native ,everything works fine
but when the app go to background then active again
Scrollview not working smoothly
can some one have solution?
Probably not the direct solution, but did you consider using <FlatList> instead of <ScrollView> given the former is more performant when it comes to rendering long lists.
i find the solution
i Uninstalled react-native-fbsdk and everything works fine
As soon as list is rendered onEndReached is being called without even scrolling the list. Initially 40 records are rendering and according to my tab device height I am able to see 17 records at a time. That means still there are 23 records to scroll.
I have followed this Git solution. But that didn't work for me.
Note: this problem is occurring only in iOS Tablet. In android Mobile, Tablet and in iOS mobile working fine.
Could anybody let me know the solution to prevent this behaviour? Thanks.