rive-app / rive-app/rive-nitro-react-native
Animation stutters when UI Thread is under heavy load
Nobody has claimed this yet.
- 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
- Use a Rive animation as a splash screen in a React Native (Expo) app
- 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)
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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