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"