rive-app / rive-app/rive-nitro-react-native

Animation stutters when UI Thread is under heavy load

Open
#159 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

question
Dominant language
TypeScript
Stars
154
Forks
14
Avg merge
2d 19h
Merged PRs (30d)
4

Description

Description

When the JS thread is under heavy load during app initialization, the Rive animation visibly stutters/glitches. This suggests the animation tick is running on (or being blocked by) the JS thread.

Steps to Reproduce

  1. Use a Rive animation as a splash screen in a React Native (Expo) app
  2. Log in as a user that triggers a large amount of JS work on startup (e.g., a creator account that loads many queries, contexts, and subscriptions)
  3. Observe the splash screen Rive animation

Expected Behavior

The animation should play smoothly regardless of JS thread load, as the rendering/animation tick should be handled natively.

Actual Behavior

The animation stutters and glitches when the JS thread is busy processing initialization work.

Environment

  • @rive-app/react-native (rive-nitro-react-native)
  • React Native (Expo)
  • iOS

Additional Context

Comparing with Lottie (lottie-react-native), which runs its animation engine natively and is not affected by JS thread load, the Rive animation appears to be at least partially dependent on the JS thread for its animation tick.

Is there a way to ensure the animation runs entirely on the native/UI thread, decoupled from JS thread activity? Any workaround or roadmap item for this would be appreciated.

https://github.com/user-attachments/assets/7e0e5b3c-8af9-4147-8673-b07e646862ba

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the reported splash-screen animation issue in an Expo React Native app using @rive-app/react-native while initialization performs heavy JS work. Compare the animation tick behavior with the described native Lottie behavior; done means the Rive animation remains smooth under JS-thread load or the supported workaround and limitation are documented.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, react-native
Domain
mobile, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.