Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reanimated Stops Working Completely on iOS #6371

Closed
phantom-xrn opened this issue Aug 4, 2024 · 4 comments · Fixed by #6442
Closed

Reanimated Stops Working Completely on iOS #6371

phantom-xrn opened this issue Aug 4, 2024 · 4 comments · Fixed by #6442
Assignees
@bartlomiejbloniarz
Labels
Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snippet of code, snack or repo is provided Reproducible 🎉

Comments

@phantom-xrn
Copy link

Description

Reanimated completely stops working after a while on production on iOS. I've attached a video and a minimum reproducible repo.

Some thoughts:

  • This bug occurs 100 out of 100 times with Video but if you remove it, it only happens around 1 out of 100 times.
  • Occurs with both react-native-video and expo-av.
  • Once the bug occurs everything that touches reanimated stops working but everything else including the native Animated API works fine.
  • Only occurs on iOS on release mode on actual device.
IMG_0132.3.mp4

Steps to reproduce

Clone https://github.com/phantom-xrn/reanimated-bug/tree/main

  1. Run it on release mode on an 120hz iOS device(Replicated on 14 pro/15 pro/15 pro max but not on 12 mini/13)
  2. Wait for the video to start playing.
  3. Press and Long Press on the bottom two cards a few times.
  4. Reanimated will stop working after a while. The buttons will not scale anymore when pressed and any component that uses reanimated like bottom sheets stop working.
  5. Only error on Xcode console is Unbalanced calls start/end for tag 19

Snack or a link to a repository

https://github.com/phantom-xrn/reanimated-bug/tree/main

Reanimated version

3.14.0

React Native version

0.73.6

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo Dev Client

Architecture

Paper (Old Architecture)

Build type

Release app & production bundle

Device

Real device

Device model

Iphone 15 Pro

Acknowledgements

Yes
@github-actions github-actions bot added Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snippet of code, snack or repo is provided labels Aug 4, 2024
@phantom-xrn
Copy link
Author

Just added a $512 sponsorship and am happy to pay $128/hour for the time to fix this. This is affecting us in production and would really appreciate if you guys could prioritize the issue.

@tomekzaw
Copy link
Member

tomekzaw commented Aug 5, 2024

Hi @phantom-xrn, thanks for reporting this issue as well as preparing the minimal reproducible example.

Could you please contact us at projects@swmansion.com? We'd be happy to prioritize work this issue.

@bartlomiejbloniarz bartlomiejbloniarz self-assigned this Aug 8, 2024
@bartlomiejbloniarz bartlomiejbloniarz mentioned this issue Aug 22, 2024
Merged
@bartlomiejbloniarz
Copy link
Contributor

bartlomiejbloniarz commented Aug 22, 2024 •
edited
Loading

Hi @phantom-xrn

I prepared a PR #6442 that should resolve this issue. We might need some time to get it merged, since it has to do with an important part of our logic. Until then you can use this patch on your app.
react-native-reanimated+3.15.0.patch

github-merge-queue bot pushed a commit that referenced this issue Aug 28, 2024
@bartlomiejbloniarz
Change requestAnimationFrame flush condition (#6442)
6933d14 
## Summary
Currently we schedule`rAF` flush when the first callback is added to the
list. However the flush method can also be called by an event, meaning
that sometimes we have a flush scheduled to run on a given frame, but
the callbacks array is empty. If then, another callback is requested,
the array will contain 1 element, triggering another flush request (even
though one is already scheduled). To prevent this, from causing
countless requests on a singe frame we check the frame timestamp and
abort if it's repeated.

This approach unfortunately causes some problems when video is playing
in the app. On iPhone devices sometimes the displayLink can fire its
callback twice in a single frame (with the same timestamp). This leads
to us cancelling the `rAF` flush, which means that until an event
triggers a flush, none updates from reanimated will come through.

This PR changes the way we request a flush. Instead of checking the
callbacks array size, we instead remember whether a flush was requested
and request a new one only when there was no request. This prevents us
from requesting unnecessary flushes when an event has caused the
callbacks array to be emptied, while also allowing for repeated frame
timestamps.

closes #6371 

## Test plan

Check for regressions in the example app and in this example:
https://gist.github.com/kmagiera/b2df85f9512951f5e6ceee7bc569f5f1
tjzel pushed a commit that referenced this issue Aug 28, 2024
@bartlomiejbloniarz @tjzel
Change requestAnimationFrame flush condition (#6442)
eaf40d5 
## Summary
Currently we schedule`rAF` flush when the first callback is added to the
list. However the flush method can also be called by an event, meaning
that sometimes we have a flush scheduled to run on a given frame, but
the callbacks array is empty. If then, another callback is requested,
the array will contain 1 element, triggering another flush request (even
though one is already scheduled). To prevent this, from causing
countless requests on a singe frame we check the frame timestamp and
abort if it's repeated.

This approach unfortunately causes some problems when video is playing
in the app. On iPhone devices sometimes the displayLink can fire its
callback twice in a single frame (with the same timestamp). This leads
to us cancelling the `rAF` flush, which means that until an event
triggers a flush, none updates from reanimated will come through.

This PR changes the way we request a flush. Instead of checking the
callbacks array size, we instead remember whether a flush was requested
and request a new one only when there was no request. This prevents us
from requesting unnecessary flushes when an event has caused the
callbacks array to be emptied, while also allowing for repeated frame
timestamps.

closes #6371 

## Test plan

Check for regressions in the example app and in this example:
https://gist.github.com/kmagiera/b2df85f9512951f5e6ceee7bc569f5f1
@bartlomiejbloniarz
Copy link
Contributor

@phantom-xrn We just published a new version of reanimated (3.15.1) that includes this fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@bartlomiejbloniarz bartlomiejbloniarz

Labels
Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snippet of code, snack or repo is provided Reproducible 🎉
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Change requestAnimationFrame flush condition software-mansion/react-native-reanimated
3 participants
@tomekzaw @bartlomiejbloniarz @phantom-xrn