From 08343f3bd511f4488bbb44305f2d1dc1194cb76e Mon Sep 17 00:00:00 2001 From: Michal Lul Date: Mon, 4 May 2026 13:09:08 +0200 Subject: [PATCH 1/5] feat: reanimated as peer dependency --- babel.config.js | 1 + docs/docs/guides/01-getting-started.md | 10 ++++ jestSetupAfterEnv.js | 1 + package.json | 7 ++- testSetup.js | 4 ++ yarn.lock | 63 +++++++++++++++++++++++++- 6 files changed, 84 insertions(+), 2 deletions(-) create mode 100644 jestSetupAfterEnv.js 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..b75212845c 100644 --- a/docs/docs/guides/01-getting-started.md +++ b/docs/docs/guides/01-getting-started.md @@ -18,6 +18,16 @@ 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 +``` + +:::note +If you're using a bare React Native project (not Expo), you need to add `react-native-worklets/plugin` to your `babel.config.js` plugins array. See the [Reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/) for details. +::: + Additionaly for `iOS` platform there is a requirement to link the native parts of the library: ```bash diff --git a/jestSetupAfterEnv.js b/jestSetupAfterEnv.js new file mode 100644 index 0000000000..8080db61ed --- /dev/null +++ b/jestSetupAfterEnv.js @@ -0,0 +1 @@ +require('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..96afce28f6 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/src/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..729f2ecfa1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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.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.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" @@ -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,10 +20141,26 @@ __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.3.0": + version: 4.3.0 + resolution: "react-native-reanimated@npm:4.3.0" + dependencies: + react-native-is-edge-to-edge: "npm:^1.3.1" + semver: "npm:^7.7.3" + peerDependencies: + react: "*" + react-native: 0.81 - 0.85 + react-native-worklets: 0.8.x + checksum: 10c0/e882660f8876b5571b4cb6fe99cbf123f7329e1282376cd92fb4b45991a765aa364b295781acea2658bee1b0196ea122b624be63b3a906c06a72c2a67ab56486 + languageName: node + linkType: hard + "react-native-reanimated@npm:~4.1.1": version: 4.1.6 resolution: "react-native-reanimated@npm:4.1.6" @@ -20252,6 +20280,30 @@ __metadata: languageName: node linkType: hard +"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.3" + peerDependencies: + "@babel/core": "*" + "@react-native/metro-config": "*" + react: "*" + react-native: 0.81 - 0.85 + checksum: 10c0/a82edbd65b09a31d973497dac899adcd618677b56f7e5c460fd9f3b1b4ef1547b7bfd2edaa644d1ebf866bf70658bdbd1314c9d0ab2856e98c6975d0e97fd449 + languageName: node + linkType: hard + "react-native@npm:0.81.4": version: 0.81.4 resolution: "react-native@npm:0.81.4" @@ -21701,6 +21753,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" From bef730d4d03d186d90637dadfadeef1bbb6cf4f7 Mon Sep 17 00:00:00 2001 From: Michal Lul Date: Thu, 7 May 2026 12:08:20 +0200 Subject: [PATCH 2/5] chore: example dependencies update --- example/package.json | 4 +-- yarn.lock | 69 +++++++------------------------------------- 2 files changed, 13 insertions(+), 60 deletions(-) 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/yarn.lock b/yarn.lock index 729f2ecfa1..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.27.1": +"@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: @@ -20074,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 @@ -20161,21 +20161,6 @@ __metadata: languageName: node linkType: hard -"react-native-reanimated@npm:~4.1.1": - version: 4.1.6 - resolution: "react-native-reanimated@npm:4.1.6" - dependencies: - react-native-is-edge-to-edge: "npm:^1.2.1" - semver: "npm:7.7.2" - peerDependencies: - "@babel/core": ^7.0.0-0 - react: "*" - react-native: "*" - react-native-worklets: ">=0.5.0" - checksum: 10c0/924b3a3fc0e6b47b97491122689bc00d59c5c2abf90ba05dd811f1c6d59efb8fb83135e4fa4463241ff937450025b7b335af54ab5f35c15197efaaef90235e91 - languageName: node - linkType: hard - "react-native-safe-area-context@npm:5.5.2": version: 5.5.2 resolution: "react-native-safe-area-context@npm:5.5.2" @@ -20257,29 +20242,6 @@ __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" - convert-source-map: "npm:^2.0.0" - semver: "npm:7.7.2" - peerDependencies: - "@babel/core": ^7.0.0-0 - react: "*" - react-native: "*" - checksum: 10c0/9eb9e6dea9abaf889400a6618355ef59af3075f5004a4bec9e4cba6dcfd13d8b63de0d4b29d75c00a3dcf5ad422e1bdb71636c75b1a2ad1c43d8b512f198bdab - languageName: node - linkType: hard - "react-native-worklets@npm:^0.8.1": version: 0.8.1 resolution: "react-native-worklets@npm:0.8.1" @@ -21726,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" From a4cfceb5f1cd980de4c68ad7c2f95dc354c54f5a Mon Sep 17 00:00:00 2001 From: Michal Lul Date: Thu, 7 May 2026 12:24:12 +0200 Subject: [PATCH 3/5] chore: updated worklets mocks path --- testSetup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/testSetup.js b/testSetup.js index 96afce28f6..62c099895f 100644 --- a/testSetup.js +++ b/testSetup.js @@ -5,7 +5,7 @@ jest.useFakeTimers(); jest.mock('react-native-safe-area-context', () => mockSafeAreaContext); jest.mock('react-native-worklets', () => - require('react-native-worklets/src/mock') + require('react-native-worklets/lib/module/mock') ); jest.mock('@react-native-vector-icons/material-design-icons', () => { From f912d81eb60f443f037e764c349496d95469a6ca Mon Sep 17 00:00:00 2001 From: Michal Lul Date: Thu, 7 May 2026 12:26:23 +0200 Subject: [PATCH 4/5] chore: esm import in jest setup after env --- jestSetupAfterEnv.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/jestSetupAfterEnv.js b/jestSetupAfterEnv.js index 8080db61ed..ee9e70fc5f 100644 --- a/jestSetupAfterEnv.js +++ b/jestSetupAfterEnv.js @@ -1 +1,3 @@ -require('react-native-reanimated').setUpTests(); +import { setUpTests } from 'react-native-reanimated'; + +setUpTests(); From 27250d01a8cc53908e75213c6c2c4cce23c762bc Mon Sep 17 00:00:00 2001 From: Michal Lul Date: Thu, 7 May 2026 12:31:02 +0200 Subject: [PATCH 5/5] chore: documentation clarification --- docs/docs/guides/01-getting-started.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/docs/guides/01-getting-started.md b/docs/docs/guides/01-getting-started.md index b75212845c..91a8dce0b8 100644 --- a/docs/docs/guides/01-getting-started.md +++ b/docs/docs/guides/01-getting-started.md @@ -24,9 +24,7 @@ npm install react-native-safe-area-context npm install react-native-reanimated react-native-worklets ``` -:::note -If you're using a bare React Native project (not Expo), you need to add `react-native-worklets/plugin` to your `babel.config.js` plugins array. See the [Reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/) for details. -::: +- 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: @@ -50,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