search

software-mansion / react-native-svg

SVG library for React Native, React Native Web, and plain React web projects.
MIT License
7.48k stars 1.13k forks source link

How to make smooth animations on React Native and Android? #1535

Closed deepslam closed 4 months ago

deepslam commented 3 years ago

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

saggiyogesh commented 3 years 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

4yki commented 3 years ago

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

deepslam commented 3 years ago

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!

AdamGerthel commented 2 years ago

@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.

dungnguyentri3110 commented 1 year ago

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

AdamGerthel commented 1 year ago

@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.

MigueloAtla commented 1 year ago

@AdamGerthel did you get any improvement?

dungnguyentri3110 commented 1 year ago

@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 commented 1 year ago

@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.

MigueloAtla commented 1 year ago

@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 commented 1 year ago

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