Skip to content

Commit 3e297da

Browse files
lukewalczaklukewalczak
authored
chore: update rn expo to the latest (#4724)
1 parent b6ee2f1 commit 3e297da

File tree

16 files changed

+824
-1483
lines changed

16 files changed

+824
-1483
lines changed

‎docs/src/components/ScreenshotTabs.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const ScreenshotTabs: React.FC<ScreenshotTabsProps> = ({
2121
screenshotData,
2222
baseUrl,
2323
}) => {
24-
const renderScreenhot = (src: string): JSX.Element => (
24+
const renderScreenhot = (src: string): React.JSX.Element => (
2525
<img src={`${baseUrl}${src}`} className={getClassName(src)} />
2626
);
2727

‎docs/src/components/ThemeColorsTable.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,14 @@ import {
1313
getUniqueNestedKeys,
1414
} from '../utils/themeColors';
1515

16-
const getTableHeader = (keys: string[]): JSX.Element[] => {
16+
const getTableHeader = (keys: string[]): React.JSX.Element[] => {
1717
return keys.map((key) => <th key={key}>{key}</th>);
1818
};
1919

20-
const getTableCell = (keys: string[], modes: DataObject): JSX.Element[] => {
20+
const getTableCell = (
21+
keys: string[],
22+
modes: DataObject
23+
): React.JSX.Element[] => {
2124
return keys.map((key) => {
2225
const value = modes[key];
2326
if (typeof value === 'string') {
@@ -33,7 +36,7 @@ const FlatTable = ({
3336
}: {
3437
themeColorsData: DataObject;
3538
uniqueKeys: string[];
36-
}): JSX.Element => {
39+
}): React.JSX.Element => {
3740
const rows = Object.keys(themeColorsData).map((mode) => {
3841
return (
3942
<tr key={`${mode}`}>
@@ -68,7 +71,7 @@ const TabbedTable = ({
6871
}: {
6972
themeColorsData: DataObject;
7073
uniqueKeys: string[];
71-
}): JSX.Element => {
74+
}): React.JSX.Element => {
7275
const tabTableContent = Object.keys(themeColorsData).map((key) => {
7376
const modes = themeColorsData[key] as DataObject;
7477
const rows = Object.keys(modes).map((mode) => {
@@ -111,7 +114,7 @@ const ThemeColorsTable = ({
111114
}: {
112115
themeColorsData: DataObject;
113116
componentName: string;
114-
}): JSX.Element | null => {
117+
}): React.JSX.Element | null => {
115118
const uniqueKeys = getUniqueNestedKeys(themeColorsData);
116119
const nestingLevel = getMaxNestedLevel(themeColorsData);
117120
const isFlatTable = nestingLevel === 1;

‎example/package.json‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,36 +17,36 @@
1717
"@expo/vector-icons": "^14.1.0",
1818
"@expo/webpack-config": "~19.0.1",
1919
"@pchmn/expo-material3-theme": "^1.3.2",
20-
"@react-native-async-storage/async-storage": "1.23.1",
20+
"@react-native-async-storage/async-storage": "2.1.2",
2121
"@react-native-masked-view/masked-view": "0.3.2",
2222
"@react-navigation/bottom-tabs": "^7.3.10",
2323
"@react-navigation/drawer": "^7.3.9",
2424
"@react-navigation/native": "^7.1.6",
2525
"@react-navigation/stack": "^7.2.10",
26-
"expo": "~52.0.46",
27-
"expo-crypto": "~14.0.2",
28-
"expo-dev-client": "~5.0.20",
29-
"expo-font": "~13.0.4",
30-
"expo-keep-awake": "~14.0.3",
31-
"expo-splash-screen": "~0.29.24",
32-
"expo-status-bar": "~2.0.1",
33-
"expo-updates": "~0.27.4",
26+
"expo": "~53.0.8",
27+
"expo-crypto": "~14.1.4",
28+
"expo-dev-client": "~5.1.8",
29+
"expo-font": "~13.3.1",
30+
"expo-keep-awake": "~14.1.4",
31+
"expo-splash-screen": "~0.30.8",
32+
"expo-status-bar": "~2.2.3",
33+
"expo-updates": "~0.28.12",
3434
"file-loader": "^6.2.0",
35-
"react": "18.3.1",
36-
"react-dom": "18.3.1",
37-
"react-native": "0.77.0",
38-
"react-native-gesture-handler": "~2.22.0",
35+
"react": "19.0.0",
36+
"react-dom": "19.0.0",
37+
"react-native": "0.79.2",
38+
"react-native-gesture-handler": "~2.24.0",
3939
"react-native-monorepo-config": "^0.1.6",
40-
"react-native-reanimated": "~3.16.7",
41-
"react-native-safe-area-context": "5.1.0",
42-
"react-native-screens": "~4.8.0",
43-
"react-native-web": "~0.19.13",
40+
"react-native-reanimated": "~3.17.4",
41+
"react-native-safe-area-context": "5.4.0",
42+
"react-native-screens": "~4.10.0",
43+
"react-native-web": "^0.20.0",
4444
"typeface-roboto": "^1.1.13"
4545
},
4646
"devDependencies": {
4747
"@babel/core": "^7.25.2",
4848
"babel-plugin-module-resolver": "^5.0.0",
49-
"babel-preset-expo": "~12.0.0",
49+
"babel-preset-expo": "~13.0.0",
5050
"url-loader": "^4.1.1"
5151
},
5252
"engines": {

‎package.json‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -62,42 +62,39 @@
6262
"@callstack/eslint-config": "^13.0.2",
6363
"@commitlint/config-conventional": "^8.3.4",
6464
"@react-native-vector-icons/material-design-icons": "^12.0.0",
65+
"@react-native/babel-preset": "^0.79.2",
6566
"@react-navigation/native": "^6.1.2",
6667
"@release-it/conventional-changelog": "^1.1.0",
6768
"@testing-library/jest-native": "^5.4.1",
6869
"@testing-library/react-native": "11.5.0",
6970
"@types/color": "^3.0.0",
7071
"@types/jest": "^29.2.1",
7172
"@types/node": "^13.1.0",
73+
"@types/react": "^19.0.0",
7274
"@types/react-dom": "^18.3.1",
7375
"@types/react-native-vector-icons": "^6.4.18",
74-
"@types/react-test-renderer": "^18.3.0",
76+
"@types/react-test-renderer": "^19.0.0",
7577
"@typescript-eslint/eslint-plugin": "^5.41.0",
7678
"@typescript-eslint/parser": "^5.41.0",
7779
"all-contributors-cli": "^6.24.0",
7880
"babel-cli": "^6.26.0",
79-
"babel-core": "^7.0.0-bridge.0",
8081
"babel-jest": "^29.6.3",
8182
"babel-loader": "^8.2.3",
8283
"babel-test": "^0.1.1",
83-
"chalk": "^4.0.0",
8484
"commitlint": "^8.3.4",
8585
"conventional-changelog-cli": "^2.0.11",
86-
"dedent": "^0.7.0",
8786
"eslint": "8.31.0",
88-
"eslint-plugin-flowtype": "^8.0.3",
8987
"eslint-plugin-local-rules": "^1.3.2",
9088
"glob": "^7.1.3",
9189
"husky": "^1.3.1",
9290
"jest": "^29.6.3",
9391
"jest-file-snapshot": "^0.3.2",
94-
"metro-react-native-babel-preset": "0.73.9",
95-
"react": "18.3.1",
96-
"react-dom": "18.3.1",
97-
"react-native": "0.77.0",
92+
"react": "19.0.0",
93+
"react-dom": "19.0.0",
94+
"react-native": "0.79.2",
9895
"react-native-builder-bob": "^0.21.3",
99-
"react-native-safe-area-context": "5.1.0",
100-
"react-test-renderer": "18.3.1",
96+
"react-native-safe-area-context": "5.4.0",
97+
"react-test-renderer": "19.0.0",
10198
"release-it": "^13.4.0",
10299
"rimraf": "^3.0.2",
103100
"typescript": "5.0.4"

‎src/components/BottomNavigation/BottomNavigationRouteScreen.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ interface Props extends ViewProps {
77
}
88

99
class BottomNavigationRouteScreen extends React.Component<Props> {
10-
render(): JSX.Element {
10+
render(): React.JSX.Element {
1111
const { style, index, children, visibility, ...rest } = this.props;
1212

1313
// On Web, the unfocused tab screens can still be clicked since they are transparent, but still there

‎src/components/Typography/AnimatedText.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,6 @@ const styles = StyleSheet.create({
102102
});
103103

104104
export const customAnimatedText = <T,>() =>
105-
AnimatedText as (props: Props<T>) => JSX.Element;
105+
AnimatedText as (props: Props<T>) => React.JSX.Element;
106106

107107
export default AnimatedText;

‎src/components/Typography/Text.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ const styles = StyleSheet.create({
177177

178178
type TextComponent<T> = (
179179
props: Props<T> & { ref?: React.RefObject<TextRef> }
180-
) => JSX.Element;
180+
) => React.JSX.Element;
181181

182182
const Component = forwardRef(Text) as TextComponent<never>;
183183

‎src/components/__tests__/Dialog.test.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,17 @@ import { act, fireEvent, render } from '@testing-library/react-native';
1212
import Dialog from '../../components/Dialog/Dialog';
1313
import Button from '../Button/Button';
1414

15-
jest.mock('react-native/Libraries/Utilities/BackHandler', () =>
16-
// eslint-disable-next-line jest/no-mocks-import
17-
require('react-native/Libraries/Utilities/__mocks__/BackHandler')
18-
);
19-
2015
interface BackHandlerStatic extends RNBackHandlerStatic {
2116
mockPressBack(): void;
2217
}
2318

2419
const BackHandler = RNBackHandler as BackHandlerStatic;
2520

21+
jest.mock('react-native/Libraries/Utilities/BackHandler', () =>
22+
// eslint-disable-next-line jest/no-mocks-import
23+
require('../../utils/__mocks__/BackHandler')
24+
);
25+
2626
describe('Dialog', () => {
2727
it('should render passed children', () => {
2828
const { getByTestId } = render(

‎src/components/__tests__/Menu.test.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -113,17 +113,15 @@ it('uses the default anchorPosition of top', async () => {
113113
);
114114
}
115115

116-
render(makeMenu(false));
116+
const { rerender } = render(makeMenu(false));
117117

118-
jest
119-
.spyOn(View.prototype, 'measureInWindow')
120-
.mockImplementation((fn) => fn(100, 100, 80, 32));
118+
jest.mocked(View.prototype.measureInWindow).mockImplementation((callback) => {
119+
callback(100, 100, 80, 32);
120+
});
121121

122-
// You must update instead of creating directly and using it because
123-
// componentDidUpdate isn't called by default in jest. Forcing the update
124-
// than triggers measureInWindow, which is how Menu decides where to show
125-
// itself.
126-
screen.update(makeMenu(true));
122+
await act(async () => {
123+
rerender(makeMenu(true));
124+
});
127125

128126
await waitFor(() => {
129127
const menu = screen.getByTestId('menu-view');
@@ -157,13 +155,15 @@ it('respects anchorPosition bottom', async () => {
157155
);
158156
}
159157

160-
render(makeMenu(false));
158+
const { rerender } = render(makeMenu(false));
161159

162160
jest
163-
.spyOn(View.prototype, 'measureInWindow')
164-
.mockImplementation((fn) => fn(100, 100, 80, 32));
161+
.mocked(View.prototype.measureInWindow)
162+
.mockImplementation((callback) => callback(100, 100, 80, 32));
165163

166-
screen.update(makeMenu(true));
164+
await act(async () => {
165+
rerender(makeMenu(true));
166+
});
167167

168168
await waitFor(() => {
169169
const menu = screen.getByTestId('menu-view');

‎src/components/__tests__/Modal.test.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,19 @@ import { act, fireEvent, render } from '@testing-library/react-native';
1111
import { MD3LightTheme } from '../../styles/themes';
1212
import Modal from '../Modal';
1313

14-
jest.mock('react-native-safe-area-context', () => ({
15-
useSafeAreaInsets: () => ({ bottom: 44, left: 0, right: 0, top: 37 }),
16-
}));
17-
1814
interface BackHandlerStatic extends RNBackHandlerStatic {
1915
mockPressBack(): void;
2016
}
2117

2218
const BackHandler = RNBackHandler as BackHandlerStatic;
2319

20+
jest.mock('react-native-safe-area-context', () => ({
21+
useSafeAreaInsets: () => ({ bottom: 44, left: 0, right: 0, top: 37 }),
22+
}));
23+
2424
jest.mock('react-native/Libraries/Utilities/BackHandler', () =>
2525
// eslint-disable-next-line jest/no-mocks-import
26-
require('react-native/Libraries/Utilities/__mocks__/BackHandler')
26+
require('../../utils/__mocks__/BackHandler')
2727
);
2828

2929
describe('Modal', () => {

0 commit comments

Comments
 (0)