web-support.md

id	title	sidebar_label
web-support	Web Support	Web Support

Since 2.0.0-alpha.7 release it's possible to launch reanimated 2 in a web browser. For that case all of the functionalities are implemented purely in javascript, hence the efficiency of the animations might drop.

Reanimated for web require following configuration steps. You need to add @babel/plugin-proposal-export-namespace-from and Reaniamted babel plugin to your babel.config.js.

yarn add @babel/plugin-proposal-export-namespace-from

module.exports = {
  ...
  plugins: [
    ...
    '@babel/plugin-proposal-export-namespace-from',
    'react-native-reanimated/plugin',
  ],
};

If you use playground and want to start the app in the browser, just type:

yarn web

If you want to start example applications from the reanimated repository you need to run a following command inside the Example directory:

yarn start-web

Webpack support

If you want to use Reanimated in webpack app you should add extra configuration to 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'],
  },
};