React-Native: loading animation performance

Question

I have an app that in several places has the following pattern:

User presses a button that sends out a backend api call. (E.g. they press the login button after entering credentials)
The app replaces the button with an animation that indicates processing. (E.g. some spinner replaces the login button)
The api call returns some result, triggering a navigation to the next scene.

The problem is that I suspect that this is bad for performance. At any given time the app is either rendering both a spinner while making api calls or the app is rendering a spinner while having a navigation animation to the next scene. I'm noticing substantial frame-rate decline during these kinds of transitions.

React-Native's performance documentation suggests using LayoutAnimation instead of Animation to improve performance. However, the documentation is lacking and I cant figure out how to get LayoutAnimation to rotate things. I could also stop rendering the spinner during the scene transitions, but I find that this makes things look weird and only solves half the problem.

I can't be the first person with this problem. (1) How has it been solved before? (and/or 2) How can I get LayoutAnimation to rotate the spinner?

Not sure you'd be able to achieve rotation with LayoutAnimation in the current version. Have you tried settings useNativeDriver to true? — sooper
– sooper, Commented Jul 14, 2017 at 1:01
@sooper useNativeDriver did the trick. Thank you! If you post your answer below, I'll mark yours as correct. — Logister
– Logister, Commented Jul 14, 2017 at 23:05

sooper · Accepted Answer · 2017-07-15 10:30:58Z

1

Try setting useNativeDriver to true in your animation. LayoutAnimation doesn't currently support rotation but there may be plans for it

answered Jul 15, 2017 at 10:30

sooper

6,0496 gold badges43 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-Native: loading animation performance

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related