From 059e1e00f8fcf0796d6e2d0ca5cf39a81d21bda8 Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Fri, 4 Aug 2023 08:25:37 +0200 Subject: [PATCH] Format --- docs/advanced/_category_.json | 2 +- docs/guides/_category_.json | 2 +- docs/guides/debugging_tables/tables.tsx | 6 ++-- docs/guides/web-support.md | 36 +++++++++---------- .../_category_.json | 2 +- docs/utilities/_category_.json | 2 +- 6 files changed, 24 insertions(+), 26 deletions(-) diff --git a/docs/advanced/_category_.json b/docs/advanced/_category_.json index 5b8f5bf..a0271c6 100644 --- a/docs/advanced/_category_.json +++ b/docs/advanced/_category_.json @@ -4,4 +4,4 @@ "link": { "type": "generated-index" } -} \ No newline at end of file +} diff --git a/docs/guides/_category_.json b/docs/guides/_category_.json index 7777ff3..c938f04 100644 --- a/docs/guides/_category_.json +++ b/docs/guides/_category_.json @@ -4,4 +4,4 @@ "link": { "type": "generated-index" } -} \ No newline at end of file +} diff --git a/docs/guides/debugging_tables/tables.tsx b/docs/guides/debugging_tables/tables.tsx index 2426773..261dc1b 100644 --- a/docs/guides/debugging_tables/tables.tsx +++ b/docs/guides/debugging_tables/tables.tsx @@ -1,5 +1,5 @@ -import React from 'react'; -import styles from './styles.module.css'; +import React from "react"; +import styles from "./styles.module.css"; /* Testing setup: @@ -106,7 +106,7 @@ export function SummaryTable() { ¹ - Works, but uses web implementations of functions and runs worklets on - the JS thread. This means that{' '} + the JS thread. This means that{" "} measure and Layout Animations will not be available.
² - Experimental feature (see description). diff --git a/docs/guides/web-support.md b/docs/guides/web-support.md index 216cecf..84ed5e0 100644 --- a/docs/guides/web-support.md +++ b/docs/guides/web-support.md @@ -28,13 +28,15 @@ module.exports = { If you use [playground](https://github.com/software-mansion-labs/reanimated-2-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 +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: + ```shell yarn start-web ``` @@ -46,32 +48,29 @@ 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} -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const webpack = require('webpack'); +const HtmlWebpackPlugin = require("html-webpack-plugin"); +const webpack = require("webpack"); module.exports = { - entry: [ - 'babel-polyfill', - './index.js' - ], + entry: ["babel-polyfill", "./index.js"], plugins: [ new HtmlWebpackPlugin({ - filename: 'index.html', - template: './index.html', + filename: "index.html", + template: "./index.html", }), new webpack.EnvironmentPlugin({ JEST_WORKER_ID: null }), - new webpack.DefinePlugin({ process: { env: {} } }) + new webpack.DefinePlugin({ process: { env: {} } }), ], module: { rules: [ { test: /\.(js|jsx)$/, use: { - loader: 'babel-loader', + loader: "babel-loader", options: { presets: [ - '@babel/preset-react', - { plugins: ['@babel/plugin-proposal-class-properties'] } + "@babel/preset-react", + { plugins: ["@babel/plugin-proposal-class-properties"] }, ], }, }, @@ -79,8 +78,8 @@ module.exports = { ], }, resolve: { - alias: { 'react-native$': 'react-native-web', }, - extensions: ['.web.js', '.js'], + alias: { "react-native$": "react-native-web" }, + extensions: [".web.js", ".js"], }, }; ``` @@ -107,7 +106,7 @@ For example: ```ts const sv = useSharedValue(0); const dv = useDerivedValue( - () => sv.value + 1, + () => sv.value + 1, [sv] // dependency array here ); ``` @@ -116,7 +115,6 @@ Be sure to pass the dependency itself (`sv`) and not `sv.value` to the dependenc > Babel users will still need to install the `@babel/plugin-proposal-class-properties` plugin. - ### 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: @@ -139,7 +137,7 @@ This assumes you've already installed the `react-hooks` eslint [plugin](https:// 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 -const sv = useSharedValue(0) +const sv = useSharedValue(0); // 🚨 bad, sv.value is in the array const dv = useDerivedValue(() => sv.value, [sv.value]); @@ -163,5 +161,5 @@ yarn add raf Add the following to the top of your `_app.tsx`: ```ts -import 'raf/polyfill' +import "raf/polyfill"; ``` diff --git a/docs/shared-element-transitions/_category_.json b/docs/shared-element-transitions/_category_.json index 89b7dfb..6e3913f 100644 --- a/docs/shared-element-transitions/_category_.json +++ b/docs/shared-element-transitions/_category_.json @@ -4,4 +4,4 @@ "link": { "type": "generated-index" } -} \ No newline at end of file +} diff --git a/docs/utilities/_category_.json b/docs/utilities/_category_.json index 6ec7e37..422fc22 100644 --- a/docs/utilities/_category_.json +++ b/docs/utilities/_category_.json @@ -4,4 +4,4 @@ "link": { "type": "generated-index" } -} \ No newline at end of file +}