diff --git a/.eslintignore b/.eslintignore
index 18c50df521..5090b2f9a5 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -5,7 +5,7 @@ docs/build/
docs/public/
docs/static/
web-build/
-testSetup.js
+jest/testSetup.js
__fixtures__/
# generated by bob
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.mdx
similarity index 75%
rename from docs/docs/guides/01-getting-started.md
rename to docs/docs/guides/01-getting-started.mdx
index 19fc3c2dea..01de689fe9 100644
--- a/docs/docs/guides/01-getting-started.md
+++ b/docs/docs/guides/01-getting-started.mdx
@@ -2,29 +2,60 @@
title: Getting Started
---
+import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs';
+
# Getting Started
## Installation
-- Open a Terminal in your project's folder and run:
+Open a Terminal in your project's folder and install the library:
-```bash npm2yarn
-npm install react-native-paper
+
+
+
+```bash
+npx expo install react-native-paper
```
-- From `v5` there is a need to install [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) for handling safe area.
+
+
```bash npm2yarn
-npm install react-native-safe-area-context
+npm install react-native-paper
```
-Additionaly for `iOS` platform there is a requirement to link the native parts of the library:
+
+
+
+React Native Paper uses [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) for handling safe area, [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) and [react-native-worklets](https://docs.swmansion.com/react-native-worklets/) for animations.
+
+
+
```bash
-npx pod-install
+npx expo install react-native-safe-area-context react-native-reanimated react-native-worklets
+```
+
+
+
+
+```bash npm2yarn
+npm install react-native-safe-area-context react-native-reanimated react-native-worklets
```
-- If you're on a vanilla React Native project, you also need to install and link [@react-native-vector-icons/material-design-icons](https://github.com/oblador/react-native-vector-icons).
+
+
+
+Follow the [React Native Reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/).
+
+Minimum requirements:
+
+- `react-native-reanimated` **≥ 4.3.0**
+- `react-native-worklets` **≥ 0.8.1**
+- `react-native-safe-area-context` — version compatible with your React Native toolchain.
+
+If you're on a vanilla React Native project, you also need to install and link [@react-native-vector-icons/material-design-icons](https://github.com/oblador/react-native-vector-icons).
Specifically `MaterialDesignIcons` icon pack needs to be included in the project, because some components use those internally (e.g. `AppBar.BackAction` on Android).
@@ -40,7 +71,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/docs/docs/guides/03-icons.mdx b/docs/docs/guides/03-icons.mdx
index 015a1bee1b..c773ce7a56 100644
--- a/docs/docs/guides/03-icons.mdx
+++ b/docs/docs/guides/03-icons.mdx
@@ -10,7 +10,7 @@ import IconsList from '@site/src/components/IconsList.tsx';
## Configuring icons
-Many of the components require the [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) library to render correctly. If you're using Expo, you don't need to do anything extra, but if it's a vanilla React Native project, you need to link the library as described in the [getting started guide](./01-getting-started.md).
+Many of the components require the [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) library to render correctly. If you're using Expo, you don't need to do anything extra, but if it's a vanilla React Native project, you need to link the library as described in the [getting started guide](./01-getting-started.mdx).
:::note
If you opted out of vector icons support using [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require), you won't be able to use icon names for the icon prop. Some components may not look correct without vector icons and might need extra configuration.
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/jest/jestSetupAfterEnv.js b/jest/jestSetupAfterEnv.js
new file mode 100644
index 0000000000..ee9e70fc5f
--- /dev/null
+++ b/jest/jestSetupAfterEnv.js
@@ -0,0 +1,3 @@
+import { setUpTests } from 'react-native-reanimated';
+
+setUpTests();
diff --git a/testSetup.js b/jest/testSetup.js
similarity index 96%
rename from testSetup.js
rename to jest/testSetup.js
index 43346ff860..5088ab5585 100644
--- a/testSetup.js
+++ b/jest/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');
@@ -128,4 +132,4 @@ jest.mock('react-native/Libraries/Utilities/BackHandler', () => {
},
},
};
-});
\ No newline at end of file
+});
diff --git a/package.json b/package.json
index fbf4482041..1f4c0f784c 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": {
@@ -116,9 +120,10 @@
"jest": {
"preset": "react-native",
"setupFiles": [
- "/testSetup.js"
+ "/jest/testSetup.js"
],
"setupFilesAfterEnv": [
+ "/jest/jestSetupAfterEnv.js",
"@testing-library/jest-native/extend-expect"
],
"cacheDirectory": "./cache/jest",
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"