Web Support

It's possible to launch Reanimated in a web browser. For that case all of the functionalities are implemented purely in JavaScript, hence the efficiency of the animations might be lower.

Example app

If you want to start the example applications from the reanimated repository you need to run the following commands inside respository root:

yarn && yarn build

Then run inside the apps/web-example directory:

yarn start

Webpack support

If you want to use Reanimated in a webpack app you should adjust your webpack config.

Example webpack config file with Reanimated support:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: ['babel-polyfill', './index.js'],
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './index.html',
    }),
    new webpack.EnvironmentPlugin({ JEST_WORKER_ID: null }),
    new webpack.DefinePlugin({ process: { env: {} } }),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-react',
              { plugins: ['@babel/plugin-proposal-class-properties'] },
            ],
          },
        },
      },
    ],
  },
  resolve: {
    alias: { 'react-native$': 'react-native-web' },
    extensions: ['.web.js', '.js'],
  },
};

Web without the Babel plugin

caution

We strongly recommend not opting out of the Worklets Babel plugin, as it is the only configuration we actively test.

It is possible to use Reanimated without the Worklets Babel plugin (react-native-worklets/plugin) on the Web, with some additional configuration.

Reanimated hooks all accept optional dependency arrays. Under the hood, Reanimated uses extra data provided by the Worklets Babel plugin to automatically infer these dependencies for you.

In order to use Reanimated without the Worklets Babel plugin, you need to explicitly pass the dependency array whenever you use a Reanimated hook.

Passing a dependency array is valid on both Web and native. Adding them will not negatively impact iOS or Android.

Make sure the following hooks have a dependency array as the last argument:

• useDerivedValue
• useAnimatedStyle
• useAnimatedProps
• useAnimatedReaction

For example:

const sv = useSharedValue(0);
const dv = useDerivedValue(
  () => sv.value + 1,
  [sv] // dependency array here
);

Be sure to pass the dependency itself (sv) and not sv.value to the dependency array.

ESLint Support

When you use hooks from React, they give you nice suggestions from ESLint to include all dependencies. In order to add this support to Reanimated hooks, add the following to your ESLint config:

{
  "rules": {
    "react-hooks/exhaustive-deps": [
      "error",
      {
        "additionalHooks": "(useAnimatedStyle|useDerivedValue|useAnimatedProps)"
      }
    ]
  }
}

info

This assumes you've already installed the react-hooks eslint plugin.

If you're using ESLint autofix, the ESLint plugin may add .value to the dependency arrays, rather than the root dependency. In these cases, you should update the array yourself.

const sv = useSharedValue(0);

// 🚨 bad, sv.value is in the array
const dv = useDerivedValue(() => sv.value, [sv.value]);

// ✅ good, sv is in the array
const dv = useDerivedValue(() => sv.value, [sv]);

Solito / Next.js Compatibility

There is an experimental SWC plugin in the works. However, given that this may not work properly, you can use the Web without a Babel plugin instructions above.

Next.js Polyfill

In order to use Reanimated with Next.js / Solito, you'll need to add the raf polyfill for requestAnimationFrame to not throw on the server:

yarn add raf

Add the following to the top of your _app.tsx:

import 'raf/polyfill';