Im trying to add some simple animations to my app. Decided to try it with react-native-reanimated v2. I did the bare minimum and followed the installation guide/tutorial on respective expo and reanimated pages (Basically set hermes as engine and included the correct plugin last in babel plugins). The animations work great, added some entering/exiting animations on when items change in a list. Here is basically all my animation code, I wrapped my listItem in the following view.
<Animated.View
entering={LightSpeedInLeft.duration(500)}
exiting={LightSpeedInRight.duration(500)}
layout={Layout.springify()}
>
However, I am getting my Loading component displayed ontop of my other components. See error at bottom(On my phone its displayed as a black bar, but on emulator its the loading text). This behaviour is also occuring on screens where I havent implemented any animations :/
This is how my simple Loading logic is. While no data, I return Loading. Otherwise i return my normal JSX. This works flawlessly without reanimated.
if (!data) {
return <Loading />;
}
The packages relevant to this I am using are.
react-native: "0.64.3.
react-native-reanimated": "~2.3.1.
expo": "^44.0.0.
Any idea's why this happens and what I can do to fix it?
Thanks in advance
Related
I am developing a library consisting of React Native components and this library is used by a React Native application. I have a problem where I want to avoid rendering WebViews during transitions since it is causing crashes on Android. My problem occurs when the application switches to a new screen and renders a component from this component library. The component adds listeners for transitionEnd and beforeRemove. And the problem is that the transitionEnd listener doesn't always seem to get initialised soon enough for me to be able to recognise that the transition has ended and I am not able to determine if I can safely render a WebView.
Do you see a solution that already exists in react-navigation or is this perhaps a feature that should exist?
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.
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 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
I'm interested in using a slide-out vertical navigation in an app using react-native. Is there a trick to this, or is it just a matter of creating a View and adding CSS that makes it respond to a button-tap or a swipe motion?
I've gone through the UIExplorer example in the Github repo, and did not see this style of navigation within it. I am new to react (and react-native, of course). I'm not having trouble with the tutorials I've gone through, just curious if there's a "React Way" to do this, or if I ought to just hack along until I get something working. Thanks.
I work on the <Navigator> component for React Native, and I think it might fit your needs.
Check out the documentation here: http://facebook.github.io/react-native/docs/navigator.html
And the example code in UIExplorer: https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/Navigator/NavigatorExample.js
The navigator is still a work in progress, so feedback is welcome! (you can file an issue on Github and tag me, #ericvicenti)