Skip to content

Usage of depracated function breaks animations #2705

@patrycjakalinska

Description

@patrycjakalinska

Environment

react-native -v: 0.79.6
npm ls react-native-macos:react-native-macos@0.79.0
node -v: v22.14.0
npm -v: 10.9.2
yarn --version: 1.22.22
xcodebuild -version: Xcode 16.4
Build version 16F6

Steps to reproduce the bug

  1. Disable react-native-macos+0.79.0.patch - you can move it from the folder, or remove it.
  2. yarn install
  3. Install pods
  4. Build the app
  5. You will see Bokeh (a lot of circles) that will not move. (And they should).

Expected Behavior

To see expected behavior, apply the react-native-macos+0.79.0.patch, and run the app. The Bokeh (circles) will move, as its expected behavior.

expected.mov

Actual Behavior

Bokeh (the circles) do not move - the animation is not progressing.

bug.mov

The main culprit of this is usage of a depracated function CVDisplayLinkGetCurrentTime in RCTPlatformDisplayLink.m. Because it is depracated it now returns 0 therefore timestamp always return 0.

timestamp is used in Reanimated for animations to work as it signals the next frame has come, and the animation progress accordingly. With the same timestamp = 0 given to Reanimated each time the animation cannot calculate and apply progress.

Reproducible Demo

https://github.com/patrycjakalinska/macos-animation

Reproduction is in repro folder. The repo includes a patch for worklets, which is necessary for the app to function correctly since support for macOS in Reanimated is still under development.

The repro also includes patch for react-native-macos - it contains the proposed fix.

Additional context

To see the bug - disable react-native-macos patch.
To see expected behavior - enable `react-native-macos patch.

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions