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

Rive view disappears before iOS native-stack transition finishes

Open
#356 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug iOS
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.9
  • react-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

  1. Create two plain screens in a native-stack navigator.
  2. On the first screen, add a button that navigates to the second screen.
  3. On the second screen, render an autoplaying Rive file with useRiveFile and RiveView.
  4. Add a button that calls navigation.goBack().
  5. Open the screen with a RiveView and tap Go back while the animation is moving.
  6. 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

  1. Is there a supported way to keep the native Rive view alive until an iOS native-stack transition has completed, without patching the package?
  2. Is the immediate unmount disposal expected on iOS, or could disposal be coordinated with the native view removal/transition lifecycle?
  3. 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
Image

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

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.