Closed deepslam closed 4 months ago
Hi @deepslam I'm facing the same problem, but for me, iOS animations are also very slow. UI thread FPS is running on ~ 8-10 FPS
https://github.com/react-native-svg/react-native-svg/issues/1527
check out William's blog. I'm sure you will find answers about how SVG path animations should be implemented correctly https://www.youtube.com/channel/UC806fwFWpiLQV5y-qifzHnA
check out William's blog. I'm sure you will find answers about how SVG path animations should be implemented correctly https://www.youtube.com/channel/UC806fwFWpiLQV5y-qifzHnA
Thank you so much for the link! I'm going to check it!
@deepslam I have the exact same problem, but with an animated svg circle. If I replace it with an Animated.View
there are zero frame drops but I can't use that solution because I need the circle inside the SVG (layered inbetween other elements, and that won't work with a view.
i have same problem here. I have used Path strokedashOffset to build my animation, it work well on IOS, UI frame never down alway 60 fps but on Android UI frame drop down from 60 -> 40 FPS. Also i use Reanimated2 or animated of React native both of them are the same result. How can i make animation smooth on Android like IOS. Thanks
@dungnguyentri3110 one option could be to replace react-native-svg with react-native-skia. I haven't tried it yet, but that's what I'm planning to do next in order to fix the performance issue.
@AdamGerthel did you get any improvement?
@dungnguyentri3110 one option could be to replace react-native-svg with react-native-skia. I haven't tried it yet, but that's what I'm planning to do next in order to fix the performance issue.
Thank you. I have try it, so good. Hope react-native-svg strong like that.
@AdamGerthel did you get any improvement?
I still haven't gotten to try it. Considering that Skia is the rendering engine behind Flutter - and Flutter is more performant than React Native, I have very big hopes.
@AdamGerthel did you get any improvement?
I still haven't gotten to try it. Considering that Skia is the rendering engine behind Flutter - and Flutter is more performant than React Native, I have very big hopes.
I have an app with a svg animation on the strokeDashoffset runnning at 90fps, I add another animation to other svg element, and fps drops to 10-20. I'm going to try implementing skia today. Thanks for advice.
@AdamGerthel did you get any improvement?
I still haven't gotten to try it. Considering that Skia is the rendering engine behind Flutter - and Flutter is more performant than React Native, I have very big hopes.
I have an app with a svg animation on the strokeDashoffset runnning at 90fps, I add another animation to other svg element, and fps drops to 10-20.
I'm going to try implementing skia today. Thanks for advice.
Let us know how it goes!
Hello!
I know it's a very old question. I've created an app with React Native. It's a simple roulette. I use SVG paths for the wheel and it works well on iOS.
I use react-native-svg for this component.
A few days ago I decided to port my app to Android and I was amazed by how slow it was. After research, I tuned my application:
I removed unnecessary re-renders in components I create AnimatedPath which I created with Animated.createAnimatedComponent(Path); I use just one state var for rotation angle and apply it with transform style directly to path components. I use useNativeDriver with react native animation. I read about setNativeProps and tried to do it. It seemed to me that it worked with almost the same performance as it works with useNativeDriver and transforms style.
I use standard react native animation. I read about Reanimated and Hermes. Hermes doesn't work with my app, it throws Proxy error. I tried to install proxy polyfill, but that wasn't successful. I also read that Hermes will improve starting time but not user experience.
What else should I do? I'm a newbie with Android and I don't have a performant Android phone. Now I have 30-40 FPS in UI thread and 10-20 FPS in JS (I have no idea why). Mainly, it works, but I want it smoother.
So, my questions are:
Is it okay for Android may be (not to have smooth animations)? Could it be a problem with emulator (I use Pixel 4 and I also tested with my Nokia 5.3) Any other pieces of advice are highly appreciated!
Thank you, guys!
I firstly published this question on StackOverflow, but I think this is even the better place for this discussion.
Kind Regards, Dmitry