CODEWITHSUNDEEP
performancereact-native
Logister
Logister

Reputation: 1904

React-Native: loading animation performance

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

  1. User presses a button that sends out a backend api call. (E.g. they press the login button after entering credentials)
  2. The app replaces the button with an animation that indicates processing. (E.g. some spinner replaces the login button)
  3. 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?

Upvotes: 1

Views: 267

Answers (1)

sooper
sooper

Reputation: 6039

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

Upvotes: 1

Related Questions