Vite example

[tomhendra]

Our project involves a universal Expo app and accompanying Vite Web app which is used for admin.
We have a monorepo setup where we want to share components between apps.
We are struggling to get Reanimated working with Vite. Does anyone have a working example please?

Ideally we don't want to use Webpack as the example: https://github.com/software-mansion/react-native-reanimated/tree/main/WebExample since we are more familiar with Vite.

This is where we currently are: https://stackblitz.com/edit/vitejs-vite-zlodww?file=vite.config.ts

Any guidance would be very much appreciated!

[by-theo]

You don't seem to have the @babel/core dependency

[tomhendra]

Thanks for your input, but adding the @babel/core dependency doesn't seem to solve the problem.

[by-theo]

Screen.Recording.2024-06-20.at.06.59.10.mov

Here's what happens after I add babel core

• At first nothing changes
• When I remove width from the styles then put it back everything starts to work even if I make changes to the animation

[by-theo]

You can also simplify the vite config by using https://github.com/Bram-dc/vite-plugin-react-native-web

[NovaBG03]

When using react-native-reanimated on the web with Strict Mode enabled, the issue arises because react-native-reanimated's current version isn't fully compatible with React's Strict Mode on web platforms. You can disable the Strict Mode and it will work.

Here is more information:
#6264

[NovaBG03]

Screen.Recording.2024-09-11.at.19.38.32.mov

[by-theo]

Awesome