From 89dd1db097913262126e1fa2a0ff41305e7bb6cd Mon Sep 17 00:00:00 2001 From: Mathieu Acthernoene Date: Wed, 1 Jul 2026 11:45:46 +0200 Subject: [PATCH 1/4] Remove SafeAreaView from public API # Conflicts: # packages/react-native/ReactNativeApi.d.ts # Conflicts: # packages/react-native/ReactNativeApi.d.ts --- .../workflow-scripts/addDescriptiveLabels.js | 1 - packages/eslint-plugin-react-native/utils.js | 4 - .../src/configs/lazy-imports.js | 1 - .../RCTSafeAreaViewNativeComponent.js | 12 -- .../Components/SafeAreaView/SafeAreaView.d.ts | 33 ------ .../Components/SafeAreaView/SafeAreaView.js | 35 ------ .../__tests__/SafeAreaView-itest.js | 38 ------- .../TextInput/InputAccessoryView.js | 2 +- .../LogBox/UI/LogBoxInspectorFooterButton.js | 2 +- .../LogBox/UI/LogBoxInspectorHeader.js | 2 +- packages/react-native/ReactNativeApi.d.ts | 12 +- packages/react-native/__typetests__/index.tsx | 26 ----- packages/react-native/index.js | 14 --- packages/react-native/index.js.flow | 3 - .../elementinspector/InspectorPanel.js | 2 +- packages/react-native/types/index.d.ts | 1 - .../RNTesterPlatformTestResultView.js | 9 +- .../SafeAreaView/SafeAreaViewExample.js | 103 ------------------ .../rn-tester/js/utils/RNTesterList.ios.js | 4 - private/helloworld/App.tsx | 5 +- 20 files changed, 11 insertions(+), 298 deletions(-) delete mode 100644 packages/react-native/Libraries/Components/SafeAreaView/RCTSafeAreaViewNativeComponent.js delete mode 100644 packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.d.ts delete mode 100644 packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.js delete mode 100644 packages/react-native/Libraries/Components/SafeAreaView/__tests__/SafeAreaView-itest.js delete mode 100644 packages/rn-tester/js/examples/SafeAreaView/SafeAreaViewExample.js diff --git a/.github/workflow-scripts/addDescriptiveLabels.js b/.github/workflow-scripts/addDescriptiveLabels.js index 4493fbb48c63..dee7562045fb 100644 --- a/.github/workflow-scripts/addDescriptiveLabels.js +++ b/.github/workflow-scripts/addDescriptiveLabels.js @@ -69,7 +69,6 @@ const components = [ 'ProgressBarAndroid', 'ProgressViewIOS', 'RefreshControl', - 'SafeAreaView', 'ScrollView', 'SectionList', 'SegmentedControlIOS', diff --git a/packages/eslint-plugin-react-native/utils.js b/packages/eslint-plugin-react-native/utils.js index 98d1e90ca0b0..0cfc0c260c6b 100644 --- a/packages/eslint-plugin-react-native/utils.js +++ b/packages/eslint-plugin-react-native/utils.js @@ -102,10 +102,6 @@ const publicAPIMapping = { 'RefreshControlPropsIOS', ], }, - 'Libraries/Components/SafeAreaView/SafeAreaView': { - default: 'SafeAreaView', - types: null, - }, 'Libraries/Components/ScrollView/ScrollView': { default: 'ScrollView', types: [ diff --git a/packages/react-native-babel-preset/src/configs/lazy-imports.js b/packages/react-native-babel-preset/src/configs/lazy-imports.js index 95cb75e262c2..23833aa2c14d 100644 --- a/packages/react-native-babel-preset/src/configs/lazy-imports.js +++ b/packages/react-native-babel-preset/src/configs/lazy-imports.js @@ -29,7 +29,6 @@ module.exports = new Set([ 'Pressable', 'ProgressBarAndroid', 'ProgressViewIOS', - 'SafeAreaView', 'ScrollView', 'SectionList', 'Slider', diff --git a/packages/react-native/Libraries/Components/SafeAreaView/RCTSafeAreaViewNativeComponent.js b/packages/react-native/Libraries/Components/SafeAreaView/RCTSafeAreaViewNativeComponent.js deleted file mode 100644 index d5167277bf5a..000000000000 --- a/packages/react-native/Libraries/Components/SafeAreaView/RCTSafeAreaViewNativeComponent.js +++ /dev/null @@ -1,12 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow strict-local - * @format - */ - -export * from '../../../src/private/specs_DEPRECATED/components/RCTSafeAreaViewNativeComponent'; -export {default} from '../../../src/private/specs_DEPRECATED/components/RCTSafeAreaViewNativeComponent'; diff --git a/packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.d.ts b/packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.d.ts deleted file mode 100644 index 03c5dced183f..000000000000 --- a/packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.d.ts +++ /dev/null @@ -1,33 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - */ - -import type * as React from 'react'; -import {Constructor} from '../../../types/private/Utilities'; -import {HostInstance} 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 {} - -declare const SafeAreaViewBase: Constructor & - 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 deleted file mode 100644 index 2b141c8c8494..000000000000 --- a/packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow strict-local - * @format - */ - -import type {HostInstance} from '../../../src/private/types/HostInstance'; -import type {ViewProps} from '../View/ViewPropTypes'; - -import Platform from '../../Utilities/Platform'; -import View from '../View/View'; -import * as React from 'react'; - -export type SafeAreaViewInstance = HostInstance; - -/** - * Renders content within the safe area boundaries of a device. Currently only applicable to iOS devices with iOS version 11 or later. Automatically applies padding to reflect the portion of the view not covered by navigation bars, tab bars, toolbars, and other ancestor views. - * - * @see https://reactnative.dev/docs/safeareaview - * @deprecated Use `react-native-safe-area-context` instead. - * @platform ios - */ -const SafeAreaView: component( - ref?: React.RefSetter, - ...props: ViewProps -) = Platform.select({ - ios: require('./RCTSafeAreaViewNativeComponent').default, - default: View, -}); - -export default SafeAreaView; diff --git a/packages/react-native/Libraries/Components/SafeAreaView/__tests__/SafeAreaView-itest.js b/packages/react-native/Libraries/Components/SafeAreaView/__tests__/SafeAreaView-itest.js deleted file mode 100644 index 0fcae9f2e282..000000000000 --- a/packages/react-native/Libraries/Components/SafeAreaView/__tests__/SafeAreaView-itest.js +++ /dev/null @@ -1,38 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow strict-local - * @format - */ - -import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment'; - -import * as Fantom from '@react-native/fantom'; -import * as React from 'react'; -import {SafeAreaView, Text} from 'react-native'; - -describe('', () => { - it('renders with children', () => { - const root = Fantom.createRoot(); - - Fantom.runTask(() => { - root.render( - // collapsable={false} is needed to prevent the View (SafeAreaView falls - // back to View in non-iOS environments) from being optimized away in - // the Fantom output. - - Hello World! - , - ); - }); - - expect(root.getRenderedOutput({props: []}).toJSX()).toEqual( - - Hello World! - , - ); - }); -}); diff --git a/packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js b/packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js index 4b2e7d961c4c..8e00bc61233d 100644 --- a/packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js +++ b/packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js @@ -8,7 +8,7 @@ * @format */ -import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView'; +import SafeAreaView from '../../../src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE'; import StyleSheet, { type ColorValue, type ViewStyleProp, diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js index 3db512ed3d43..3a3d5da97792 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js @@ -8,7 +8,7 @@ * @format */ -import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView'; +import SafeAreaView from '../../../src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE'; import View from '../../Components/View/View'; import StyleSheet from '../../StyleSheet/StyleSheet'; import Text from '../../Text/Text'; diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js index a5b5329d440e..8657f427f681 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js @@ -11,7 +11,7 @@ import type {ViewProps} from '../../Components/View/ViewPropTypes'; import type {LogLevel} from '../Data/LogBoxLog'; -import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView'; +import SafeAreaView from '../../../src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE'; import View from '../../Components/View/View'; import StyleSheet from '../../StyleSheet/StyleSheet'; import Text from '../../Text/Text'; diff --git a/packages/react-native/ReactNativeApi.d.ts b/packages/react-native/ReactNativeApi.d.ts index 293ae885d55d..a0058c593202 100644 --- a/packages/react-native/ReactNativeApi.d.ts +++ b/packages/react-native/ReactNativeApi.d.ts @@ -4,7 +4,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * - * @generated SignedSource<<67eb674c33870c82986054f0cee48385>> + * @generated SignedSource<<2872f67e2c5b628c1fe445a7dfde4cde>> * * This file was generated by scripts/js-api/build-types/index.js. */ @@ -358,12 +358,6 @@ declare const requireNativeComponent_default: ( uiViewClassName: string, ) => HostComponent declare const RootTagContext: React.Context -declare const SafeAreaView: typeof SafeAreaView_default -declare const SafeAreaView_default: ( - props: ViewProps & { - ref?: React.Ref - }, -) => React.ReactNode declare const ScrollView: typeof ScrollViewWrapper & ScrollViewComponentStatics declare const ScrollViewContext_default: React.Context declare const ScrollViewWrapper: ( @@ -4342,8 +4336,6 @@ declare type Runnable = ( declare type Runnables = { [appKey: string]: Runnable } -declare type SafeAreaView = typeof SafeAreaView -declare type SafeAreaViewInstance = HostInstance declare type ScaledSize = DisplayMetrics declare type ScheduleLocalNotificationDetails = PresentLocalNotificationDetails & { @@ -6089,8 +6081,6 @@ export { RootViewStyleProvider, // 8792d506 Runnable, // 594dd93a Runnables, // 4367c557 - SafeAreaView, // 47b1ede1 - SafeAreaViewInstance, // 21dba39c ScaledSize, // 07e417c7 ScrollEvent, // d7abdd0a ScrollResponderType, // 079145bb diff --git a/packages/react-native/__typetests__/index.tsx b/packages/react-native/__typetests__/index.tsx index 1df236c3bc71..f1fb41fa42da 100644 --- a/packages/react-native/__typetests__/index.tsx +++ b/packages/react-native/__typetests__/index.tsx @@ -115,7 +115,6 @@ import { UIManager, View, ViewStyle, - SafeAreaView, VirtualizedList, findNodeHandle, requireNativeComponent, @@ -1593,31 +1592,6 @@ class BridgedComponentTest extends React.Component { } } -const SafeAreaViewTest = () => { - const viewRef = React.createRef>(); - - return ( - <> - ; - ; - { - ref?.focus(); - ref?.blur(); - ref?.measure( - (x, y, width, height, pageX, pageY): number => - x + y + width + height + pageX + pageY, - ); - ref?.measureInWindow( - (x, y, width, height): number => x + y + width + height, - ); - ref?.setNativeProps({focusable: false}); - }} - /> - - ); -}; - const SwitchRefTest = () => { const switchRef = React.createRef>(); diff --git a/packages/react-native/index.js b/packages/react-native/index.js index 533c97f038fa..e4764c016499 100644 --- a/packages/react-native/index.js +++ b/packages/react-native/index.js @@ -103,20 +103,6 @@ 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/AppAndFlow/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/AppAndFlow/react-native-safe-area-context', - ); - return require('./Libraries/Components/SafeAreaView/SafeAreaView').default; - }, get ScrollView() { return require('./Libraries/Components/ScrollView/ScrollView').default; }, diff --git a/packages/react-native/index.js.flow b/packages/react-native/index.js.flow index 53c4818af9ce..aef8a958afb9 100644 --- a/packages/react-native/index.js.flow +++ b/packages/react-native/index.js.flow @@ -108,9 +108,6 @@ export type { } from './Libraries/Components/RefreshControl/RefreshControl'; export {default as RefreshControl} from './Libraries/Components/RefreshControl/RefreshControl'; -export type {SafeAreaViewInstance} from './Libraries/Components/SafeAreaView/SafeAreaView'; -export {default as SafeAreaView} from './Libraries/Components/SafeAreaView/SafeAreaView'; - export type { ScrollViewImperativeMethods, ScrollViewInstance, diff --git a/packages/react-native/src/private/devsupport/devmenu/elementinspector/InspectorPanel.js b/packages/react-native/src/private/devsupport/devmenu/elementinspector/InspectorPanel.js index 9e5d04f30038..b4195f431486 100644 --- a/packages/react-native/src/private/devsupport/devmenu/elementinspector/InspectorPanel.js +++ b/packages/react-native/src/private/devsupport/devmenu/elementinspector/InspectorPanel.js @@ -12,7 +12,7 @@ import type {ElementsHierarchy, InspectedElement} from './Inspector'; -import SafeAreaView from '../../../../../Libraries/Components/SafeAreaView/SafeAreaView'; +import SafeAreaView from '../../../components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE'; import * as React from 'react'; const ScrollView = diff --git a/packages/react-native/types/index.d.ts b/packages/react-native/types/index.d.ts index f410d3304588..7c7a81f6a326 100644 --- a/packages/react-native/types/index.d.ts +++ b/packages/react-native/types/index.d.ts @@ -89,7 +89,6 @@ export * from '../Libraries/Components/LayoutConformance/LayoutConformance'; export * from '../Libraries/Components/Pressable/Pressable'; export * from '../Libraries/Components/ProgressBarAndroid/ProgressBarAndroid'; export * from '../Libraries/Components/RefreshControl/RefreshControl'; -export * from '../Libraries/Components/SafeAreaView/SafeAreaView'; export * from '../Libraries/Components/ScrollView/ScrollView'; export * from '../Libraries/Components/StatusBar/StatusBar'; export * from '../Libraries/Components/Switch/Switch'; diff --git a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js index b71ce8beb50e..075f8cb4eae9 100644 --- a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js +++ b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js @@ -25,7 +25,6 @@ import { KeyboardAvoidingView, Modal, Platform, - SafeAreaView, StyleSheet, Switch, Text, @@ -86,7 +85,7 @@ function FilterModalButton(props: FilterModalProps) { animationType="fade" presentationStyle="overFullScreen" transparent={true}> - + @@ -122,7 +121,7 @@ function FilterModalButton(props: FilterModalProps) { - + ); @@ -265,7 +264,7 @@ export default function RNTesterPlatformTestResultView( animationType="slide" onRequestClose={handleMaximizedPress} visible={resultsExpanded}> - - + ); diff --git a/packages/rn-tester/js/examples/SafeAreaView/SafeAreaViewExample.js b/packages/rn-tester/js/examples/SafeAreaView/SafeAreaViewExample.js deleted file mode 100644 index 0acfd5776968..000000000000 --- a/packages/rn-tester/js/examples/SafeAreaView/SafeAreaViewExample.js +++ /dev/null @@ -1,103 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow strict-local - * @format - */ - -'use strict'; - -import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; - -import RNTesterText from '../../components/RNTesterText'; -import * as React from 'react'; -import {useState} from 'react'; -import {Button, DeviceInfo, Modal, StyleSheet, View} from 'react-native'; - -function SafeAreaViewExample(): React.Node { - const {SafeAreaView} = require('react-native'); - const [modalVisible, setModalVisible] = useState(false); - - const toggleModal = (visible: boolean) => { - setModalVisible(visible); - }; - - return ( - - toggleModal(false)} - animationType="slide" - supportedOrientations={['portrait', 'landscape']}> - - - -