rive-app / rive-app/rive-nitro-react-native
Rive view disappears before iOS native-stack transition finishes
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 154
- Forks
- 14
- Avg merge
- 2d 19h
- Merged PRs (30d)
- 4
Description
Submission checklist
- I have confirmed the issue is present in the latest version of
@rive-app/react-native - I have searched the documentation and forums and could not find an answer
- I have searched existing issues and this is not a duplicate
Description
Description
On iOS, the contents of RiveView disappear immediately when an outgoing screen unmounts during a React Navigation native-stack back transition. The rest of the outgoing screen remains visible until the native transition finishes, leaving an empty area where the moving Rive animation was rendered.
This is visually noticeable because the animation disappears before the screen is closed, leaving an empty area there.
On Android, the Rive animation appears to remain visually consistent with the rest of the outgoing screen.
Environment
@rive-app/react-native: 0.4.19- React Native: 0.85.3
- React: 19.2.3
@react-navigation/native: 7.3.7@react-navigation/native-stack: 7.17.9react-native-screens: 4.19.0- New Architecture: enabled
- Hermes: enabled
- Xcode: 26.5
- iOS version: [26.5]
- Simulator: iPhone 17 Pro
- Device: any device, including 18.7.7 iOS and newest 26.5.2 iOS
Reproduction
- Create two plain screens in a native-stack navigator.
- On the first screen, add a button that navigates to the second screen.
- On the second screen, render an autoplaying Rive file with
useRiveFileandRiveView. - Add a button that calls
navigation.goBack(). - Open the screen with a RiveView and tap Go back while the animation is moving.
- During the iOS back transition, observe the Rive content disappear before the outgoing screen finishes closing.
Note: This issue persists even if you remove the navigation animations completely.
Expected behavior
The Rive animation should remain visible as part of the outgoing screen until the native-stack close transition has visually finished.
Workaround tested
As an experiment, I patched the package to postpone native resource disposal by
200 ms on iOS only. I delayed the calls to callDispose in the unmount cleanup
paths for RiveView and useRiveFile, and applied the same delay to disposals
managed by useDisposableMemo. This keeps the animation visible through the
screen transition in my testing, and reopening the screen continues to work.
See the attached recordings how it works with and without this workaround.
I also noticed that the internal useDisposableMemo implementation already
has a cancellable pendingDisposal mechanism. In the unmodified package it
uses setTimeout(0) in development to support Fast Refresh and Strict Mode,
while production cleanup remains synchronous. The hook is internal and does
not appear to be part of the public API, and RiveView and useRiveFile have
their own disposal paths.
Questions
- Is there a supported way to keep the native Rive view alive until an iOS native-stack transition has completed, without patching the package?
- Is the immediate unmount disposal expected on iOS, or could disposal be coordinated with the native view removal/transition lifecycle?
- Would it make sense for the package to expose a supported deferred-disposal option or lifecycle API, or to extend the internal pending-disposal behavior to this case?
Recording
rive-animation-disappearing-issue
https://github.com/user-attachments/assets/891b4c0f-0fc0-47a2-bd7f-686f6d806410
rive-animation-patch
https://github.com/user-attachments/assets/27bc0c0b-2ec5-460c-952a-b916b31f3ae7
Previous working version
No response
Reproduction steps / code
No response
Upload your reproduction files / stack trace
No response
Source .riv / .rev file
No response
Screenshots / video
No response
@rive-app/react-native version
0.4.19
Platform
iOS only
React Native version
0.85.3
React Native environment info
Expo setup
No — bare React Native
Expo SDK version (if applicable)
No response
iOS device & OS version (if applicable)
No response
Android device & OS version (if applicable)
No response
Additional context
No response
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 two-screen React Navigation native-stack case, then trace the RiveView and useRiveFile unmount cleanup paths, callDispose, and useDisposableMemo's pendingDisposal behavior. Compare iOS disposal with the native-stack transition lifecycle; done means the Rive content remains visible through the outgoing screen's close transition without breaking reopening or cleanup.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ios, react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100