[Bug] use with package that using reactNativeRanimated failed

[YOEL311]

Describe the Bug

I followed the documentation here on integrating the react-native-reanimated library with Storybook.

When I create components containing animations, everything works as expected. However, when I incorporate another package that also includes animations, the web version of the app breaks (while the native app remains unaffected).

I am using Storybook version 7, and you can find the relevant commit here.

You can view an example of my package here.

Steps to Reproduce

1. Clone the repository:

   
   git clone git@github.com:YOEL311/storybookPublic.git
   cd storybookPublic
   yarn
   yarn storybook

in web i got this error

[Reanimated] `useAnimatedStyle` was used without a dependency array or Babel plugin. Please explicitly pass a dependency array, or enable the Babel/SWC plugin.

However, removing the animation from the external library and keeping only the animation of my app resolves the issue. You can see the specific code here.

I have added the configuration for react-native-reanimated here.

[dannyhw]

@YOEL311 you have three configurations for the react native web addon you must have only one.

You should not repeat the same addon multiple times the addons list.

in your config:

    '@storybook/addon-react-native-web',
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToAlias: {
          'react-native-linear-gradient': 'react-native-web-linear-gradient',
        },
      },
    },
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToTranspile: ['react-native-reanimated'],
        babelPlugins: [
          '@babel/plugin-proposal-export-namespace-from',
          'react-native-reanimated/plugin',
        ],
      },
    },
  ],

expected config:

    {
      name: '@storybook/addon-react-native-web',
      options: {
       modulesToAlias: {
          'react-native-linear-gradient': 'react-native-web-linear-gradient',
        },
        modulesToTranspile: ['react-native-reanimated'],
        babelPlugins: [
          '@babel/plugin-proposal-export-namespace-from',
          'react-native-reanimated/plugin',
        ],
      },
    },

[YOEL311]

Hi @dannyhw Thank you for your reply. I appreciate it. I made the necessary changes, but I still encountered the same error.

https://github.com/YOEL311/storybookPublic/commit/8c936a99299efb6fc8d9eb52f59e2c12c4ab459b

[dannyhw]

@YOEL311 you still have it two times

[dannyhw]

look here remove this line 6 https://github.com/YOEL311/storybookPublic/blob/8c936a99299efb6fc8d9eb52f59e2c12c4ab459b/.storybook/main.js#L6

[YOEL311]

ok but I still got the error

[dannyhw]

Well thats strange but you can also just manually add the dependency array to your useAnimatedStyle

for example:

  const animatedStyles = useAnimatedStyle(() => ({
    transform: [{ translateX: withSpring(translateX.value * 2) }],
  }), [translateX]);

[dannyhw]

@YOEL311 I found the issue, you need to add your package to the modulesToTranspile so that the babel plugin gets applied to it or add the dependency array in the component in that package

update the modulesToTranspile to this:

     modulesToTranspile: [
          'react-native-reanimated',
          'test-package-yoel-test',
        ],

[YOEL311]

@dannyhw Thanks I have to give you my salary (: