chore: Update react-native to 0.82 (#4842)

* chore: Update RN to 0.82 and Example App Expo version to 54 (WIP)

* chore: Fixed BackHandler and some unit tests

* chore: Missing unit tests update

* chore: updated worklets

* chore: removed patch-package

* chore: package.json re-arrangement and small typescript issues fixed

* fix: applied menu fix for 0.81

* fix: Added missing yarn.lock changes

* fix: Docs

* fix: Docs build fix

* fix: Adjusted node version and removed latest changes

Author: ruben-rebelo

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2.1
 executors:
   default:
     docker:
-      - image: cimg/node:18.20.2
+      - image: cimg/node:20.19.0
     working_directory: ~/react-native-paper
 
 commands:

docs/src/components/DynamicColorTheme.tsx

@@ -2,6 +2,7 @@ import React, { useState, ReactNode } from 'react';
 
 import Color from 'color';
 //@ts-ignore
+// eslint-disable-next-line import/no-unresolved
 import { BlockPicker } from 'react-color';
 
 import Switch from './Switch';

docs/src/components/ScreenshotTabs.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 //@ts-ignore
 import TabItem from '@theme/TabItem';
@@ -21,7 +21,7 @@ const ScreenshotTabs: React.FC<ScreenshotTabsProps> = ({
   screenshotData,
   baseUrl,
 }) => {
-  const renderScreenhot = (src: string): JSX.Element => (
+  const renderScreenhot = (src: string): ReactNode => (
     <img src={`${baseUrl}${src}`} className={getClassName(src)} />
   );
 

docs/src/components/ThemeColorsTable.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 //@ts-ignore
 import Admonition from '@theme/Admonition';
@@ -13,11 +13,11 @@ import {
   getUniqueNestedKeys,
 } from '../utils/themeColors';
 
-const getTableHeader = (keys: string[]): JSX.Element[] => {
+const getTableHeader = (keys: string[]): ReactNode[] => {
   return keys.map((key) => <th key={key}>{key}</th>);
 };
 
-const getTableCell = (keys: string[], modes: DataObject): JSX.Element[] => {
+const getTableCell = (keys: string[], modes: DataObject): ReactNode[] => {
   return keys.map((key) => {
     const value = modes[key];
     if (typeof value === 'string') {
@@ -33,7 +33,7 @@ const FlatTable = ({
 }: {
   themeColorsData: DataObject;
   uniqueKeys: string[];
-}): JSX.Element => {
+}): ReactNode => {
   const rows = Object.keys(themeColorsData).map((mode) => {
     return (
       <tr key={`${mode}`}>
@@ -68,7 +68,7 @@ const TabbedTable = ({
 }: {
   themeColorsData: DataObject;
   uniqueKeys: string[];
-}): JSX.Element => {
+}): ReactNode => {
   const tabTableContent = Object.keys(themeColorsData).map((key) => {
     const modes = themeColorsData[key] as DataObject;
     const rows = Object.keys(modes).map((mode) => {
@@ -111,7 +111,7 @@ const ThemeColorsTable = ({
 }: {
   themeColorsData: DataObject;
   componentName: string;
-}): JSX.Element | null => {
+}): ReactNode | null => {
   const uniqueKeys = getUniqueNestedKeys(themeColorsData);
   const nestingLevel = getMaxNestedLevel(themeColorsData);
   const isFlatTable = nestingLevel === 1;

docs/src/utils/themes.tsx

@@ -1,7 +1,7 @@
 import {
   argbFromHex,
   themeFromSourceColor,
-  //@ts-ignore
+  // eslint-disable-next-line import/no-unresolved
 } from '@material/material-color-utilities';
 import camelCase from 'camelcase';
 import Color from 'color';

example/package.json

@@ -14,42 +14,43 @@
     "web": "EXPO_NO_TYPESCRIPT_SETUP=1 expo start --web"
   },
   "dependencies": {
-    "@expo/vector-icons": "^14.1.0",
+    "@expo/vector-icons": "^15.0.2",
     "@expo/webpack-config": "~19.0.1",
     "@pchmn/expo-material3-theme": "^1.3.2",
-    "@react-native-async-storage/async-storage": "1.23.1",
+    "@react-native-async-storage/async-storage": "2.2.0",
     "@react-native-masked-view/masked-view": "0.3.2",
     "@react-navigation/bottom-tabs": "^7.3.10",
     "@react-navigation/drawer": "^7.3.9",
     "@react-navigation/native": "^7.1.6",
     "@react-navigation/stack": "^7.2.10",
-    "expo": "~52.0.46",
-    "expo-crypto": "~14.0.2",
-    "expo-dev-client": "~5.0.20",
-    "expo-font": "~13.0.4",
-    "expo-keep-awake": "~14.0.3",
-    "expo-splash-screen": "~0.29.24",
-    "expo-status-bar": "~2.0.1",
-    "expo-updates": "~0.27.4",
+    "expo": "^54.0.0",
+    "expo-crypto": "~15.0.7",
+    "expo-dev-client": "~6.0.14",
+    "expo-font": "~14.0.9",
+    "expo-keep-awake": "~15.0.7",
+    "expo-splash-screen": "~31.0.10",
+    "expo-status-bar": "~3.0.8",
+    "expo-updates": "~29.0.12",
     "file-loader": "^6.2.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-native": "0.77.2",
-    "react-native-gesture-handler": "~2.22.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.4",
+    "react-native-gesture-handler": "~2.28.0",
     "react-native-monorepo-config": "^0.1.6",
-    "react-native-reanimated": "~3.16.7",
-    "react-native-safe-area-context": "5.1.0",
-    "react-native-screens": "~4.8.0",
-    "react-native-web": "~0.19.13",
+    "react-native-reanimated": "~4.1.1",
+    "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",
     "typeface-roboto": "^1.1.13"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "babel-plugin-module-resolver": "^5.0.0",
-    "babel-preset-expo": "~12.0.0",
+    "babel-preset-expo": "~54.0.0",
     "url-loader": "^4.1.1"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   }
 }

example/src/Examples/AnimatedFABExample/CustomFAB.tsx

@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-  Animated,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  ViewStyle,
-} from 'react-native';
+import { Animated, Platform, StyleSheet, ViewStyle } from 'react-native';
 
 import { AnimatedFAB } from 'react-native-paper';
 
@@ -18,7 +12,7 @@ type CustomFABProps = {
   label: string;
   animateFrom: 'left' | 'right';
   iconMode?: 'static' | 'dynamic';
-  style?: StyleProp<ViewStyle>;
+  style?: ViewStyle;
 };
 
 const CustomFAB = ({

package.json

@@ -62,16 +62,17 @@
     "@callstack/eslint-config": "^13.0.2",
     "@commitlint/config-conventional": "^8.3.4",
     "@react-native-vector-icons/material-design-icons": "^12.0.0",
+    "@react-native/babel-preset": "^0.82.1",
     "@react-navigation/native": "^6.1.2",
     "@release-it/conventional-changelog": "^1.1.0",
     "@testing-library/jest-native": "^5.4.1",
     "@testing-library/react-native": "11.5.0",
     "@types/color": "^3.0.0",
     "@types/jest": "^29.2.1",
     "@types/node": "^13.1.0",
-    "@types/react-dom": "^18.3.1",
+    "@types/react-dom": "^19.1.1",
     "@types/react-native-vector-icons": "^6.4.18",
-    "@types/react-test-renderer": "^18.3.0",
+    "@types/react-test-renderer": "^19.1.0",
     "@typescript-eslint/eslint-plugin": "^5.41.0",
     "@typescript-eslint/parser": "^5.41.0",
     "all-contributors-cli": "^6.24.0",
@@ -91,16 +92,15 @@
     "husky": "^1.3.1",
     "jest": "^29.6.3",
     "jest-file-snapshot": "^0.3.2",
-    "metro-react-native-babel-preset": "0.73.9",
-    "react": "18.3.1",
+    "react": "19.1.1",
     "react-dom": "18.3.1",
-    "react-native": "0.77.0",
+    "react-native": "0.82.1",
     "react-native-builder-bob": "^0.21.3",
-    "react-native-safe-area-context": "5.1.0",
-    "react-test-renderer": "18.3.1",
+    "react-native-safe-area-context": "5.5.2",
+    "react-test-renderer": "19.1.1",
     "release-it": "^13.4.0",
     "rimraf": "^3.0.2",
-    "typescript": "5.0.4"
+    "typescript": "5.8.3"
   },
   "peerDependencies": {
     "react": "*",

src/components/BottomNavigation/BottomNavigationRouteScreen.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Animated, Platform, View, ViewProps } from 'react-native';
 
 interface Props extends ViewProps {
@@ -7,7 +7,7 @@ interface Props extends ViewProps {
 }
 
 class BottomNavigationRouteScreen extends React.Component<Props> {
-  render(): JSX.Element {
+  render(): ReactNode {
     const { style, index, children, visibility, ...rest } = this.props;
 
     // On Web, the unfocused tab screens can still be clicked since they are transparent, but still there

src/components/Menu/Menu.tsx

@@ -359,11 +359,9 @@ const Menu = ({
         easing: EASING,
         useNativeDriver: true,
       }),
-    ]).start(({ finished }) => {
-      if (finished) {
-        focusFirstDOMNode(menuRef.current);
-        prevRendered.current = true;
-      }
+    ]).start(() => {
+      focusFirstDOMNode(menuRef.current);
+      prevRendered.current = true;
     });
   }, [anchor, attachListeners, measureAnchorLayout, theme]);
 
@@ -377,13 +375,11 @@ const Menu = ({
       duration: ANIMATION_DURATION * animation.scale,
       easing: EASING,
       useNativeDriver: true,
-    }).start(({ finished }) => {
-      if (finished) {
-        setMenuLayout({ width: 0, height: 0 });
-        setRendered(false);
-        prevRendered.current = false;
-        focusFirstDOMNode(anchorRef.current);
-      }
+    }).start(() => {
+      setMenuLayout({ width: 0, height: 0 });
+      setRendered(false);
+      prevRendered.current = false;
+      focusFirstDOMNode(anchorRef.current);
     });
   }, [removeListeners, theme]);