diff --git a/.changeset/angry-foxes-applaud.md b/.changeset/angry-foxes-applaud.md new file mode 100644 index 000000000..9baea3a73 --- /dev/null +++ b/.changeset/angry-foxes-applaud.md @@ -0,0 +1,5 @@ +--- +"@callstack/repack": minor +--- + +Add Repack Reanimated Plugin which integrates react-native-reanimated into the project diff --git a/.changeset/config.json b/.changeset/config.json index df83609cb..fbd8c2739 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -6,7 +6,8 @@ [ "@callstack/repack", "@callstack/repack-dev-server", - "@callstack/repack-init" + "@callstack/repack-init", + "@callstack/repack-plugin-reanimated" ] ], "linked": [], diff --git a/apps/tester-app/ios/Podfile.lock b/apps/tester-app/ios/Podfile.lock index ad14ec34e..6aa37aae3 100644 --- a/apps/tester-app/ios/Podfile.lock +++ b/apps/tester-app/ios/Podfile.lock @@ -1581,6 +1581,93 @@ PODS: - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - Yoga + - RNReanimated (3.16.3): + - DoubleConversion + - glog + - hermes-engine + - RCT-Folly (= 2024.01.01.00) + - RCTRequired + - RCTTypeSafety + - React-Core + - React-debug + - React-Fabric + - React-featureflags + - React-graphics + - React-ImageManager + - React-NativeModulesApple + - React-RCTFabric + - React-rendererdebug + - React-utils + - ReactCodegen + - ReactCommon/turbomodule/bridging + - ReactCommon/turbomodule/core + - RNReanimated/reanimated (= 3.16.3) + - RNReanimated/worklets (= 3.16.3) + - Yoga + - RNReanimated/reanimated (3.16.3): + - DoubleConversion + - glog + - hermes-engine + - RCT-Folly (= 2024.01.01.00) + - RCTRequired + - RCTTypeSafety + - React-Core + - React-debug + - React-Fabric + - React-featureflags + - React-graphics + - React-ImageManager + - React-NativeModulesApple + - React-RCTFabric + - React-rendererdebug + - React-utils + - ReactCodegen + - ReactCommon/turbomodule/bridging + - ReactCommon/turbomodule/core + - RNReanimated/reanimated/apple (= 3.16.3) + - Yoga + - RNReanimated/reanimated/apple (3.16.3): + - DoubleConversion + - glog + - hermes-engine + - RCT-Folly (= 2024.01.01.00) + - RCTRequired + - RCTTypeSafety + - React-Core + - React-debug + - React-Fabric + - React-featureflags + - React-graphics + - React-ImageManager + - React-NativeModulesApple + - React-RCTFabric + - React-rendererdebug + - React-utils + - ReactCodegen + - ReactCommon/turbomodule/bridging + - ReactCommon/turbomodule/core + - Yoga + - RNReanimated/worklets (3.16.3): + - DoubleConversion + - glog + - hermes-engine + - RCT-Folly (= 2024.01.01.00) + - RCTRequired + - RCTTypeSafety + - React-Core + - React-debug + - React-Fabric + - React-featureflags + - React-graphics + - React-ImageManager + - React-NativeModulesApple + - React-RCTFabric + - React-rendererdebug + - React-utils + - ReactCodegen + - ReactCommon/turbomodule/bridging + - ReactCommon/turbomodule/core + - Yoga - RNSVG (15.8.0): - DoubleConversion - glog @@ -1700,6 +1787,7 @@ DEPENDENCIES: - ReactTestApp-DevSupport (from `../node_modules/react-native-test-app`) - ReactTestApp-Resources (from `..`) - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)" + - RNReanimated (from `../node_modules/react-native-reanimated`) - RNSVG (from `../node_modules/react-native-svg`) - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) @@ -1845,6 +1933,8 @@ EXTERNAL SOURCES: :path: ".." RNCAsyncStorage: :path: "../node_modules/@react-native-async-storage/async-storage" + RNReanimated: + :path: "../node_modules/react-native-reanimated" RNSVG: :path: "../node_modules/react-native-svg" Yoga: @@ -1919,6 +2009,7 @@ SPEC CHECKSUMS: ReactTestApp-DevSupport: aa137b52b223ebecf49fd5569290759a6d0b5590 ReactTestApp-Resources: 8d72c3deef156833760694a288ff334af4d427d7 RNCAsyncStorage: 3ad840f7b17b45ca7ebbbb0e80948564a9513315 + RNReanimated: 1f9ef2dc2001866fe8da3f3ac78d683252e8872f RNSVG: 536cd3c866c878faf72beaba166c8b02fe2b762b SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748 SwiftyRSA: 8c6dd1ea7db1b8dc4fb517a202f88bb1354bc2c6 diff --git a/apps/tester-app/package.json b/apps/tester-app/package.json index e4034f3f6..d8604f377 100644 --- a/apps/tester-app/package.json +++ b/apps/tester-app/package.json @@ -20,17 +20,19 @@ "@react-native-async-storage/async-storage": "^1.23.1", "react": "18.3.1", "react-native": "0.76.3", + "react-native-reanimated": "^3.16.3", "react-native-svg": "15.8.0" }, "devDependencies": { "@babel/core": "^7.25.2", "@callstack/repack": "workspace:*", + "@callstack/repack-plugin-reanimated": "workspace:*", "@react-native-community/cli": "15.0.1", - "@react-native-community/cli-platform-ios": "15.0.1", "@react-native-community/cli-platform-android": "15.0.1", + "@react-native-community/cli-platform-ios": "15.0.1", "@react-native/babel-preset": "0.76.3", "@react-native/typescript-config": "0.76.3", - "@rsdoctor/rspack-plugin": "^0.4.5", + "@rsdoctor/rspack-plugin": "^0.4.11", "@rspack/core": "1.0.8", "@svgr/webpack": "^8.1.0", "@swc/helpers": "^0.5.13", diff --git a/apps/tester-app/rspack.config.mjs b/apps/tester-app/rspack.config.mjs index 896626645..427fff3fd 100644 --- a/apps/tester-app/rspack.config.mjs +++ b/apps/tester-app/rspack.config.mjs @@ -2,6 +2,7 @@ import { createRequire } from 'node:module'; import path from 'node:path'; import * as Repack from '@callstack/repack'; +import { ReanimatedPlugin } from '@callstack/repack-plugin-reanimated'; import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin'; const dirname = Repack.getDirname(import.meta.url); @@ -195,6 +196,7 @@ export default (env) => { // exclude: /index.bundle$/, // }), process.env.RSDOCTOR && new RsdoctorRspackPlugin(), + new ReanimatedPlugin(), ].filter(Boolean), }; }; diff --git a/apps/tester-app/src/App.tsx b/apps/tester-app/src/App.tsx index d273f56a4..7f4134241 100644 --- a/apps/tester-app/src/App.tsx +++ b/apps/tester-app/src/App.tsx @@ -7,6 +7,7 @@ import { SectionContainer } from './ui/SectionContainer'; import { AssetsTestContainer } from './assetsTest/AssetsTestContainer'; import { AsyncContainer } from './asyncChunks/AsyncContainer'; import { MiniAppsContainer } from './miniapp/MiniAppsContainer'; +import { ReanimatedBox } from './reanimated/ReanimatedBox'; import { RemoteContainer } from './remoteChunks/RemoteContainer'; Appearance.setColorScheme('light'); @@ -27,6 +28,9 @@ const App = () => {
+
+ +
); diff --git a/apps/tester-app/src/reanimated/ReanimatedBox.tsx b/apps/tester-app/src/reanimated/ReanimatedBox.tsx new file mode 100644 index 000000000..1449f2d6a --- /dev/null +++ b/apps/tester-app/src/reanimated/ReanimatedBox.tsx @@ -0,0 +1,42 @@ +import { Button, StyleSheet, View } from 'react-native'; +import Animated, { useSharedValue, withSpring } from 'react-native-reanimated'; + +export function ReanimatedBox() { + const width = useSharedValue(100); + + const handlePress = () => { + width.value = withSpring(width.value + 50); + }; + + const handleReset = () => { + width.value = withSpring(100); + }; + + return ( + + + +