React Native Web Crashes (versions > 2.6.0)

Description

I’m working on a multi-platform project using the expo managed workflow, and I’ve been experiencing issues trying to get Reanimated 2 to work with the React Native Web build of the application.

The application crashes on Web when animations trigger, with the following error:

TypeError: e.LayoutAnimationRepository is undefined
    t createAnimatedComponent.js:151
    setLocalRef createAnimatedComponent.js:149
    default setAndForwardRef.js:7
    r index.js:22

Are there known compatibility issues with the more recent versions of the library, or have I made a mistake in my setup? I’ve included a link to a minimal repository.

Steps to reproduce

1. Build the web app with npx expo export:web
2. Serve the web app with npx serve web-build
3. Open localhost:3000 and submit the form without populating the input to trigger the error message animation

Snack or a link to a repository

https://github.com/tmlamb/my-expo46-app

Reanimated version

2.9.1

React Native version

0.69.4

Platforms

Web

JavaScript runtime

No response

Workflow

Expo managed workflow

Architecture

No response

Build type

No response

Device

Real device

Device model

No response

Acknowledgements

Yes

[tomekzaw]

Hey @tmlamb, thanks for reporting this issue and sorry for late response. Using the repro you have provided I was able to reproduce the bug. I will try to investigate this issue further.

Edit: Should be fixed with #3464. See PR description for more details.

Note: Currently, Layout Animations are available only on Android and iOS. On web, they should be no-op.

[tmlamb]

@marianif, I’ve also had success with running the web dev server with expo start. However, the issue seems to be specific to serving the exported production build. Have you tried the steps to reproduce from the issue description?

Build the web app with npx expo export:web Serve the web app with npx serve web-build Open localhost:3000 and perform some action in the app that triggers an animation.