chore: update examples to use v14 (#1872)

Author: mdjastrzebski

.yarnrc.yml

@@ -10,5 +10,7 @@ npmPreapprovedPackages:
   - '@react-native/*'
   - '@types/react'
   - hermes-compiler
+  - expo
+  - '@expo/cli'
 
 yarnPath: .yarn/releases/yarn-4.11.0.cjs

examples/basic/App.tsx

@@ -1,15 +1,17 @@
 import * as React from 'react';
-import { SafeAreaView } from 'react-native';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import { LoginForm } from './components/LoginForm';
 import { Home } from './components/Home';
 
 const App = () => {
   const [user, setUser] = React.useState<string | null>(null);
 
   return (
-    <SafeAreaView>
-      {user == null ? <LoginForm onLoginSuccess={setUser} /> : <Home user={user} />}
-    </SafeAreaView>
+    <SafeAreaProvider>
+      <SafeAreaView>
+        {user == null ? <LoginForm onLoginSuccess={setUser} /> : <Home user={user} />}
+      </SafeAreaView>
+    </SafeAreaProvider>
   );
 };
 

examples/basic/__tests__/App.test.tsx

@@ -7,9 +7,9 @@ jest.useFakeTimers();
 /**
  * A good place to start is having a tests that your component renders correctly.
  */
-test('renders correctly', () => {
+test('renders correctly', async () => {
   // Idiom: no need to capture render output, as we will use `screen` for queries.
-  render(<App />);
+  await render(<App />);
 
   // Idiom: `getBy*` queries are predicates by themselves, but we will use it with `expect().toBeOnTheScreen()`
   // to clarify our intent.
@@ -26,7 +26,7 @@ test('User can sign in successully with correct credentials', async () => {
   const user = userEvent.setup();
 
   // Idiom: no need to capture render output, as we will use `screen` for queries.
-  render(<App />);
+  await render(<App />);
 
   // Idiom: `getBy*` queries are predicates by themselves, but we will use it with `expect().toBeOnTheScreen()`
   // to clarify our intent.
@@ -65,7 +65,7 @@ test('User can sign in successully with correct credentials', async () => {
  */
 test('User will see errors for incorrect credentials', async () => {
   const user = userEvent.setup();
-  render(<App />);
+  await render(<App />);
 
   expect(screen.getByRole('header', { name: 'Sign in to Example App' })).toBeOnTheScreen();
 
@@ -86,7 +86,7 @@ test('User will see errors for incorrect credentials', async () => {
  */
 test('User can sign in after incorrect attempt', async () => {
   const user = userEvent.setup();
-  render(<App />);
+  await render(<App />);
 
   expect(screen.getByRole('header', { name: 'Sign in to Example App' })).toBeOnTheScreen();
 

examples/basic/components/__tests__/AnimatedView.test.tsx

@@ -13,27 +13,27 @@ describe('AnimatedView', () => {
   });
 
   it('should use native driver when useNativeDriver is true', async () => {
-    render(
+    await render(
       <AnimatedView fadeInDuration={250} useNativeDriver={true}>
         <Text>Test</Text>
       </AnimatedView>,
     );
     expect(screen.root).toHaveStyle({ opacity: 0 });
 
-    act(() => jest.advanceTimersByTime(250));
+    await act(() => jest.advanceTimersByTime(250));
     // Does not work with native driver
     // expect(screen.root).toHaveStyle({ opacity: 1 });
   });
 
   it('should not use native driver when useNativeDriver is false', async () => {
-    render(
+    await render(
       <AnimatedView fadeInDuration={250} useNativeDriver={false}>
         <Text>Test</Text>
       </AnimatedView>,
     );
     expect(screen.root).toHaveStyle({ opacity: 0 });
 
-    act(() => jest.advanceTimersByTime(250));
+    await act(() => jest.advanceTimersByTime(250));
     expect(screen.root).toHaveStyle({ opacity: 1 });
   });
 });

examples/basic/jest-setup.ts

@@ -0,0 +1,3 @@
+import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock';
+
+jest.mock('react-native-safe-area-context', () => mockSafeAreaContext);

examples/basic/package.json

@@ -11,23 +11,24 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "expo": "^53.0.19",
-    "expo-status-bar": "~2.2.3",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "react-native": "0.79.5",
-    "react-native-web": "^0.20.0"
+    "expo": "^54.0.32",
+    "expo-status-bar": "~3.0.9",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-safe-area-context": "^5.6.2",
+    "react-native-web": "^0.21.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
-    "@testing-library/react-native": "^13.0.0",
+    "@testing-library/react-native": "^14.0.0-beta.0",
     "@types/eslint": "^8.56.10",
     "@types/jest": "^29.5.12",
-    "@types/react": "~19.0.10",
+    "@types/react": "~19.1.10",
     "eslint": "^8.57.0",
     "jest": "^29.7.0",
-    "react-test-renderer": "19.0.0",
-    "typescript": "^5.3.0"
+    "test-renderer": "0.14.0",
+    "typescript": "~5.9.2"
   },
   "private": true,
   "packageManager": "yarn@4.0.1"