Not able to make react-native-reanimated work on web when using from a external library.

[oliviercperrier]

Hi,

I have a react-native components library that uses react-native-reanimated for animations.

When i install that library in my react native web app, animations are not working for some reason. But everything is working fine when i install react-native-reanimated directly in my react native web app and i put all my animated components inside my app code base instead of importing them from my library..

All components are loading properly, the animations are just not starting.

I followed the https://docs.swmansion.com/react-native-reanimated/docs/guides/web-support/ but i think im missing something..

Thanks

[MatiPl01]

Hey!

Do you still have this problem? Reanimated currently doesn't work on web when React StrictMode is enabled. Could you check if you use StrictMode in your app?

[oliviercperrier]

I am not using strict mode. Again everything is working fine when my reanimated components are inside my app code base. But when they are fromy component library it doesnt work.

[MatiPl01]

Ok, I understand.

Would you be able to prepare a repro? I wonder if you set up dependencies properly.
Does your components library include react-native-reanimated in dependencies, so that it is automatically installed with the library (not recommended) or does it require installing react-native-reanimated separately in your app?
If your library only exports components and the app where you use them has react-native-reanimated installed, everything should work the same as if you included your components code directly in the app.

The one thing that comes to my mind is the incorrect babel/webpack setup. Don't you mind sharing your configs so that I can see if they are correct?

[oliviercperrier]

@MatiPl01 I currently dont have a repro, but ill try to make one.

My component library does include react-native-reanimated as a peer dependencies. I use that component library with my other app which is an Expo application. And reanimated components are working on both web and ios native.

The app where its not working is a react-native-web app (not using expo) and the config-override is the following:

const fs = require("fs");
var path = require("path");
var webpack = require("webpack");
const { override, babelInclude, useBabelRc } = require("customize-cra");

const addBasePlugin = config => {
  config.plugins.push(
    new webpack.DefinePlugin({
      // This app is a React App but uses expo library which are react native library
      // this flag needs to be defined because of this.
      __DEV__: process.env.NODE_ENV !== "production" || true,
    })
  );

  config.resolve.fallback = {
    ...config.resolve.fallback,
    crypto: false,
  };

  config.plugins.push(new webpack.EnvironmentPlugin({ JEST_WORKER_ID: null }));

  config.output = {
    ...config.output,
    path: path.resolve(__dirname, "build"),
    chunkFilename: "static/js/[name].[contenthash].js",
    filename: "static/js/[name].[contenthash].js",
  };

  config.ignoreWarnings = [/Failed to parse source map/];

  return config;
};

module.exports = override(
  useBabelRc(),
  addBasePlugin,
  babelInclude([
    path.resolve(path.join(__dirname, "src")),
    fs.realpathSync(path.join(__dirname, "node_modules", "expo-clipboard")),
    fs.realpathSync(path.join(__dirname, "node_modules", "victory")),
    fs.realpathSync(path.join(__dirname, "node_modules", "victory-native")),
    fs.realpathSync(path.join(__dirname, "node_modules", "react-native-reanimated")),
    fs.realpathSync(path.join(__dirname, "node_modules", "react-native-collapsible")),
    fs.realpathSync(path.join(__dirname, "node_modules", "react-native-confirmation-code-field")),
    fs.realpathSync(path.join(__dirname, "node_modules", "@budgeinc/budge-ui-core", "src")),
    fs.realpathSync(path.join(__dirname, "node_modules", "@budgeinc/budge-ui-hooks", "src")),
    fs.realpathSync(path.join(__dirname, "node_modules", "@budgeinc/budge-ui-styling", "src")),
    fs.realpathSync(path.join(__dirname, "node_modules", "@budgeinc/budge-ui-utils", "src")),
  ])
);

And my babel config:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["@babel/plugin-proposal-export-namespace-from", "react-native-reanimated/plugin"],
  };
};

@budgeinc/budge-ui-core is the library with reanimated components.