chore: Update react-native to 0.82

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, { JSX } from 'react';
 
 //@ts-ignore
 import TabItem from '@theme/TabItem';

docs/src/components/ThemeColorsTable.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 
 //@ts-ignore
 import Admonition from '@theme/Admonition';

docs/src/utils/themes.tsx

@@ -2,6 +2,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

@@ -52,6 +52,7 @@
   },
   "dependencies": {
     "@callstack/react-theme-provider": "^3.0.9",
+    "@react-native/babel-preset": "^0.82.1",
     "color": "^3.1.2",
     "use-latest-callback": "^0.2.3"
   },
@@ -69,9 +70,9 @@
     "@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",
@@ -92,15 +93,15 @@
     "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, { JSX } from 'react';
 import { Animated, Platform, View, ViewProps } from 'react-native';
 
 interface Props extends ViewProps {

src/components/Typography/AnimatedText.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { JSX } from 'react';
 import {
   Animated,
   I18nManager,

src/components/Typography/Text.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { JSX } from 'react';
 import {
   I18nManager,
   StyleProp,

src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap

@@ -565,23 +565,19 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
             <View
               collapsable={false}
               style={
-                [
-                  {
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
-                  },
-                  {
-                    "opacity": 1,
-                    "transform": [
-                      {
-                        "rotate": "0deg",
-                      },
-                    ],
-                  },
-                ]
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "opacity": 1,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                  "transform": [
+                    {
+                      "rotate": "0deg",
+                    },
+                  ],
+                }
               }
               testID="cross-fade-icon-current"
             >
@@ -812,23 +808,19 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
             <View
               collapsable={false}
               style={
-                [
-                  {
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
-                  },
-                  {
-                    "opacity": 1,
-                    "transform": [
-                      {
-                        "rotate": "0deg",
-                      },
-                    ],
-                  },
-                ]
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "opacity": 1,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                  "transform": [
+                    {
+                      "rotate": "0deg",
+                    },
+                  ],
+                }
               }
               testID="cross-fade-icon-current"
             >

src/components/__tests__/Dialog.test.tsx

@@ -12,11 +12,6 @@ import { act, fireEvent, render } from '@testing-library/react-native';
 import Dialog from '../../components/Dialog/Dialog';
 import Button from '../Button/Button';
 
-jest.mock('react-native/Libraries/Utilities/BackHandler', () =>
-  // eslint-disable-next-line jest/no-mocks-import
-  require('react-native/Libraries/Utilities/__mocks__/BackHandler')
-);
-
 interface BackHandlerStatic extends RNBackHandlerStatic {
   mockPressBack(): void;
 }

src/components/__tests__/Menu.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
+import { Animated, Dimensions, StyleSheet, View } from 'react-native';
 
 import { act, render, screen, waitFor } from '@testing-library/react-native';
 
@@ -93,6 +93,16 @@ it('renders menu with content styles', () => {
 );
 
 it('uses the default anchorPosition of top', async () => {
+  const dimensionsSpy = jest.spyOn(Dimensions, 'get').mockReturnValue({
+    width: 400,
+    height: 800,
+    scale: 2,
+    fontScale: 2,
+  });
+  const measureSpy = jest
+    .spyOn(View.prototype, 'measureInWindow')
+    .mockImplementation((fn) => fn(100, 100, 80, 32));
+
   function makeMenu(visible: boolean) {
     return (
       <Portal.Host>
@@ -115,15 +125,13 @@ it('uses the default anchorPosition of top', async () => {
 
   render(makeMenu(false));
 
-  jest
-    .spyOn(View.prototype, 'measureInWindow')
-    .mockImplementation((fn) => fn(100, 100, 80, 32));
-
   // You must update instead of creating directly and using it because
   // componentDidUpdate isn't called by default in jest. Forcing the update
   // than triggers measureInWindow, which is how Menu decides where to show
   // itself.
-  screen.update(makeMenu(true));
+  await act(async () => {
+    screen.update(makeMenu(true));
+  });
 
   await waitFor(() => {
     const menu = screen.getByTestId('menu-view');
@@ -133,9 +141,22 @@ it('uses the default anchorPosition of top', async () => {
       top: 100,
     });
   });
+
+  measureSpy.mockRestore();
+  dimensionsSpy.mockRestore();
 });
 
 it('respects anchorPosition bottom', async () => {
+  const dimensionsSpy = jest.spyOn(Dimensions, 'get').mockReturnValue({
+    width: 400,
+    height: 800,
+    scale: 2,
+    fontScale: 2,
+  });
+  const measureSpy = jest
+    .spyOn(View.prototype, 'measureInWindow')
+    .mockImplementation((fn) => fn(100, 100, 80, 32));
+
   function makeMenu(visible: boolean) {
     return (
       <Portal.Host>
@@ -159,11 +180,9 @@ it('respects anchorPosition bottom', async () => {
 
   render(makeMenu(false));
 
-  jest
-    .spyOn(View.prototype, 'measureInWindow')
-    .mockImplementation((fn) => fn(100, 100, 80, 32));
-
-  screen.update(makeMenu(true));
+  await act(async () => {
+    screen.update(makeMenu(true));
+  });
 
   await waitFor(() => {
     const menu = screen.getByTestId('menu-view');
@@ -173,6 +192,9 @@ it('respects anchorPosition bottom', async () => {
       top: 132,
     });
   });
+
+  measureSpy.mockRestore();
+  dimensionsSpy.mockRestore();
 });
 
 it('animated value changes correctly', () => {

src/components/__tests__/Modal.test.tsx

@@ -21,11 +21,6 @@ interface BackHandlerStatic extends RNBackHandlerStatic {
 
 const BackHandler = RNBackHandler as BackHandlerStatic;
 
-jest.mock('react-native/Libraries/Utilities/BackHandler', () =>
-  // eslint-disable-next-line jest/no-mocks-import
-  require('react-native/Libraries/Utilities/__mocks__/BackHandler')
-);
-
 describe('Modal', () => {
   beforeAll(() => {
     jest.useFakeTimers();