chore: replace deprecated SafeAreaView (#2504)

Author: tido64

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;

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 (
+    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+      <SafeAreaViewInternal {...props} />
+    </SafeAreaProvider>
+  );
+}

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

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

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": {

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

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:."