Update dependencies to be compatible with react native 0.81

apps/docs/next.config.mjs

@@ -82,6 +82,7 @@ export default withNextra({
     'react-native-gesture-handler',
     'react-native-picker-select',
     'react-native-reanimated',
+    'react-native-worklets',
     'react-native-tab-view',
     'recyclerlistview',
     '@gorhom/bottom-sheet',
@@ -104,7 +105,14 @@ export default withNextra({
       '.web.tsx',
       ...config.resolve.extensions,
     ];
-    config.plugins.push(new webpack.DefinePlugin({ __DEV__: isDevelopment, }));
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        __DEV__: isDevelopment,
+        // Polyfill 'global' for packages like @gorhom/bottom-sheet that expect Node.js/React Native environment
+        global: 'globalThis',
+      })
+    );
+
     return config;
   },
 });

apps/docs/package.json

@@ -20,15 +20,15 @@
     "next": "15.3.3",
     "nextra": "2.13.4",
     "nextra-theme-docs": "2.13.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "react-icons": "^5.3.0",
     "react-intersection-observer": "^8.26.2",
     "react-live": "^4.1.7",
     "react-native-ficus-ui": "workspace:*",
-    "react-native-gesture-handler": "2.20.2",
-    "react-native-reanimated": "3.16.1",
-    "react-native-web": "0.19.12"
+    "react-native-gesture-handler": "2.28.0",
+    "react-native-reanimated": "4.1.6",
+    "react-native-web": "0.21.2"
   },
   "dependenciesMeta": {
     "nextra": {
@@ -47,7 +47,7 @@
     "babel-loader": "^9.1.3",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.3",
-    "typescript": "5.3.3",
+    "typescript": "5.9.3",
     "webpack": "^5.95.0"
   },
   "nextBundleAnalysis": {
@@ -57,7 +57,10 @@
   },
   "pnpm": {
     "overrides": {
-      "react-native": "npm:react-native-web"
+      "react-native": "npm:react-native-web",
+      "react": "19.1.0",
+      "react-dom": "19.1.0",
+      "use-latest-callback": "0.2.3"
     }
   }
 }

apps/examples/metro.config.js

@@ -1,6 +1,5 @@
 const { getDefaultConfig } = require('expo/metro-config');
 const path = require('path');
-const exclusionList = require('metro-config/src/defaults/exclusionList');
 const escape = require('escape-string-regexp');
 const pak = require('./package.json');
 
@@ -15,8 +14,8 @@ const modules = [
   ...Object.keys(pak.peerDependencies ?? {}),
 ];
 
