Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: Rewrite Web Support page #6516

Merged
merged 4 commits into from
Sep 18, 2024
Merged

docs: Rewrite Web Support page #6516

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
52aa43d
rewrite webSupport page
patrycjakalinska Sep 12, 2024
97b2215
small adjustments to Admonitions
patrycjakalinska Sep 17, 2024
b3b1187
sentence adjustments
patrycjakalinska Sep 17, 2024
1235c04
review adjustments
patrycjakalinska Sep 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 65 additions & 25 deletions packages/docs-reanimated/docs/guides/web-support.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,45 +4,77 @@ title: Web Support
sidebar_label: Web Support
---

import DocsCompatibilityInfo from '../_shared/_docs_compatibility_info.mdx';

<DocsCompatibilityInfo />
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

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.

Reanimated for Web requires the following configuration steps. You need to add [`@babel/plugin-proposal-export-namespace-from`](https://babeljs.io/docs/en/babel-plugin-proposal-export-namespace-from) as well as Reanimated Babel plugin to your `babel.config.js`.
### Step 1: Install the package

```bash
yarn add @babel/plugin-proposal-export-namespace-from
```
Install [`@babel/plugin-proposal-export-namespace-from`](https://babeljs.io/docs/babel-plugin-transform-export-namespace-from):

```js {5,6}
module.exports = {
presets: [
...
],
plugins: [
...
'@babel/plugin-proposal-export-namespace-from',
'react-native-reanimated/plugin',
],
};
<Tabs groupId="package-managers">
<TabItem value="expo" label="EXPO" default>

npx expo install @babel/plugin-proposal-export-namespace-from

</TabItem>
<TabItem value="npm" label="NPM">

npm install @babel/plugin-proposal-export-namespace-from

</TabItem>
<TabItem value="yarn" label="YARN">

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

</TabItem>
</Tabs>

### Step 2: Add plugins to config file

Add `@babel/plugin-proposal-export-namespace-from` and Reanimated Babel plugin to your `babel.config.js`.

```js {7,8}
module.exports = {
presets: [
... // don't add it here :)
],
plugins: [
...
'@babel/plugin-proposal-export-namespace-from',
'react-native-reanimated/plugin',
],
};
```

:::caution

Make sure to list `react-native-reanimated/plugin` last.
patrycjakalinska marked this conversation as resolved.
Show resolved Hide resolved

:::

### Step 3: Launch your app

If you use
[playground](https://github.com/software-mansion-labs/reanimated-2-playground)
[playground](https://github.com/software-mansion-labs/reanimated-3-playground)
app and want to start it in the browser just type:

```shell
yarn web
```

If you want to start the example applications from the
[reanimated repository](https://github.com/software-mansion/react-native-reanimated)
you need to run the following command inside the `Example` directory:
[reanimated repository](https://github.com/software-mansion/react-native-reanimated) you need to run the following commands inside respository root:

```shell
yarn && yarn build
```

Then run inside the `apps/web-example` directory:

```shell
yarn start-web
yarn start
patrycjakalinska marked this conversation as resolved.
Show resolved Hide resolved
```

## Webpack support
Expand All @@ -51,7 +83,7 @@ If you want to use Reanimated in a `webpack` app you should adjust your `webpack

Example webpack config file with Reanimated support:

```js {6,14,15,34}
```js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

Expand Down Expand Up @@ -117,7 +149,11 @@ const dv = useDerivedValue(

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

> Babel users will still need to install the `@babel/plugin-proposal-class-properties` plugin.
:::caution

Babel users will still need to install the `@babel/plugin-proposal-class-properties` plugin.

:::

### ESLint Support

Expand All @@ -136,8 +172,12 @@ When you use hooks from React, they give you nice suggestions from ESLint to inc
}
```

:::info

This assumes you've already installed the `react-hooks` eslint [plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks).

:::

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.

```tsx
Expand All @@ -152,7 +192,7 @@ 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"](#web-without-a-babel-plugin) instructions above.
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](#web-without-a-babel-plugin) instructions above.

### Next.js Polyfill

Expand Down