Web Animations Broken

[nathan-ahn]

Description

Looks like web animations are broken on the newest version. I don't know the exact version this bug was introduced in, but I can confirm that our web animations were working in v1.7.6. As far as I can tell, this affects all Skia animations using Reanimated.

Expected: Blue square in reproduction slides back and forth.
Actual: Blue square in reproduction does not move.

React Native Skia Version

1.11.4

React Native Version

React Native Web: 0.19.12

Using New Architecture

• Enabled

Steps to Reproduce

https://github.com/nathan-ahn/skia-web-animation-bug

Reproducing

1. Install yarn install
2. Run web yarn web
3. See the blue square (Skia) not move
   (Pink square included to demonstrate Reanimated is working)

Notes

I usually prefer to use Expo for minimum reproducible examples but can't until #2914 is resolved. I'm using the same Solito setup to that we use in production to get Skia web to work. I don't believe that any of the Next.js workarounds are causing this issue, but happy to reproduce using Expo Router once #2914 is fixed.

Snack, Code Example, Screenshot, or Link to Repository

https://github.com/nathan-ahn/skia-web-animation-bug

[nathan-ahn]

If it helps with debugging, our Storybook usage of Skia animations is reporting the following error: "x" is read-only (where x is a shared value). I haven't been able to reproduce the error in Next.js.

[wcandillon]

Any chance we could also add it as an example app? For RN Web I have a remotion project in apps but it looks like a setup such has yours would be useful? If we have it in apps/, I could fix the issue pretty quickly I think.

…

On Wed, Feb 5, 2025 at 10:18 PM Nathan Ahn ***@***.***> wrote: If it helps with debugging, our Storybook usage of Skia animations is reporting the following error: "x" is read-only (where x is a shared value). I haven't been able to reproduce the error in Next.js. — Reply to this email directly, view it on GitHub or unsubscribe. You are receiving this email because you are subscribed to this thread. Triage notifications on the go with GitHub Mobile for iOS or Android.

[nathan-ahn]

For sure! I'll see if I can get a simpler minimum reproducible example, since Solito is a bit heavy for just an example. Ideally, I think it'd make most sense to have an Expo Router example (assuming this issue exists in Expo Router as well). However, Skia is currently broken in Expo Router due to #2914 (which I guess is another great reason for us to have it in apps).

Once I get the chance this afternoon, I'll create an Expo Router minimum reproducible app in apps to guard against both this issue and #2914 in the future. If this issue isn't reproducible in Expo Router, then I'll resort to likely a Solito or pure React Native Web reproduction of this animation bug.

[wcandillon]

If we have this to the monorepo, I think it would be very exciting 🙏

…

On Thu, Feb 6, 2025 at 3:25 PM Nathan Ahn ***@***.***> wrote: For sure! I'll see if I can get a simpler minimum reproducible example, since Solito is a bit heavy for just an example. Ideally, I think it'd make most sense to have an Expo Router example (assuming this issue exists in Expo Router as well). However, Skia is currently broken in Expo Router due to #2914 (which I guess is another great reason for us to have it in apps). Once I get the chance this afternoon, I'll create an Expo Router minimum reproducible app in apps to guard against both this issue and #2914 in the future. If this issue isn't reproducible in Expo Router, then I'll resort to likely a Solito or pure React Native Web reproduction of this animation bug. — Reply to this email directly, view it on GitHub or unsubscribe. You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS or Android.

[nathan-ahn]

Created Expo Router demo in #2949! Holding off on Solito unless absolutely necessary for reproducibility, since Solito is quite complex and can be difficult to maintain as an example. (+ Expo Router is actually mentioned in the docs for web support).