-// 🔁 Use `blockList` instead of deprecated `blacklistRE`
-config.resolver.blockList = exclusionList([
+// ---- blockList (sans exclusionList) ----
+const customBlockList = [
   // Block test files
   new RegExp(`${escape(libRoot)}.*\\.(spec|test)\\.[jt]sx?$`),
 
@@ -26,13 +25,22 @@ config.resolver.blockList = exclusionList([
       path.resolve(workspaceRoot, 'node_modules/@testing-library/react-native')
     )}\\/.*`
   ),
-  new RegExp(
-    `${escape(
-      path.resolve(libRoot, 'src/test-utils')
-    )}\\/.*`
-  ),
-]);
 
+  // Block test utils inside the lib
+  new RegExp(`${escape(path.resolve(libRoot, 'src/test-utils'))}\\/.*`),
+];
+
+// Normalise la blockList par défaut en tableau puis concatène
+const defaultBlockList = config.resolver?.blockList;
+const defaultAsArray = Array.isArray(defaultBlockList)
+  ? defaultBlockList
+  : defaultBlockList
+    ? [defaultBlockList]
+    : [];
+
+config.resolver.blockList = [...defaultAsArray, ...customBlockList];
+
+// ---- monorepo/watch ----
 config.watchFolders = [libRoot];
 
 config.resolver.nodeModulesPaths = [

apps/examples/package.json

@@ -17,34 +17,34 @@
     "preset": "jest-expo"
   },
   "dependencies": {
-    "@expo/vector-icons": "14.0.2",
-    "expo": "52.0.0-preview.7",
-    "expo-constants": "17.0.2",
-    "expo-font": "13.0.0",
-    "expo-linking": "7.0.2",
-    "expo-modules-autolinking": "2.1.10",
-    "expo-router": "4.0.0-preview.4",
-    "expo-splash-screen": "0.28.4",
-    "expo-status-bar": "2.0.0",
-    "expo-system-ui": "4.0.1",
-    "expo-web-browser": "14.0.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-native": "0.76.0",
+    "@expo/vector-icons": "15.0.3",
+    "expo": "54.0.31",
+    "expo-constants": "18.0.13",
+    "expo-font": "14.0.10",
+    "expo-linking": "8.0.11",
+    "expo-router": "6.0.21",
+    "expo-splash-screen": "31.0.13",
+    "expo-status-bar": "3.0.9",
+    "expo-system-ui": "6.0.9",
+    "expo-web-browser": "15.0.10",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
     "react-native-ficus-ui": "workspace:*",
-    "react-native-gesture-handler": "2.26.0",
-    "react-native-reanimated": "3.16.1",
-    "react-native-web": "0.19.13"
+    "react-native-gesture-handler": "2.28.0",
+    "react-native-reanimated": "4.1.6",
+    "react-native-web": "0.21.2",
+    "react-native-worklets": "0.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@types/jest": "29.5.12",
-    "@types/react": "18.3.12",
+    "@types/jest": "29.5.14",
+    "@types/react": "~19.1.17",
     "@types/react-test-renderer": "18.0.7",
     "babel-plugin-module-resolver": "5.0.2",
-    "jest": "29.2.1",
-    "jest-expo": "52.0.0-preview.1",
+    "jest": "29.7.0",
+    "jest-expo": "54.0.16",
     "react-test-renderer": "18.2.0",
-    "typescript": "5.3.3"
+    "typescript": "5.9.3"
   }
 }

jest.config.js

@@ -12,6 +12,7 @@ module.exports = {
       '|react-native-confirmation-code-field' +
       '|react-native-picker-select' +
       '|react-native-tab-view' +
+      '|react-native-pager-view' +
       '|react-native-vector-icons' +
       '|react-native-modal' +
       '|react-native-animatable' +

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-ficus-ui-monorepo",
   "private": true,
-  "version": "2.3.1",
+  "version": "2.4.0",
   "engines": {
     "node": ">= 22.0.0"
   },
@@ -36,12 +36,14 @@
   "license": "MIT",
   "pnpm": {
     "overrides": {
-      "react": "18.3.1",
-      "react-native": "0.76.0",
-      "react-dom": "18.3.1",
-      "@types/react": "18.3.1",
-      "@types/react-dom": "18.3.1",
-      "react-native-tab-view>use-latest-callback": "0.2.3"
+      "react": "19.1.0",
+      "react-native": "0.81.5",
+      "react-dom": "19.1.0",
+      "@types/react": "~19.1.10",
+      "@types/react-dom": "19.1.0",
+      "use-latest-callback": "0.2.3",
+      "react-native-screens": "4.16.0",
+      "@headlessui/react": "2.2.0"
     }
   },
   "packageManager": "pnpm@9.15.5"

packages/react-native-ficus-ui/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "react-native-ficus-ui",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "contributors": [
     {
       "name": "Nicolas Torion",
@@ -62,7 +62,7 @@
   },
   "dependencies": {
     "@chakra-ui/utils": "2.2.2",
-    "@gorhom/bottom-sheet": "5.0.4",
+    "@gorhom/bottom-sheet": "5.2.8",
     "@react-native-community/slider": "4.5.4",
     "@react-native-picker/picker": "2.11.0",
     "@react-native/babel-preset": "0.80.0",
@@ -72,18 +72,18 @@
     "deepmerge": "4.2.2",
     "eslint": "8.57.0",
     "prettier": "3.4.2",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "react-fast-compare": "3.2.2",
     "react-native-builder-bob": "0.40.11",
     "react-native-confirmation-code-field": "7.4.0",
-    "react-native-modal": "13.0.1",
-    "react-native-pager-view": "6.5.1",
+    "react-native-modal": "14.0.0-rc.1",
+    "react-native-pager-view": "8.0.0",
     "react-native-picker-select": "9.3.1",
     "react-native-tab-view": "3.5.2",
     "react-native-toast-message": "2.1.6",
     "react-native-vector-icons": "10.2.0",
-    "react-test-renderer": "18.2.0",
+    "react-test-renderer": "19.1.0",
     "validate-color": "2.2.4"
   },
   "devDependencies": {
@@ -101,8 +101,8 @@
     "del-cli": "6.0.0",
     "eslint-plugin-testing-library": "7.5.3",
     "metro-react-native-babel-preset": "0.77.0",
-    "react": "18.3.1",
-    "react-native": "0.76.0",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
     "turbo": "2.4.2"
   },
   "peerDependencies": {
@@ -118,8 +118,9 @@
   "pnpm": {
     "overrides": {
       "react": "18.3.1",
-      "react-native": "0.76.0",
       "react-dom": "18.3.1",
+      "react-native": "0.76.0",
+      "react-native-screens": "4.16.0",
       "@types/react": "18.3.1",
       "@types/react-dom": "18.3.1"
     }

packages/react-native-ficus-ui/src/components/avatar/avatar-group.tsx

@@ -1,5 +1,7 @@
 import React, { type ReactElement, cloneElement, isValidElement } from 'react';
 
+import type { AvatarProps } from './avatar';
+
 import { compact } from '@chakra-ui/utils';
 
 import {
@@ -39,7 +41,7 @@ export const AvatarGroup = forwardRef<AvatarGroupProps, 'View'>(
      */
     const avatarChildren = React.Children.toArray(children).filter(
       (element) => isValidElement(element) && element.type === Avatar
-    ) as ReactElement[];
+    ) as ReactElement<AvatarProps>[];
 
     const truncatedChildren =
       max != null ? avatarChildren.slice(0, max) : avatarChildren;
@@ -50,15 +52,15 @@ export const AvatarGroup = forwardRef<AvatarGroupProps, 'View'>(
     const clones = reversedChildren.map((child, index) => {
       const isFirstAvatar = index === 0;
 
-      const childProps: SystemStyleObject = {
+      const childProps = {
         ml: isFirstAvatar ? 0 : '-lg',
         borderWidth: 3,
         borderColor,
         borderRadius,
         size: child?.props.size ? child.props.size : props.size,
       };
 
-      return cloneElement(child, compact(childProps));
+      return cloneElement(child, compact(childProps) as Partial<AvatarProps>);
     });
 
     const groupStyles: SystemStyleObject = {

packages/react-native-ficus-ui/src/components/avatar/avatar.tsx

@@ -68,13 +68,14 @@ export const Avatar = forwardRef<AvatarProps, 'View'>(
          * To avoid using a context, we clone the element and apply the style retrieved with the `useMultiStyleConfig`
          */}
         {React.Children.map(children as any, (child: React.ReactElement) => {
+          const childProps = child.props as Record<string, any>;
           return React.cloneElement(child, {
             __styles: {
               ...styles.badge,
-              ...child.props.__styles,
+              ...childProps.__styles,
             },
             size: props.size ?? styles.container?.width,
-          });
+          } as Record<string, any>);
         })}
       </ficus.View>
     );

packages/react-native-ficus-ui/src/components/button/button.service.tsx

@@ -26,10 +26,11 @@ function applyColorToChild(
 ): React.ReactNode {
   if (!React.isValidElement(child)) return child;
 
+  const existingProps = child.props as Record<string, any>;
   // If it's a primitive element like <Icon />, inject color or styles
   const childProps = {
-    ...(child.props || {}),
-    color: child.props?.color || styles?.color,
+    ...existingProps,
+    color: existingProps?.color || styles?.color,
   };
 
   return React.cloneElement(child, childProps);

packages/react-native-ficus-ui/src/components/checkbox/checkbox-group.tsx

@@ -64,20 +64,22 @@ export const CheckboxGroup = forwardRef<CheckboxGroupProps, 'View'>(
         return React.Children.map(childrenProp, (child): React.ReactNode => {
           if (!React.isValidElement(child)) return child;
 
+          const childProps = child.props as Record<string, any>;
+
           // If child is a Checkbox component
           if (child.type === Checkbox) {
             return React.cloneElement(child, {
-              key: `checkbox-${checkboxGroupId}-${child.props.value}`,
+              key: `checkbox-${checkboxGroupId}-${childProps.value}`,
               // @ts-expect-error : conversion issue
               onChange: handleOnChange,
-              isChecked: value.indexOf(child.props.value) > -1,
+              isChecked: value.indexOf(childProps.value) > -1,
               ...(props.colorScheme ? { colorScheme: props.colorScheme } : {}),
             });
           }
 
           // If child has children, apply recursively
-          if (child.props?.children) {
-            const updatedChildren = renderRecursive(child.props.children);
+          if (childProps?.children) {
+            const updatedChildren = renderRecursive(childProps.children);
             return React.cloneElement(child, undefined, updatedChildren);
           }
 

packages/react-native-ficus-ui/src/components/checkbox/index.tsx

@@ -80,7 +80,7 @@ export const Checkbox = forwardRef<CheckboxProps, 'TouchableOpacity'>(
           ...(iconStyles.size ? { size: iconStyles.size } : {}),
           ...(iconStyles.iconSet ? { iconSet: iconStyles.iconSet } : {}),
           __styles: iconStyles,
-        })
+        } as Record<string, any>)
       : icon;
 
     const renderChildren = () => {

packages/react-native-ficus-ui/src/components/icon-button/index.tsx

@@ -32,7 +32,7 @@ export const IconButton = forwardRef<IconButtonProps, 'Pressable'>(
       ? cloneElement(props.icon as ReactElement, {
           color: textStyles?.color,
           size: textStyles?.fontSize,
-        })
+        } as Record<string, any>)
       : props.icon;
 
     return (

packages/react-native-ficus-ui/src/components/input/index.tsx

@@ -126,8 +126,8 @@ export const Input = forwardRef<InputProps, 'TextInput'>((props, ref) => {
         {prefix && <ficus.View __styles={prefixStyles}>{prefix}</ficus.View>}
         <ficus.TextInput
           ref={innerRef}
-          onFocus={onFocusInput}
-          onBlur={onBlurInput}
+          onFocus={onFocusInput as any}
+          onBlur={onBlurInput as any}
           __styles={inputStyles}
           editable={!isDisabled}
           aria-disabled={isDisabled}