chore: Bump React Native to 0.85 and Reanimated to 4.4

example/app/jest.config.ts

@@ -7,12 +7,13 @@ const config: JestConfigWithTsJest = {
   fakeTimers: {
     enableGlobally: true
   },
-  moduleDirectories: ['../../node_modules', '<rootDir>'],
+  moduleDirectories: ['node_modules', '../../node_modules', '<rootDir>'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths ?? {}, {
     prefix: '<rootDir>/'
   }),
-  preset: 'react-native',
+  preset: '@react-native/jest-preset',
+  resolver: 'react-native-worklets/jest/resolver.js',
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   transform: {
     '^.+\\.jsx?$': [

example/app/package.json

@@ -8,39 +8,40 @@
     "@react-navigation/bottom-tabs": "7.3.10",
     "@react-navigation/native": "7.0.14",
     "@react-navigation/native-stack": "7.2.0",
-    "@shopify/flash-list": "2.0.3",
-    "react": "19.1.0",
-    "react-native": "0.81.4",
-    "react-native-gesture-handler": "2.28.0",
+    "@shopify/flash-list": "2.3.1",
+    "react": "19.2.3",
+    "react-native": "0.85.3",
+    "react-native-gesture-handler": "2.31.1",
     "react-native-haptic-feedback": "2.3.3",
-    "react-native-reanimated": "patch:react-native-reanimated@npm%3A4.1.3#~/.yarn/patches/react-native-reanimated-npm-4.1.3-f13c1e8648.patch",
-    "react-native-safe-area-context": "5.3.0",
-    "react-native-screens": "4.15.4",
+    "react-native-reanimated": "4.4.1",
+    "react-native-safe-area-context": "5.7.0",
+    "react-native-screens": "4.25.2",
     "react-native-sortables": "workspace:*",
-    "react-native-svg": "15.12.1",
-    "react-native-worklets": "0.5.0"
+    "react-native-svg": "15.15.4",
+    "react-native-worklets": "0.9.1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
     "@babel/runtime": "^7.25.0",
     "@gorhom/portal": "^1.0.14",
-    "@react-native-community/cli": "19.1.2",
-    "@react-native-community/cli-platform-android": "20.0.0",
-    "@react-native-community/cli-platform-ios": "20.0.0",
-    "@react-native/babel-preset": "0.81.4",
-    "@react-native/metro-config": "0.81.4",
+    "@react-native-community/cli": "20.1.0",
+    "@react-native-community/cli-platform-android": "20.1.0",
+    "@react-native-community/cli-platform-ios": "20.1.0",
+    "@react-native/babel-preset": "0.85.3",
+    "@react-native/jest-preset": "0.85.3",
+    "@react-native/metro-config": "0.85.3",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react-native": "^12.5.1",
-    "@types/react": "^19.1.0",
+    "@types/react": "^19.2.0",
     "@types/react-test-renderer": "^19.1.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "eslint": "^9.28.0",
     "jest": "^29.7.0",
     "lint-staged": "^15.5.0",
     "madge": "^8.0.0",
     "prettier": "^3.3.2",
-    "react-test-renderer": "19.1.0",
+    "react-test-renderer": "19.2.3",
     "typescript": "^5.8.3"
   },
   "lint-staged": {

example/app/src/components/inputs/TabSelector.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
-import type { ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import type { AnimatedStyle } from 'react-native-reanimated';
 import Animated, {
   interpolateColor,
   runOnUI,
@@ -74,7 +75,7 @@ export default function TabSelector<T extends number | string>({
 type TabProps<T> = {
   isSelected: boolean;
   tab: T;
-  style: ViewStyle;
+  style: StyleProp<AnimatedStyle<ViewStyle>>;
   onSelectTab: (tab: T) => void;
   onMeasureWidth: (width: number) => void;
 };

example/app/src/components/misc/ActionSheetDropdown.tsx

@@ -368,8 +368,12 @@ function Backdrop({ handleClose }: BackdropProps): JSX.Element {
 
 const styles = StyleSheet.create({
   backdrop: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0, 0, 0, 0.2)'
+    backgroundColor: 'rgba(0, 0, 0, 0.2)',
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0
   },
   scrollBarThumb: {
     backgroundColor: 'rgba(0, 0, 0, 0.5)',

example/app/src/examples/SortableFlex/features/AutoScrollExample.tsx

@@ -73,7 +73,7 @@ function ScrollViewExample() {
 }
 
 function FlatListExample() {
-  const scrollableRef = useAnimatedRef<Animated.FlatList<string>>();
+  const scrollableRef = useAnimatedRef<FlatList<string>>();
 
   return (
     <AnimatedFlatList
@@ -139,10 +139,10 @@ function FlashListExample() {
 
 type CategoriesSectionProps = {
   scrollableRef:
-    | AnimatedRef<Animated.FlatList>
     | AnimatedRef<Animated.ScrollView>
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    | AnimatedRef<FlashListRef<any>>;
+    | AnimatedRef<FlashListRef<any>>
+    | AnimatedRef<FlatList<string>>;
 };
 
 function ManyCategories({ scrollableRef }: CategoriesSectionProps) {

example/app/src/examples/SortableGrid/features/AutoScrollExample.tsx

@@ -74,7 +74,7 @@ function ScrollViewExample() {
 }
 
 function FlatListExample() {
-  const scrollableRef = useAnimatedRef<Animated.FlatList<string>>();
+  const scrollableRef = useAnimatedRef<FlatList<string>>();
 
   return (
     <AnimatedFlatList
@@ -140,10 +140,10 @@ function FlashListExample() {
 
 type CardsSectionProps = {
   scrollableRef:
-    | AnimatedRef<Animated.FlatList>
     | AnimatedRef<Animated.ScrollView>
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    | AnimatedRef<FlashListRef<any>>;
+    | AnimatedRef<FlashListRef<any>>
+    | AnimatedRef<FlatList<string>>;
 };
 
 function ManyCards({ scrollableRef }: CardsSectionProps) {

example/expo/babel.config.cjs

@@ -0,0 +1,29 @@
+/**
+ * Don't edit this file directly if you don't have to.
+ * Modify the babel config file in the project root directory.
+ */
+const path = require('path');
+
+const appDir = path.resolve(__dirname, '../app');
+
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      '@babel/plugin-transform-export-namespace-from',
+      [
+        'module-resolver',
+        {
+          root: ['./'],
+          extensions: ['.ts', '.tsx', '.svg', '.json'],
+          // This needs to be mirrored in ../app/tsconfig.json
+          alias: {
+            '@': path.join(appDir, 'src')
+          }
+        }
+      ],
+      'react-native-worklets/plugin'
+    ]
+  };
+};

example/expo/package.json

@@ -2,17 +2,17 @@
   "name": "example-expo",
   "version": "1.0.0",
   "dependencies": {
-    "expo": "54.0.20",
-    "expo-status-bar": "~3.0.8",
-    "react": "19.1.0",
-    "react-native": "0.81.5",
-    "react-native-gesture-handler": "~2.28.0",
-    "react-native-reanimated": "~4.1.1",
-    "react-native-worklets": "0.5.1"
+    "expo": "56.0.9",
+    "expo-status-bar": "~56.0.4",
+    "react": "19.2.3",
+    "react-native": "0.85.3",
+    "react-native-gesture-handler": "~2.31.1",
+    "react-native-reanimated": "4.3.1",
+    "react-native-worklets": "0.8.3"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@types/react": "~19.1.10",
+    "@types/react": "~19.2.0",
     "typescript": "~5.9.2"
   },
   "installConfig": {

example/fabric/package.json

@@ -2,7 +2,7 @@
   "name": "example-fabric",
   "version": "1.0.0",
   "dependencies": {
-    "react-native": "0.81.4",
+    "react-native": "0.85.3",
     "react-native-sortables": "workspace:*"
   },
   "installConfig": {

example/paper/android/app/build.gradle

@@ -3,7 +3,7 @@ apply plugin: "org.jetbrains.kotlin.android"
 apply plugin: "com.facebook.react"
 
 def appRoot = "../.."
-def nodeModulesPath = "$appRoot/../../node_modules"
+def nodeModulesPath = "$appRoot/node_modules"
 
 /**
  * This is the configuration block to customize your React Native Android app.

example/paper/android/settings.gradle

@@ -1,7 +1,7 @@
-pluginManagement { includeBuild("../../../node_modules/@react-native/gradle-plugin") }
+pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
 plugins { id("com.facebook.react.settings") }
 extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
 rootProject.name = 'react-native-sortables-paper'
 
 include ':app'
-includeBuild("../../../node_modules/@react-native/gradle-plugin")
+includeBuild("../node_modules/@react-native/gradle-plugin")

example/paper/package.json

@@ -3,11 +3,13 @@
   "version": "1.0.0",
   "dependencies": {
     "@shopify/flash-list": "1.8.3",
+    "react": "19.1.0",
     "react-native": "0.81.4",
-    "react-native-reanimated": "3.19.3",
+    "react-native-reanimated": "3.19.5",
     "react-native-sortables": "workspace:*"
   },
   "installConfig": {
+    "hoistingLimits": "workspaces",
     "selfReferences": false
   },
   "private": true,

example/web/package.json

@@ -2,15 +2,15 @@
   "name": "example-web",
   "version": "0.0.1",
   "dependencies": {
-    "expo": "^54.0.7",
-    "react-dom": "19.1.0",
-    "react-native": "0.81.4",
+    "expo": "56.0.9",
+    "react-dom": "19.2.3",
+    "react-native": "0.85.3",
     "react-native-sortables": "workspace:*",
     "react-native-web": "0.21.1"
   },
   "devDependencies": {
-    "@expo/metro-runtime": "~6.1.2",
-    "babel-preset-expo": "~54.0.0",
+    "@expo/metro-runtime": "~56.0.14",
+    "babel-preset-expo": "~56.0.0",
     "serve": "^14.2.4"
   },
   "installConfig": {

package.json

@@ -61,5 +61,8 @@
       "example/web",
       "packages/react-native-sortables"
     ]
+  },
+  "resolutions": {
+    "@types/react": "19.2.17"
   }
 }

packages/react-native-sortables/jest.config.ts

@@ -5,9 +5,10 @@ const config: JestConfigWithTsJest = {
   fakeTimers: {
     enableGlobally: true
   },
-  moduleDirectories: ['../../node_modules', '<rootDir>'],
+  moduleDirectories: ['node_modules', '../../node_modules', '<rootDir>'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  preset: 'react-native',
+  preset: '@react-native/jest-preset',
+  resolver: 'react-native-worklets/jest/resolver.js',
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   transform: {
     '^.+\\.jsx?$': [

packages/react-native-sortables/package.json

@@ -5,6 +5,7 @@
   "author": "Mateusz Łopaciński (https://github.com/MatiPl01)",
   "bugs": "https://github.com/MatiPl01/react-native-sortables/issues",
   "devDependencies": {
+    "@react-native/jest-preset": "0.85.3",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^13.0.0",
     "@semantic-release/git": "^10.0.1",
@@ -13,20 +14,20 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react-native": "^12.5.1",
     "@types/node": "^24.0.1",
-    "@types/react": "^19.1.0",
+    "@types/react": "^19.2.0",
     "babel-plugin-react-require": "^4.0.3",
     "eslint": "^9.28.0",
     "jest": "^29.7.0",
     "knip": "^5.61.0",
     "lint-staged": "^15.5.0",
     "madge": "^8.0.0",
     "prettier": "^3.3.2",
-    "react": "19.1.0",
-    "react-native": "0.81.4",
+    "react": "19.2.3",
+    "react-native": "0.85.3",
     "react-native-builder-bob": "0.40.13",
-    "react-native-gesture-handler": "2.28.0",
-    "react-native-reanimated": "patch:react-native-reanimated@npm%3A4.1.3#~/.yarn/patches/react-native-reanimated-npm-4.1.3-f13c1e8648.patch",
-    "react-native-worklets": "^0.5.0",
+    "react-native-gesture-handler": "2.31.1",
+    "react-native-reanimated": "4.4.1",
+    "react-native-worklets": "0.9.1",
     "semantic-release": "^24.0.0",
     "semantic-release-yarn": "^3.0.2",
     "syncpack": "^12.3.3",

packages/react-native-sortables/src/components/shared/SortableContainer.tsx

@@ -1,5 +1,4 @@
 import { memo, useSyncExternalStore } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
 import Animated, {
   LinearTransition,
   useAnimatedStyle,
@@ -26,7 +25,7 @@ export type SortableContainerProps = DropIndicatorSettings &
     overflow: Overflow;
     itemStyle?: AnimatedStyleProp;
     debug?: boolean;
-    containerStyle?: StyleProp<ViewStyle>;
+    containerStyle?: AnimatedStyleProp;
     onLayout: (width: number, height: number) => void;
   };
 

packages/react-native-sortables/src/constants/platform.ts

@@ -8,5 +8,5 @@ export const IS_REACT_19 = reactVersion.startsWith('19.');
 
 export function isFabric() {
   // eslint-disable-next-line no-underscore-dangle
-  return !!(globalThis?._IS_FABRIC ?? global?._IS_FABRIC);
+  return !!(globalThis as { _IS_FABRIC?: boolean })._IS_FABRIC;
 }

packages/react-native-sortables/src/debug/providers/DebugOutlet.tsx

@@ -34,7 +34,7 @@ function DebugOutlet() {
 
 const styles = StyleSheet.create({
   container: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     pointerEvents: 'none'
   }
 });

packages/react-native-sortables/src/providers/shared/PortalOutletProvider.tsx

@@ -30,7 +30,7 @@ const { PortalOutletProvider, usePortalOutletContext } = createProvider(
 
 const styles = StyleSheet.create({
   container: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     pointerEvents: 'box-none'
   }
 });