From 93a0a64c162f0167a95f7e2eb659df7c8aa8de18 Mon Sep 17 00:00:00 2001 From: Tommy Nguyen <4123478+tido64@users.noreply.github.com> Date: Mon, 21 Jul 2025 08:00:31 +0200 Subject: [PATCH] chore: replace deprecated `SafeAreaView` --- example/App.tsx | 2 +- example/SafeAreaView.tsx | 15 +++++++++++++++ example/ios/Podfile.lock | 6 ++++++ example/macos/Podfile.lock | 6 ++++++ example/package.json | 1 + example/visionos/Podfile.lock | 6 ++++++ yarn.lock | 11 +++++++++++ 7 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 example/SafeAreaView.tsx diff --git a/example/App.tsx b/example/App.tsx index 39cd459f5..d1d5e580f 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useMemo, useState } from "react"; import type { NativeSyntheticEvent } from "react-native"; import { NativeModules, - SafeAreaView, ScrollView, StatusBar, StyleSheet, @@ -13,6 +12,7 @@ import { } from "react-native"; // @ts-expect-error no type definitions available import { version as coreVersion } from "react-native/Libraries/Core/ReactNativeVersion"; +import { SafeAreaView } from "./SafeAreaView"; declare global { export const RN$Bridgeless: boolean; diff --git a/example/SafeAreaView.tsx b/example/SafeAreaView.tsx new file mode 100644 index 000000000..0f7dd9907 --- /dev/null +++ b/example/SafeAreaView.tsx @@ -0,0 +1,15 @@ +import * as React from "react"; +import type { SafeAreaViewProps } from "react-native-safe-area-context"; +import { + SafeAreaProvider, + SafeAreaView as SafeAreaViewInternal, + initialWindowMetrics, +} from "react-native-safe-area-context"; + +export function SafeAreaView(props: SafeAreaViewProps) { + return ( + + + + ); +} diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index f67129ba1..bd8a2c680 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -1211,6 +1211,8 @@ PODS: - React-jsiexecutor - React-RCTFBReactNativeSpec - ReactCommon/turbomodule/core + - react-native-safe-area-context (5.5.2): + - React-Core - React-NativeModulesApple (0.78.2): - glog - React-callinvoker @@ -1572,6 +1574,7 @@ DEPENDENCIES: - React-logger (from `../../node_modules/react-native/ReactCommon/logger`) - React-Mapbuffer (from `../../node_modules/react-native/ReactCommon`) - React-microtasksnativemodule (from `../../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`) + - react-native-safe-area-context (from `../../node_modules/react-native-safe-area-context`) - React-NativeModulesApple (from `../../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`) - React-perflogger (from `../../node_modules/react-native/ReactCommon/reactperflogger`) - React-performancetimeline (from `../../node_modules/react-native/ReactCommon/react/performance/timeline`) @@ -1684,6 +1687,8 @@ EXTERNAL SOURCES: :path: "../../node_modules/react-native/ReactCommon" React-microtasksnativemodule: :path: "../../node_modules/react-native/ReactCommon/react/nativemodule/microtasks" + react-native-safe-area-context: + :path: "../../node_modules/react-native-safe-area-context" React-NativeModulesApple: :path: "../../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios" React-perflogger: @@ -1787,6 +1792,7 @@ SPEC CHECKSUMS: React-logger: 763728cf4eebc9c5dc9bfc3649e22295784f69f3 React-Mapbuffer: 63278529b5cf531a7eaf8fc71244fabb062ca90c React-microtasksnativemodule: 8eac9377da54b41703abb23e3781b9c413acfdc8 + react-native-safe-area-context: 0f7bf11598f9a61b7ceac8dc3f59ef98697e99e1 React-NativeModulesApple: 83ea61c133a66d967bbd8abbb5bf3c2cdcd5ff25 React-perflogger: 5f8fa36a8e168fb355efe72099efe77213bc2ac6 React-performancetimeline: 8c0ecfa1ae459cc5678a65f95ac3bf85644d6feb diff --git a/example/macos/Podfile.lock b/example/macos/Podfile.lock index 625b7d8e8..4d6794071 100644 --- a/example/macos/Podfile.lock +++ b/example/macos/Podfile.lock @@ -1212,6 +1212,8 @@ PODS: - React-jsiexecutor - React-RCTFBReactNativeSpec - ReactCommon/turbomodule/core + - react-native-safe-area-context (5.5.2): + - React-Core - React-NativeModulesApple (0.78.3): - glog - React-callinvoker @@ -1573,6 +1575,7 @@ DEPENDENCIES: - React-logger (from `../../node_modules/react-native-macos/ReactCommon/logger`) - React-Mapbuffer (from `../../node_modules/react-native-macos/ReactCommon`) - React-microtasksnativemodule (from `../../node_modules/react-native-macos/ReactCommon/react/nativemodule/microtasks`) + - react-native-safe-area-context (from `../../node_modules/react-native-safe-area-context`) - React-NativeModulesApple (from `../../node_modules/react-native-macos/ReactCommon/react/nativemodule/core/platform/ios`) - React-perflogger (from `../../node_modules/react-native-macos/ReactCommon/reactperflogger`) - React-performancetimeline (from `../../node_modules/react-native-macos/ReactCommon/react/performance/timeline`) @@ -1682,6 +1685,8 @@ EXTERNAL SOURCES: :path: "../../node_modules/react-native-macos/ReactCommon" React-microtasksnativemodule: :path: "../../node_modules/react-native-macos/ReactCommon/react/nativemodule/microtasks" + react-native-safe-area-context: + :path: "../../node_modules/react-native-safe-area-context" React-NativeModulesApple: :path: "../../node_modules/react-native-macos/ReactCommon/react/nativemodule/core/platform/ios" React-perflogger: @@ -1787,6 +1792,7 @@ SPEC CHECKSUMS: React-logger: 403502d548fbc097ab2c5a783ca98f5e84390bad React-Mapbuffer: 3815edc6553967769cdd5e9127284926416270f0 React-microtasksnativemodule: 67e75d6d737a78daaee8ea4300ddb555ef0909b0 + react-native-safe-area-context: 0f7bf11598f9a61b7ceac8dc3f59ef98697e99e1 React-NativeModulesApple: b575fb27ea57ed5be05928d26ebae10ec2784a43 React-perflogger: 3756bfe3ff8cc8fffed3c51dce34cef861d4b82a React-performancetimeline: c4678b2226a660268cc478662ffc43a2ab1b5d30 diff --git a/example/package.json b/example/package.json index f22ba6927..de4a4ca7f 100644 --- a/example/package.json +++ b/example/package.json @@ -24,6 +24,7 @@ "react": "19.0.0", "react-native": "^0.78.0", "react-native-macos": "^0.78.0", + "react-native-safe-area-context": "^5.5.2", "react-native-windows": "^0.78.0" }, "devDependencies": { diff --git a/example/visionos/Podfile.lock b/example/visionos/Podfile.lock index 2f1223f77..eeda8b3de 100644 --- a/example/visionos/Podfile.lock +++ b/example/visionos/Podfile.lock @@ -1245,6 +1245,8 @@ PODS: - React-jsiexecutor - React-RCTFBReactNativeSpec - ReactCommon/turbomodule/core + - react-native-safe-area-context (5.5.2): + - React-Core - React-NativeModulesApple (0.78.0): - glog - React-callinvoker @@ -1626,6 +1628,7 @@ DEPENDENCIES: - "React-logger (from `../node_modules/@callstack/react-native-visionos/ReactCommon/logger`)" - "React-Mapbuffer (from `../node_modules/@callstack/react-native-visionos/ReactCommon`)" - "React-microtasksnativemodule (from `../node_modules/@callstack/react-native-visionos/ReactCommon/react/nativemodule/microtasks`)" + - react-native-safe-area-context (from `../../node_modules/react-native-safe-area-context`) - "React-NativeModulesApple (from `../node_modules/@callstack/react-native-visionos/ReactCommon/react/nativemodule/core/platform/ios`)" - "React-perflogger (from `../node_modules/@callstack/react-native-visionos/ReactCommon/reactperflogger`)" - "React-performancetimeline (from `../node_modules/@callstack/react-native-visionos/ReactCommon/react/performance/timeline`)" @@ -1741,6 +1744,8 @@ EXTERNAL SOURCES: :path: "../node_modules/@callstack/react-native-visionos/ReactCommon" React-microtasksnativemodule: :path: "../node_modules/@callstack/react-native-visionos/ReactCommon/react/nativemodule/microtasks" + react-native-safe-area-context: + :path: "../../node_modules/react-native-safe-area-context" React-NativeModulesApple: :path: "../node_modules/@callstack/react-native-visionos/ReactCommon/react/nativemodule/core/platform/ios" React-perflogger: @@ -1850,6 +1855,7 @@ SPEC CHECKSUMS: React-logger: 9861e645fb221ca8c40a65fe19f7a0c968d6a324 React-Mapbuffer: 4eebc9c2565dc0cd2453e70525cf591650345bfb React-microtasksnativemodule: c750a8a62a0b84afcab68e67f4e7fc6f594d34f4 + react-native-safe-area-context: 0f7bf11598f9a61b7ceac8dc3f59ef98697e99e1 React-NativeModulesApple: 302a72119df5cd41283fe789072eda34ec51317a React-perflogger: f7cf057acfecf79822c1ca760fc558c3401635e0 React-performancetimeline: f155e5e07c033691618adc82429532119751cf2f diff --git a/yarn.lock b/yarn.lock index 8a4ae70d1..4c9b49065 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7769,6 +7769,7 @@ __metadata: react: "npm:19.0.0" react-native: "npm:^0.78.0" react-native-macos: "npm:^0.78.0" + react-native-safe-area-context: "npm:^5.5.2" react-native-test-app: "workspace:*" react-native-windows: "npm:^0.78.0" webdriverio: "npm:^9.0.0" @@ -12162,6 +12163,16 @@ __metadata: languageName: node linkType: hard +"react-native-safe-area-context@npm:^5.5.2": + version: 5.5.2 + resolution: "react-native-safe-area-context@npm:5.5.2" + peerDependencies: + react: "*" + react-native: "*" + checksum: 10c0/529cafcafbc1d994f6d9c9be41ae4f78768b7c103a22265d3fe5223a930249e0a07a934b5ec358ce510622061f339a20c2147b620bd15032366b12b4258c2ce5 + languageName: node + linkType: hard + "react-native-test-app@workspace:*, react-native-test-app@workspace:.": version: 0.0.0-use.local resolution: "react-native-test-app@workspace:."