From 73133a31d5a47e71edd4e6b798184df8045e2234 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Enrique=20Lo=CC=81pez=20Man=CC=83as?=
 <eenriquelopez@gmail.com>
Date: Wed, 18 Jun 2025 04:15:05 -0700
Subject: [PATCH] Deprecating SafeAreaView (#51896)

Summary:
`SafeAreaView` has been marked for deprecation some time ago. The [following discussion](https://github.com/react-native-community/discussions-and-proposals/discussions/827) summarizes some of the arguments for it, but in a nutshell: it is iOS-only, limited in functionality, and incompatible with Android 15's enforced edge-to-edge rendering.

~~The Android/Kotlin classes have also been deprecated.~~ Not anymore, they are internal and might stay as they are.

## Changelog:

[General] [Deprecated] - Deprecate SafeAreaView due to its iOS-only support and incompatibility with Android 15 edge-to-edge behavior; recommend using react-native-safe-area-context instead.

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests

Pull Request resolved: https://github.com/facebook/react-native/pull/51896

Test Plan: Access `SafeAreaView` in your code and check that the deprecation warning logs exactly once in the console.

Reviewed By: rshest

Differential Revision: D76816160

Pulled By: cortinico

fbshipit-source-id: 60f539f9425f8ed8e19578a4530cb1f7d9b54488
---
 .../Components/SafeAreaView/SafeAreaView.d.ts         |  9 +++++++++
 .../Libraries/Components/SafeAreaView/SafeAreaView.js |  1 +
 packages/react-native/index.js                        | 11 +++++++++++
 3 files changed, 21 insertions(+)

diff --git a/packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.d.ts b/packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.d.ts
index f96a1a50753..6fa77f5f3c5 100644
--- a/packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.d.ts
+++ b/packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.d.ts
@@ -13,12 +13,21 @@ import {NativeMethods} from '../../../types/public/ReactNativeTypes';
 import {ViewProps} from '../View/ViewPropTypes';
 
 /**
+ * @deprecated
+ * Use `react-native-safe-area-context` instead. This component is deprecated and will be removed in a future release.
+ *
  * Renders nested content and automatically applies paddings reflect the portion of the view
  * that is not covered by navigation bars, tab bars, toolbars, and other ancestor views.
  * Moreover, and most importantly, Safe Area's paddings reflect physical limitation of the screen,
  * such as rounded corners or camera notches (aka sensor housing area on iPhone X).
  */
 declare class SafeAreaViewComponent extends React.Component<ViewProps> {}
+
 declare const SafeAreaViewBase: Constructor<NativeMethods> &
   typeof SafeAreaViewComponent;
+
+/**
+ * @deprecated
+ * Use `react-native-safe-area-context` instead. This component is deprecated and will be removed in a future release.
+ */
 export class SafeAreaView extends SafeAreaViewBase {}
diff --git a/packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.js b/packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.js
index 290fdbd0e06..bee10606e30 100644
--- a/packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.js
+++ b/packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.js
@@ -22,6 +22,7 @@ import * as React from 'react';
  * Moreover, and most importantly, Safe Area's paddings reflect physical
  * limitation of the screen, such as rounded corners or camera notches (aka
  * sensor housing area on iPhone X).
+ * @deprecated Use `react-native-safe-area-context` instead. This component will be removed in a future release.
  */
 const exported: component(
   ref?: React.RefSetter<React.ElementRef<typeof View>>,
diff --git a/packages/react-native/index.js b/packages/react-native/index.js
index 1b8b97682b8..0f4d1c8278d 100644
--- a/packages/react-native/index.js
+++ b/packages/react-native/index.js
@@ -83,7 +83,18 @@ module.exports = {
     return require('./Libraries/Components/RefreshControl/RefreshControl')
       .default;
   },
+  /**
+   * @deprecated SafeAreaView has been deprecated and will be removed in a future release.
+   * Please use 'react-native-safe-area-context' instead.
+   * See https://github.com/th3rdwave/react-native-safe-area-context
+   */
   get SafeAreaView() {
+    warnOnce(
+      'safe-area-view-deprecated',
+      'SafeAreaView has been deprecated and will be removed in a future release. ' +
+        "Please use 'react-native-safe-area-context' instead. " +
+        'See https://github.com/th3rdwave/react-native-safe-area-context',
+    );
     return require('./Libraries/Components/SafeAreaView/SafeAreaView').default;
   },
   get ScrollView() {