feat: react-native-reanimated as peer dependency (#4912)

* feat: reanimated as peer dependency

Author: wonderlul

.eslintignore

@@ -5,7 +5,7 @@ docs/build/
 docs/public/
 docs/static/
 web-build/
-testSetup.js
+jest/testSetup.js
 __fixtures__/
 
 # generated by bob

babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
+  plugins: ['react-native-worklets/plugin'],
 };

docs/docs/guides/01-getting-started.md docs/docs/guides/01-getting-started.mdxdocs/docs/guides/01-getting-started.md renamed to docs/docs/guides/01-getting-started.mdx

@@ -2,29 +2,54 @@
 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
 ```
 
-- 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.
+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 npm2yarn
-npm install react-native-safe-area-context
+<Tabs groupId="expo-vs-cli">
+  <TabItem value="expo" label="Expo" default>
+
+```bash
+npx expo install react-native-safe-area-context react-native-reanimated react-native-worklets
 ```
 
-Additionaly for `iOS` platform there is a requirement to link the native parts of the library:
+Minimum requirements:
 
-```bash
-npx pod-install
+- `react-native-reanimated` **≥ 4.3.0**
+- `react-native-worklets` **≥ 0.8.1**
+- `react-native-safe-area-context` — version compatible with your React Native toolchain.
+
+Follow the [React Native Reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/).
+
+If you use Expo, you don't need to install vector icons - those are the part of the expo package. However, if you have a `babel.config.js` or `.babelrc` file, make sure that it includes `babel-preset-expo`.
+
+  </TabItem>
+  <TabItem value="community-cli" label="Community CLI">
+
+```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).
+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.
+
+Follow the [React Native Reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/).
+
+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).
 
@@ -36,11 +61,12 @@ npm install @react-native-vector-icons/material-design-icons
 The `react-native-vector-icons` library requires some additional setup steps for each platform. To ensure proper use of icon fonts, please follow their [installation guide](https://github.com/oblador/react-native-vector-icons?tab=readme-ov-file#setup).
 :::
 
-If you use Expo, you don't need to install vector icons - those are the part of the expo package. However, if you have a `babel.config.js` or `.babelrc` file, make sure that it includes `babel-preset-expo`.
-
 :::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
+:::
+
+  </TabItem>
+</Tabs>
 
 ### Bundle size optimization
 

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.

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": {

jest/jestSetupAfterEnv.js

@@ -0,0 +1,3 @@
+import { setUpTests } from 'react-native-reanimated';
+
+setUpTests();

testSetup.js jest/testSetup.jstestSetup.js renamed to 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', () => {
       },
     },
   };
-});
+});

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": [
-      "<rootDir>/testSetup.js"
+      "<rootDir>/jest/testSetup.js"
     ],
     "setupFilesAfterEnv": [
+      "<rootDir>/jest/jestSetupAfterEnv.js",
       "@testing-library/jest-native/extend-expect"
     ],
     "cacheDirectory": "./cache/jest",