diff --git a/babel.config.js b/babel.config.js index f7b3da3b33..8ba8eb658c 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,3 +1,4 @@ module.exports = { presets: ['module:@react-native/babel-preset'], + plugins: ['react-native-worklets/plugin'], }; diff --git a/docs/docs/guides/01-getting-started.md b/docs/docs/guides/01-getting-started.md index 19fc3c2dea..91a8dce0b8 100644 --- a/docs/docs/guides/01-getting-started.md +++ b/docs/docs/guides/01-getting-started.md @@ -18,6 +18,14 @@ npm install react-native-paper npm install react-native-safe-area-context ``` +- You also need to install [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) and [react-native-worklets](https://docs.swmansion.com/react-native-worklets/) for animations. + +```bash npm2yarn +npm install react-native-reanimated react-native-worklets +``` + +- Follow the [React Native Reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/) for your toolchain (Expo vs React Native Community CLI). **Community CLI** setups must add `'react-native-worklets/plugin'` **last** in your `babel.config.js` `plugins` array. **Expo** setups follow that guide’s Expo steps (install packages and rebuild native code); starter templates [since Expo SDK 50](https://expo.dev/changelog/2024/01-18-sdk-50) usually include the Worklets Babel plugin already—add it only if your `babel.config.js` does not. + Additionaly for `iOS` platform there is a requirement to link the native parts of the library: ```bash @@ -40,7 +48,7 @@ If you use Expo, you don't need to install vector icons - those are the part of :::info If you don't want to install vector icons, you can use [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require) to opt-out. -:::note +::: ### Bundle size optimization diff --git a/example/package.json b/example/package.json index 3ae36fb1ec..6a412f008c 100644 --- a/example/package.json +++ b/example/package.json @@ -36,11 +36,11 @@ "react-native": "0.81.4", "react-native-gesture-handler": "~2.28.0", "react-native-monorepo-config": "^0.1.6", - "react-native-reanimated": "~4.1.1", + "react-native-reanimated": "^4.3.0", "react-native-safe-area-context": "~5.6.0", "react-native-screens": "~4.16.0", "react-native-web": "^0.21.0", - "react-native-worklets": "0.5.1", + "react-native-worklets": "^0.8.1", "typeface-roboto": "^1.1.13" }, "devDependencies": { diff --git a/jestSetupAfterEnv.js b/jestSetupAfterEnv.js new file mode 100644 index 0000000000..ee9e70fc5f --- /dev/null +++ b/jestSetupAfterEnv.js @@ -0,0 +1,3 @@ +import { setUpTests } from 'react-native-reanimated'; + +setUpTests(); diff --git a/package.json b/package.json index fbf4482041..e82d9f6372 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,9 @@ "react-dom": "18.3.1", "react-native": "0.82.1", "react-native-builder-bob": "^0.21.3", + "react-native-reanimated": "^4.3.0", "react-native-safe-area-context": "5.5.2", + "react-native-worklets": "^0.8.1", "react-test-renderer": "19.1.1", "release-it": "^13.4.0", "rimraf": "^3.0.2", @@ -105,7 +107,9 @@ "peerDependencies": { "react": "*", "react-native": "*", - "react-native-safe-area-context": "*" + "react-native-reanimated": ">=4.3.0", + "react-native-safe-area-context": "*", + "react-native-worklets": ">=0.8.1" }, "husky": { "hooks": { @@ -119,6 +123,7 @@ "/testSetup.js" ], "setupFilesAfterEnv": [ + "/jestSetupAfterEnv.js", "@testing-library/jest-native/extend-expect" ], "cacheDirectory": "./cache/jest", diff --git a/testSetup.js b/testSetup.js index 43346ff860..62c099895f 100644 --- a/testSetup.js +++ b/testSetup.js @@ -4,6 +4,10 @@ jest.useFakeTimers(); jest.mock('react-native-safe-area-context', () => mockSafeAreaContext); +jest.mock('react-native-worklets', () => + require('react-native-worklets/lib/module/mock') +); + jest.mock('@react-native-vector-icons/material-design-icons', () => { const React = require('react'); const { Text } = require('react-native'); diff --git a/yarn.lock b/yarn.lock index 9696c756fb..5ae8c0517a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1124,7 +1124,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-arrow-functions@npm:^7.0.0-0, @babel/plugin-transform-arrow-functions@npm:^7.24.7, @babel/plugin-transform-arrow-functions@npm:^7.27.1": +"@babel/plugin-transform-arrow-functions@npm:^7.24.7, @babel/plugin-transform-arrow-functions@npm:^7.27.1": version: 7.27.1 resolution: "@babel/plugin-transform-arrow-functions@npm:7.27.1" dependencies: @@ -1183,7 +1183,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-class-properties@npm:^7.0.0-0, @babel/plugin-transform-class-properties@npm:^7.25.4, @babel/plugin-transform-class-properties@npm:^7.27.1": +"@babel/plugin-transform-class-properties@npm:^7.25.4, @babel/plugin-transform-class-properties@npm:^7.27.1": version: 7.27.1 resolution: "@babel/plugin-transform-class-properties@npm:7.27.1" dependencies: @@ -1207,7 +1207,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-classes@npm:^7.0.0-0, @babel/plugin-transform-classes@npm:^7.25.4, @babel/plugin-transform-classes@npm:^7.28.4": +"@babel/plugin-transform-classes@npm:^7.25.4, @babel/plugin-transform-classes@npm:^7.28.4": version: 7.28.4 resolution: "@babel/plugin-transform-classes@npm:7.28.4" dependencies: @@ -1481,7 +1481,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.0.0-0, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.7, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.27.1": +"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.7, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.27.1": version: 7.27.1 resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.27.1" dependencies: @@ -1541,7 +1541,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-optional-chaining@npm:^7.0.0-0, @babel/plugin-transform-optional-chaining@npm:^7.24.8, @babel/plugin-transform-optional-chaining@npm:^7.27.1, @babel/plugin-transform-optional-chaining@npm:^7.28.5": +"@babel/plugin-transform-optional-chaining@npm:^7.24.8, @babel/plugin-transform-optional-chaining@npm:^7.27.1, @babel/plugin-transform-optional-chaining@npm:^7.28.5": version: 7.28.5 resolution: "@babel/plugin-transform-optional-chaining@npm:7.28.5" dependencies: @@ -1732,7 +1732,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-shorthand-properties@npm:^7.0.0-0, @babel/plugin-transform-shorthand-properties@npm:^7.24.7, @babel/plugin-transform-shorthand-properties@npm:^7.27.1": +"@babel/plugin-transform-shorthand-properties@npm:^7.24.7, @babel/plugin-transform-shorthand-properties@npm:^7.27.1": version: 7.27.1 resolution: "@babel/plugin-transform-shorthand-properties@npm:7.27.1" dependencies: @@ -1766,7 +1766,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-template-literals@npm:>=7, @babel/plugin-transform-template-literals@npm:^7.0.0-0, @babel/plugin-transform-template-literals@npm:^7.27.1": +"@babel/plugin-transform-template-literals@npm:>=7, @babel/plugin-transform-template-literals@npm:^7.27.1": version: 7.27.1 resolution: "@babel/plugin-transform-template-literals@npm:7.27.1" dependencies: @@ -1826,7 +1826,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-unicode-regex@npm:^7.0.0-0, @babel/plugin-transform-unicode-regex@npm:^7.24.7, @babel/plugin-transform-unicode-regex@npm:^7.27.1": +"@babel/plugin-transform-unicode-regex@npm:^7.24.7, @babel/plugin-transform-unicode-regex@npm:^7.27.1": version: 7.27.1 resolution: "@babel/plugin-transform-unicode-regex@npm:7.27.1" dependencies: @@ -1972,7 +1972,7 @@ __metadata: languageName: node linkType: hard -"@babel/preset-typescript@npm:^7.12.1, @babel/preset-typescript@npm:^7.16.7, @babel/preset-typescript@npm:^7.17.12, @babel/preset-typescript@npm:^7.18.6, @babel/preset-typescript@npm:^7.23.0": +"@babel/preset-typescript@npm:^7.12.1, @babel/preset-typescript@npm:^7.17.12, @babel/preset-typescript@npm:^7.18.6, @babel/preset-typescript@npm:^7.23.0, @babel/preset-typescript@npm:^7.27.1": version: 7.28.5 resolution: "@babel/preset-typescript@npm:7.28.5" dependencies: @@ -20025,6 +20025,16 @@ __metadata: languageName: node linkType: hard +"react-native-is-edge-to-edge@npm:^1.3.1": + version: 1.3.1 + resolution: "react-native-is-edge-to-edge@npm:1.3.1" + peerDependencies: + react: "*" + react-native: "*" + checksum: 10c0/28cebd5f1f3632864ff5e342278721d1e5e38627ae73859a8814012116ef15c629fee7137a6c9c97bb05d94bbe639b0b47e69b36fc2735ab53ed31570140663f + languageName: node + linkType: hard + "react-native-monorepo-config@npm:^0.1.6": version: 0.1.10 resolution: "react-native-monorepo-config@npm:0.1.10" @@ -20064,11 +20074,11 @@ __metadata: react-native: "npm:0.81.4" react-native-gesture-handler: "npm:~2.28.0" react-native-monorepo-config: "npm:^0.1.6" - react-native-reanimated: "npm:~4.1.1" + react-native-reanimated: "npm:^4.3.0" react-native-safe-area-context: "npm:~5.6.0" react-native-screens: "npm:~4.16.0" react-native-web: "npm:^0.21.0" - react-native-worklets: "npm:0.5.1" + react-native-worklets: "npm:^0.8.1" typeface-roboto: "npm:^1.1.13" url-loader: "npm:^4.1.1" languageName: unknown @@ -20120,7 +20130,9 @@ __metadata: react-dom: "npm:18.3.1" react-native: "npm:0.82.1" react-native-builder-bob: "npm:^0.21.3" + react-native-reanimated: "npm:^4.3.0" react-native-safe-area-context: "npm:5.5.2" + react-native-worklets: "npm:^0.8.1" react-test-renderer: "npm:19.1.1" release-it: "npm:^13.4.0" rimraf: "npm:^3.0.2" @@ -20129,22 +20141,23 @@ __metadata: peerDependencies: react: "*" react-native: "*" + react-native-reanimated: ">=4.3.0" react-native-safe-area-context: "*" + react-native-worklets: ">=0.8.1" languageName: unknown linkType: soft -"react-native-reanimated@npm:~4.1.1": - version: 4.1.6 - resolution: "react-native-reanimated@npm:4.1.6" +"react-native-reanimated@npm:^4.3.0": + version: 4.3.0 + resolution: "react-native-reanimated@npm:4.3.0" dependencies: - react-native-is-edge-to-edge: "npm:^1.2.1" - semver: "npm:7.7.2" + react-native-is-edge-to-edge: "npm:^1.3.1" + semver: "npm:^7.7.3" peerDependencies: - "@babel/core": ^7.0.0-0 react: "*" - react-native: "*" - react-native-worklets: ">=0.5.0" - checksum: 10c0/924b3a3fc0e6b47b97491122689bc00d59c5c2abf90ba05dd811f1c6d59efb8fb83135e4fa4463241ff937450025b7b335af54ab5f35c15197efaaef90235e91 + react-native: 0.81 - 0.85 + react-native-worklets: 0.8.x + checksum: 10c0/e882660f8876b5571b4cb6fe99cbf123f7329e1282376cd92fb4b45991a765aa364b295781acea2658bee1b0196ea122b624be63b3a906c06a72c2a67ab56486 languageName: node linkType: hard @@ -20229,26 +20242,27 @@ __metadata: languageName: node linkType: hard -"react-native-worklets@npm:0.5.1": - version: 0.5.1 - resolution: "react-native-worklets@npm:0.5.1" - dependencies: - "@babel/plugin-transform-arrow-functions": "npm:^7.0.0-0" - "@babel/plugin-transform-class-properties": "npm:^7.0.0-0" - "@babel/plugin-transform-classes": "npm:^7.0.0-0" - "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.0.0-0" - "@babel/plugin-transform-optional-chaining": "npm:^7.0.0-0" - "@babel/plugin-transform-shorthand-properties": "npm:^7.0.0-0" - "@babel/plugin-transform-template-literals": "npm:^7.0.0-0" - "@babel/plugin-transform-unicode-regex": "npm:^7.0.0-0" - "@babel/preset-typescript": "npm:^7.16.7" +"react-native-worklets@npm:^0.8.1": + version: 0.8.1 + resolution: "react-native-worklets@npm:0.8.1" + dependencies: + "@babel/plugin-transform-arrow-functions": "npm:^7.27.1" + "@babel/plugin-transform-class-properties": "npm:^7.27.1" + "@babel/plugin-transform-classes": "npm:^7.28.4" + "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.27.1" + "@babel/plugin-transform-optional-chaining": "npm:^7.27.1" + "@babel/plugin-transform-shorthand-properties": "npm:^7.27.1" + "@babel/plugin-transform-template-literals": "npm:^7.27.1" + "@babel/plugin-transform-unicode-regex": "npm:^7.27.1" + "@babel/preset-typescript": "npm:^7.27.1" convert-source-map: "npm:^2.0.0" - semver: "npm:7.7.2" + semver: "npm:^7.7.3" peerDependencies: - "@babel/core": ^7.0.0-0 + "@babel/core": "*" + "@react-native/metro-config": "*" react: "*" - react-native: "*" - checksum: 10c0/9eb9e6dea9abaf889400a6618355ef59af3075f5004a4bec9e4cba6dcfd13d8b63de0d4b29d75c00a3dcf5ad422e1bdb71636c75b1a2ad1c43d8b512f198bdab + react-native: 0.81 - 0.85 + checksum: 10c0/a82edbd65b09a31d973497dac899adcd618677b56f7e5c460fd9f3b1b4ef1547b7bfd2edaa644d1ebf866bf70658bdbd1314c9d0ab2856e98c6975d0e97fd449 languageName: node linkType: hard @@ -21674,15 +21688,6 @@ __metadata: languageName: node linkType: hard -"semver@npm:7.7.2": - version: 7.7.2 - resolution: "semver@npm:7.7.2" - bin: - semver: bin/semver.js - checksum: 10c0/aca305edfbf2383c22571cb7714f48cadc7ac95371b4b52362fb8eeffdfbc0de0669368b82b2b15978f8848f01d7114da65697e56cd8c37b0dab8c58e543f9ea - languageName: node - linkType: hard - "semver@npm:^6.0.0, semver@npm:^6.2.0, semver@npm:^6.3.0, semver@npm:^6.3.1": version: 6.3.1 resolution: "semver@npm:6.3.1" @@ -21701,6 +21706,15 @@ __metadata: languageName: node linkType: hard +"semver@npm:^7.7.3": + version: 7.7.4 + resolution: "semver@npm:7.7.4" + bin: + semver: bin/semver.js + checksum: 10c0/5215ad0234e2845d4ea5bb9d836d42b03499546ddafb12075566899fc617f68794bb6f146076b6881d755de17d6c6cc73372555879ec7dce2c2feee947866ad2 + languageName: node + linkType: hard + "semver@npm:~7.5.4": version: 7.5.4 resolution: "semver@npm:7.5.4"