Skip to content

chore: update examples to use v14 #1872

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mdjastrzebski merged 5 commits into from
Jan 23, 2026
Merged

chore: update examples to use v14 #1872

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fe6f3d2
chore: migrate basic
mdjastrzebski Jan 23, 2026
a08247b
chore: migrate cookbook
mdjastrzebski Jan 23, 2026
8e1c82d
chore: upgrade expo to 54
mdjastrzebski Jan 23, 2026
0274b14
fix SafeAreaView warning
mdjastrzebski Jan 23, 2026
b4641d4
validate fix
mdjastrzebski Jan 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .yarnrc.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,7 @@ npmPreapprovedPackages:
- '@react-native/*'
- '@types/react'
- hermes-compiler
- expo
- '@expo/cli'

yarnPath: .yarn/releases/yarn-4.11.0.cjs
10 changes: 6 additions & 4 deletions examples/basic/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};

Expand Down
10 changes: 5 additions & 5 deletions examples/basic/__tests__/App.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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.
Expand Down Expand Up @@ -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();

Expand All @@ -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();

Expand Down
8 changes: 4 additions & 4 deletions examples/basic/components/__tests__/AnimatedView.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
});
});
3 changes: 3 additions & 0 deletions examples/basic/jest-setup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock';

jest.mock('react-native-safe-area-context', () => mockSafeAreaContext);
21 changes: 11 additions & 10 deletions examples/basic/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading