chore: update rn expo to the latest

docs/src/components/ScreenshotTabs.tsx

@@ -21,7 +21,7 @@ const ScreenshotTabs: React.FC<ScreenshotTabsProps> = ({
   screenshotData,
   baseUrl,
 }) => {
-  const renderScreenhot = (src: string): JSX.Element => (
+  const renderScreenhot = (src: string): React.JSX.Element => (
     <img src={`${baseUrl}${src}`} className={getClassName(src)} />
   );
 

docs/src/components/ThemeColorsTable.tsx

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

example/package.json

@@ -17,36 +17,36 @@
     "@expo/vector-icons": "^14.1.0",
     "@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.1.2",
     "@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": "~53.0.8",
+    "expo-crypto": "~14.1.4",
+    "expo-dev-client": "~5.1.8",
+    "expo-font": "~13.3.1",
+    "expo-keep-awake": "~14.1.4",
+    "expo-splash-screen": "~0.30.8",
+    "expo-status-bar": "~2.2.3",
+    "expo-updates": "~0.28.12",
     "file-loader": "^6.2.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-native": "0.77.0",
-    "react-native-gesture-handler": "~2.22.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-native": "0.79.2",
+    "react-native-gesture-handler": "~2.24.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": "~3.17.4",
+    "react-native-safe-area-context": "5.4.0",
+    "react-native-screens": "~4.10.0",
+    "react-native-web": "^0.20.0",
     "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": "~13.0.0",
     "url-loader": "^4.1.1"
   },
   "engines": {

package.json

@@ -62,42 +62,39 @@
     "@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.79.2",
     "@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": "^19.0.0",
     "@types/react-dom": "^18.3.1",
     "@types/react-native-vector-icons": "^6.4.18",
-    "@types/react-test-renderer": "^18.3.0",
+    "@types/react-test-renderer": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^5.41.0",
     "@typescript-eslint/parser": "^5.41.0",
     "all-contributors-cli": "^6.24.0",
     "babel-cli": "^6.26.0",
-    "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^29.6.3",
     "babel-loader": "^8.2.3",
     "babel-test": "^0.1.1",
-    "chalk": "^4.0.0",
     "commitlint": "^8.3.4",
     "conventional-changelog-cli": "^2.0.11",
-    "dedent": "^0.7.0",
     "eslint": "8.31.0",
-    "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-local-rules": "^1.3.2",
     "glob": "^7.1.3",
     "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-dom": "18.3.1",
-    "react-native": "0.77.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-native": "0.79.2",
     "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.4.0",
+    "react-test-renderer": "19.0.0",
     "release-it": "^13.4.0",
     "rimraf": "^3.0.2",
     "typescript": "5.0.4"

src/components/BottomNavigation/BottomNavigationRouteScreen.tsx

@@ -7,7 +7,7 @@ interface Props extends ViewProps {
 }
 
 class BottomNavigationRouteScreen extends React.Component<Props> {
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     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/Typography/AnimatedText.tsx

@@ -102,6 +102,6 @@ const styles = StyleSheet.create({
 });
 
 export const customAnimatedText = <T,>() =>
-  AnimatedText as (props: Props<T>) => JSX.Element;
+  AnimatedText as (props: Props<T>) => React.JSX.Element;
 
 export default AnimatedText;

src/components/Typography/Text.tsx

@@ -177,7 +177,7 @@ const styles = StyleSheet.create({
 
 type TextComponent<T> = (
   props: Props<T> & { ref?: React.RefObject<TextRef> }
-) => JSX.Element;
+) => React.JSX.Element;
 
 const Component = forwardRef(Text) as TextComponent<never>;
 

src/components/__tests__/Dialog.test.tsx

@@ -12,17 +12,17 @@ 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;
 }
 
 const BackHandler = RNBackHandler as BackHandlerStatic;
 
+jest.mock('react-native/Libraries/Utilities/BackHandler', () =>
+  // eslint-disable-next-line jest/no-mocks-import
+  require('../../utils/__mocks__/BackHandler')
+);
+
 describe('Dialog', () => {
   it('should render passed children', () => {
     const { getByTestId } = render(

src/components/__tests__/Menu.test.tsx

@@ -113,17 +113,15 @@ it('uses the default anchorPosition of top', async () => {
     );
   }
 
-  render(makeMenu(false));
+  const { rerender } = render(makeMenu(false));
 
-  jest
-    .spyOn(View.prototype, 'measureInWindow')
-    .mockImplementation((fn) => fn(100, 100, 80, 32));
+  jest.mocked(View.prototype.measureInWindow).mockImplementation((callback) => {
+    callback(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 () => {
+    rerender(makeMenu(true));
+  });
 
   await waitFor(() => {
     const menu = screen.getByTestId('menu-view');
@@ -157,13 +155,15 @@ it('respects anchorPosition bottom', async () => {
     );
   }
 
-  render(makeMenu(false));
+  const { rerender } = render(makeMenu(false));
 
   jest
-    .spyOn(View.prototype, 'measureInWindow')
-    .mockImplementation((fn) => fn(100, 100, 80, 32));
+    .mocked(View.prototype.measureInWindow)
+    .mockImplementation((callback) => callback(100, 100, 80, 32));
 
-  screen.update(makeMenu(true));
+  await act(async () => {
+    rerender(makeMenu(true));
+  });
 
   await waitFor(() => {
     const menu = screen.getByTestId('menu-view');

src/components/__tests__/Modal.test.tsx

@@ -11,19 +11,19 @@ import { act, fireEvent, render } from '@testing-library/react-native';
 import { MD3LightTheme } from '../../styles/themes';
 import Modal from '../Modal';
 
-jest.mock('react-native-safe-area-context', () => ({
-  useSafeAreaInsets: () => ({ bottom: 44, left: 0, right: 0, top: 37 }),
-}));
-
 interface BackHandlerStatic extends RNBackHandlerStatic {
   mockPressBack(): void;
 }
 
 const BackHandler = RNBackHandler as BackHandlerStatic;
 
+jest.mock('react-native-safe-area-context', () => ({
+  useSafeAreaInsets: () => ({ bottom: 44, left: 0, right: 0, top: 37 }),
+}));
+
 jest.mock('react-native/Libraries/Utilities/BackHandler', () =>
   // eslint-disable-next-line jest/no-mocks-import
-  require('react-native/Libraries/Utilities/__mocks__/BackHandler')
+  require('../../utils/__mocks__/BackHandler')
 );
 
 describe('Modal', () => {

src/components/__tests__/ProgressBar.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Animated, Platform, StyleSheet } from 'react-native';
 
-import { render, waitFor } from '@testing-library/react-native';
+import { render, waitFor, act } from '@testing-library/react-native';
 
 import ProgressBar, { Props } from '../ProgressBar';
 
@@ -81,12 +81,22 @@ it('renders progress bar with full height on web', () => {
 });
 
 it('renders progress bar with custom style of filled part', async () => {
+  jest.useFakeTimers();
+
   const tree = render(
     <ProgressBar progress={0.2} fillStyle={styles.fill} testID="progress-bar" />
   );
   await waitFor(() => tree.getByRole(a11yRole).props.onLayout(layoutEvent));
 
+  act(() => {
+    jest.runAllTimers();
+  });
+
+  await waitFor(() => tree.getByTestId('progress-bar-fill'));
+
   expect(tree.getByTestId('progress-bar-fill')).toHaveStyle({
     borderRadius: 4,
   });
+
+  jest.useRealTimers();
 });