diff --git a/packages/eslint-plugin-react-native/utils.js b/packages/eslint-plugin-react-native/utils.js index 12f0f3c2c417..fa824f8bba76 100644 --- a/packages/eslint-plugin-react-native/utils.js +++ b/packages/eslint-plugin-react-native/utils.js @@ -143,10 +143,6 @@ const publicAPIMapping = { 'RefreshControlPropsIOS', ], }, - 'Libraries/Components/SafeAreaView/SafeAreaView': { - default: 'SafeAreaView', - types: ['SafeAreaViewInstance'], - }, '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 feb40f24ecef..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/components/safeareaview/specs/RCTSafeAreaViewNativeComponent'; -export {default} from '../../../src/private/components/safeareaview/specs/RCTSafeAreaViewNativeComponent'; 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/TextInput/InputAccessoryView.js b/packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js index 5ded8e707aed..c9e3f4c0b97c 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/Components/View/__tests__/ViewSafeAreaInsets-itest.js b/packages/react-native/Libraries/Components/View/__tests__/ViewSafeAreaInsets-itest.js index bfbd1a24515f..007b51149526 100644 --- a/packages/react-native/Libraries/Components/View/__tests__/ViewSafeAreaInsets-itest.js +++ b/packages/react-native/Libraries/Components/View/__tests__/ViewSafeAreaInsets-itest.js @@ -12,6 +12,7 @@ import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment'; import type {HostInstance} from 'react-native'; +import SafeAreaView from '../../../../src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE'; import * as Fantom from '@react-native/fantom'; import * as React from 'react'; import {createRef} from 'react'; @@ -116,3 +117,41 @@ describe('experimental_onSafeAreaInsetsChange', () => { ).toEqual(); }); }); + +describe('', () => { + it('applies the insets it receives as padding', () => { + const root = Fantom.createRoot(); + const nodeRef = createRef(); + + Fantom.runTask(() => { + root.render(); + }); + + expect( + root + .getRenderedOutput({ + props: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'], + }) + .toJSX(), + ).toEqual(); + + Fantom.dispatchNativeEvent(nodeRef, 'safeAreaInsetsChange', { + insets: INSETS, + }); + + expect( + root + .getRenderedOutput({ + props: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'], + }) + .toJSX(), + ).toEqual( + , + ); + }); +}); 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..06569cab0d4c 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js @@ -8,10 +8,9 @@ * @format */ -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'; @@ -27,13 +26,10 @@ type Props = Readonly<{ level: LogLevel, }>; -const LogBoxInspectorHeaderSafeArea: React.ComponentType = - Platform.OS === 'android' ? View : SafeAreaView; - export default function LogBoxInspectorHeader(props: Props): React.Node { if (props.level === 'syntax') { return ( - + - + ); } @@ -56,7 +52,7 @@ export default function LogBoxInspectorHeader(props: Props): React.Node { const titleText = `Log ${props.selectedIndex + 1} of ${props.total}`; return ( - + props.onSelectIndex(nextIndex)} /> - + ); } diff --git a/packages/react-native/Libraries/LogBox/__tests__/__snapshots__/LogBoxNotificationContainer-test.js.snap b/packages/react-native/Libraries/LogBox/__tests__/__snapshots__/LogBoxNotificationContainer-test.js.snap index 6799302e9474..7c65b0a79669 100644 --- a/packages/react-native/Libraries/LogBox/__tests__/__snapshots__/LogBoxNotificationContainer-test.js.snap +++ b/packages/react-native/Libraries/LogBox/__tests__/__snapshots__/LogBoxNotificationContainer-test.js.snap @@ -1,16 +1,20 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`LogBoxNotificationContainer should render both an error and warning notification 1`] = ` - - + `; exports[`LogBoxNotificationContainer should render null with no logs 1`] = `null`; @@ -119,16 +123,20 @@ exports[`LogBoxNotificationContainer should render selected fatal error even whe exports[`LogBoxNotificationContainer should render selected syntax error even when disabled 1`] = `null`; exports[`LogBoxNotificationContainer should render the latest error notification 1`] = ` - - + `; exports[`LogBoxNotificationContainer should render the latest warning notification 1`] = ` - - + `; diff --git a/packages/react-native/Package.swift b/packages/react-native/Package.swift index da76a10ac812..5b77584fc5e6 100644 --- a/packages/react-native/Package.swift +++ b/packages/react-native/Package.swift @@ -490,7 +490,6 @@ let reactFabric = RNTarget( "components/inputaccessory", "components/modal", "components/rncore", - "components/safeareaview", "components/switch", "components/text", "components/textinput", @@ -528,12 +527,6 @@ let reactFabricSwitch = RNTarget( dependencies: [.reactNativeDependencies, .reactCore, .reactJsiExecutor, .reactTurboModuleCore, .jsi, .logger, .reactDebug, .reactFeatureFlags, .reactUtils, .reactRuntimeScheduler, .reactCxxReact, .yoga, .reactRendererDebug, .reactGraphics, .reactFabric, .reactTurboModuleBridging] ) -let reactFabricSafeAreaView = RNTarget( - name: .reactFabricSafeAreaView, - path: "ReactCommon/react/renderer/components/safeareaview", - dependencies: [.reactNativeDependencies, .reactCore, .reactJsiExecutor, .reactTurboModuleCore, .jsi, .logger, .reactDebug, .reactFeatureFlags, .reactUtils, .reactRuntimeScheduler, .reactCxxReact, .yoga, .reactRendererDebug, .reactGraphics, .reactFabric, .reactTurboModuleBridging] -) - let reactFabricTextLayoutManager = RNTarget( name: .reactFabricTextLayoutManager, path: "ReactCommon/react/renderer/textlayoutmanager", @@ -586,7 +579,7 @@ let reactRCTFabric = RNTarget( name: .reactRCTFabric, path: "React/Fabric", searchPaths: [virtualViewPath], - dependencies: [.reactNativeDependencies, .reactCore, .reactRCTImage, .yoga, .reactRCTText, .jsi, .reactFabricInputAccessory, .reactFabricModal, .reactFabricSafeAreaView, .reactFabricSwitch, .reactFabricText, .reactFabricTextInput, .reactFabricUnimplementedView, .reactFabricTextLayoutManager, .reactGraphics, .reactImageManager, .reactDebug, .reactUtils, .reactPerformanceTimeline, .reactRendererDebug, .reactRendererConsistency, .reactRuntimeScheduler, .reactRCTAnimation, .reactJsInspector, .reactJsInspectorNetwork, .reactJsInspectorTracing, .reactFabric, .reactFabricImage, .rctSwiftUIWrapper] + dependencies: [.reactNativeDependencies, .reactCore, .reactRCTImage, .yoga, .reactRCTText, .jsi, .reactFabricInputAccessory, .reactFabricModal, .reactFabricSwitch, .reactFabricText, .reactFabricTextInput, .reactFabricUnimplementedView, .reactFabricTextLayoutManager, .reactGraphics, .reactImageManager, .reactDebug, .reactUtils, .reactPerformanceTimeline, .reactRendererDebug, .reactRendererConsistency, .reactRuntimeScheduler, .reactRCTAnimation, .reactJsInspector, .reactJsInspectorNetwork, .reactJsInspectorTracing, .reactFabric, .reactFabricImage, .rctSwiftUIWrapper] ) /// React-ImageManagerApple.podspec @@ -709,7 +702,6 @@ let targets = [ reactFabricImage, reactFabricInputAccessory, reactFabricModal, - reactFabricSafeAreaView, reactFabricSwitch, reactFabricTextLayoutManager, reactFabricText, @@ -896,7 +888,6 @@ extension String { static let reactFabricImage = "React-FabricImage" static let reactFabricInputAccessory = "React-FabricInputAccessory" static let reactFabricModal = "React-FabricModal" - static let reactFabricSafeAreaView = "React-FabricSafeAreaView" static let reactFabricSwitch = "React-FabricSwitch" static let reactFabricTextLayoutManager = "React-FabricTextLayoutManager" static let reactFabricText = "React-FabricText" diff --git a/packages/react-native/React/Base/RCTBridge.mm b/packages/react-native/React/Base/RCTBridge.mm index b2258a62c0b9..c9b6ef636ce4 100644 --- a/packages/react-native/React/Base/RCTBridge.mm +++ b/packages/react-native/React/Base/RCTBridge.mm @@ -55,7 +55,6 @@ @"RCTDebuggingOverlayManager", @"RCTModalHostViewManager", @"RCTRefreshControlManager", - @"RCTSafeAreaViewManager", @"RCTScrollContentViewManager", @"RCTScrollViewManager", @"RCTSwitchManager", diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.h b/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.h index 6b8a6ff6d6dc..d03b01686f51 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.h +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.h @@ -34,7 +34,6 @@ Class RCTDebuggingOverlayCls(void) __attribute__((used Class RCTInputAccessoryCls(void) __attribute__((used)); Class RCTParagraphCls(void) __attribute__((used)); Class RCTPullToRefreshViewCls(void) __attribute__((used)); -Class RCTSafeAreaViewCls(void) __attribute__((used)); Class RCTScrollViewCls(void) __attribute__((used)); Class RCTSwitchCls(void) __attribute__((used)); Class RCTTextInputCls(void) __attribute__((used)); diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.mm index 442c2e6e3962..fe9746644671 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.mm +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.mm @@ -23,7 +23,6 @@ {"InputAccessoryView", RCTInputAccessoryCls}, {"Paragraph", RCTParagraphCls}, {"PullToRefreshView", RCTPullToRefreshViewCls}, - {"SafeAreaView", RCTSafeAreaViewCls}, {"ScrollView", RCTScrollViewCls}, {"Switch", RCTSwitchCls}, {"TextInput", RCTTextInputCls}, diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/SafeAreaView/RCTSafeAreaViewComponentView.h b/packages/react-native/React/Fabric/Mounting/ComponentViews/SafeAreaView/RCTSafeAreaViewComponentView.h deleted file mode 100644 index 542b88cf14fa..000000000000 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/SafeAreaView/RCTSafeAreaViewComponentView.h +++ /dev/null @@ -1,21 +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. - */ - -#import - -#import - -NS_ASSUME_NONNULL_BEGIN - -/** - * UIView class for root component. - */ -@interface RCTSafeAreaViewComponentView : RCTViewComponentView - -@end - -NS_ASSUME_NONNULL_END diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/SafeAreaView/RCTSafeAreaViewComponentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/SafeAreaView/RCTSafeAreaViewComponentView.mm deleted file mode 100644 index 4c05633d8cbb..000000000000 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/SafeAreaView/RCTSafeAreaViewComponentView.mm +++ /dev/null @@ -1,100 +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. - */ - -#import "RCTSafeAreaViewComponentView.h" - -#import -#import -#import -#import "RCTConversions.h" -#import "RCTFabricComponentsPlugins.h" - -using namespace facebook::react; - -@implementation RCTSafeAreaViewComponentView { - SafeAreaViewShadowNode::ConcreteState::Shared _state; -} - -- (instancetype)initWithFrame:(CGRect)frame -{ - if (self = [super initWithFrame:frame]) { - _props = SafeAreaViewShadowNode::defaultSharedProps(); - } - - return self; -} - -- (void)safeAreaInsetsDidChange -{ - [super safeAreaInsetsDidChange]; - - [self _updateStateIfNecessary]; -} - -- (void)_updateStateIfNecessary -{ - if (!_state) { - return; - } - - UIEdgeInsets insets = self.safeAreaInsets; - insets.left = RCTRoundPixelValue(insets.left); - insets.top = RCTRoundPixelValue(insets.top); - insets.right = RCTRoundPixelValue(insets.right); - insets.bottom = RCTRoundPixelValue(insets.bottom); - - auto newPadding = RCTEdgeInsetsFromUIEdgeInsets(insets); - auto threshold = 1.0 / RCTScreenScale() + 0.01; // Size of a pixel plus some small threshold. - - _state->updateState( - [=](const SafeAreaViewShadowNode::ConcreteState::Data &oldData) - -> SafeAreaViewShadowNode::ConcreteState::SharedData { - auto oldPadding = oldData.padding; - auto deltaPadding = newPadding - oldPadding; - - if (std::abs(deltaPadding.left) < threshold && std::abs(deltaPadding.top) < threshold && - std::abs(deltaPadding.right) < threshold && std::abs(deltaPadding.bottom) < threshold) { - return nullptr; - } - - auto newData = oldData; - newData.padding = newPadding; - return std::make_shared(newData); - }); -} - -#pragma mark - RCTComponentViewProtocol - -+ (ComponentDescriptorProvider)componentDescriptorProvider -{ - return concreteComponentDescriptorProvider(); -} - -- (void)updateState:(const facebook::react::State::Shared &)state - oldState:(const facebook::react::State::Shared &)oldState -{ - _state = std::static_pointer_cast(state); -} - -- (void)finalizeUpdates:(RNComponentViewUpdateMask)updateMask -{ - [super finalizeUpdates:updateMask]; - [self _updateStateIfNecessary]; -} - -- (void)prepareForRecycle -{ - [super prepareForRecycle]; - _state.reset(); -} - -@end - -Class RCTSafeAreaViewCls(void) -{ - return RCTSafeAreaViewComponentView.class; -} diff --git a/packages/react-native/ReactAndroid/api/ReactAndroid.api b/packages/react-native/ReactAndroid/api/ReactAndroid.api index 6c76d3a2197f..b7aefb2f679f 100644 --- a/packages/react-native/ReactAndroid/api/ReactAndroid.api +++ b/packages/react-native/ReactAndroid/api/ReactAndroid.api @@ -5120,14 +5120,6 @@ public abstract interface class com/facebook/react/viewmanagers/ModalHostViewMan public abstract fun setVisible (Landroid/view/View;Z)V } -public class com/facebook/react/viewmanagers/SafeAreaViewManagerDelegate : com/facebook/react/uimanager/BaseViewManagerDelegate { - public fun (Lcom/facebook/react/uimanager/BaseViewManager;)V - public fun setProperty (Landroid/view/View;Ljava/lang/String;Ljava/lang/Object;)V -} - -public abstract interface class com/facebook/react/viewmanagers/SafeAreaViewManagerInterface : com/facebook/react/uimanager/ViewManagerWithGeneratedInterface { -} - public class com/facebook/react/viewmanagers/UnimplementedNativeViewManagerDelegate : com/facebook/react/uimanager/BaseViewManagerDelegate { public fun (Lcom/facebook/react/uimanager/BaseViewManager;)V public fun setProperty (Landroid/view/View;Ljava/lang/String;Ljava/lang/Object;)V diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/shell/MainReactPackage.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/shell/MainReactPackage.kt index 14b053b4196f..535ffb3a8fbf 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/shell/MainReactPackage.kt +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/shell/MainReactPackage.kt @@ -50,7 +50,6 @@ import com.facebook.react.views.drawer.ReactDrawerLayoutManager import com.facebook.react.views.image.ReactImageManager import com.facebook.react.views.modal.ReactModalHostManager import com.facebook.react.views.progressbar.ReactProgressBarViewManager -import com.facebook.react.views.safeareaview.ReactSafeAreaViewManager import com.facebook.react.views.scroll.ReactHorizontalScrollContainerViewManager import com.facebook.react.views.scroll.ReactHorizontalScrollViewManager import com.facebook.react.views.scroll.ReactNestedScrollViewManager @@ -148,7 +147,6 @@ constructor(private val config: MainPackageConfig? = null) : if (ReactNativeFeatureFlags.useNestedScrollViewAndroid()) ReactNestedScrollViewManager() else ReactScrollViewManager(), ReactSwitchManager(), - ReactSafeAreaViewManager(), SwipeRefreshLayoutManager(), // Native equivalents ReactImageManager(), @@ -178,8 +176,6 @@ constructor(private val config: MainPackageConfig? = null) : ModuleSpec.viewManagerSpec { ReactHorizontalScrollContainerViewManager() }, ReactProgressBarViewManager.REACT_CLASS to ModuleSpec.viewManagerSpec { ReactProgressBarViewManager() }, - ReactSafeAreaViewManager.REACT_CLASS to - ModuleSpec.viewManagerSpec { ReactSafeAreaViewManager() }, ReactScrollViewManager.REACT_CLASS to ModuleSpec.viewManagerSpec { if (ReactNativeFeatureFlags.useNestedScrollViewAndroid()) diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/safeareaview/ReactSafeAreaView.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/safeareaview/ReactSafeAreaView.kt deleted file mode 100644 index 034879ca96e7..000000000000 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/safeareaview/ReactSafeAreaView.kt +++ /dev/null @@ -1,70 +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. - */ - -package com.facebook.react.views.safeareaview - -import android.view.ViewGroup -import androidx.annotation.UiThread -import androidx.core.graphics.Insets -import androidx.core.view.ViewCompat -import androidx.core.view.WindowInsetsCompat -import androidx.core.view.WindowInsetsCompat.CONSUMED -import com.facebook.react.bridge.GuardedRunnable -import com.facebook.react.bridge.WritableNativeMap -import com.facebook.react.common.build.ReactBuildConfig -import com.facebook.react.uimanager.PixelUtil.pxToDp -import com.facebook.react.uimanager.StateWrapper -import com.facebook.react.uimanager.ThemedReactContext - -internal class ReactSafeAreaView(val reactContext: ThemedReactContext) : ViewGroup(reactContext) { - internal var stateWrapper: StateWrapper? = null - - override fun onAttachedToWindow() { - super.onAttachedToWindow() - - ViewCompat.setOnApplyWindowInsetsListener(this) { _, windowInsets -> - val insets = - windowInsets.getInsets( - WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout(), - ) - updateState(insets) - CONSUMED - } - requestApplyInsets() - } - - override fun onLayout(p0: Boolean, p1: Int, p2: Int, p3: Int, p4: Int): Unit = Unit - - override fun shouldDelayChildPressedState(): Boolean = false - - @Suppress("DEPRECATION") - @UiThread - private fun updateState(insets: Insets) { - val sw = stateWrapper - if (sw != null) { - WritableNativeMap().apply { - putDouble("left", insets.left.toFloat().pxToDp().toDouble()) - putDouble("top", insets.top.toFloat().pxToDp().toDouble()) - putDouble("bottom", insets.bottom.toFloat().pxToDp().toDouble()) - putDouble("right", insets.right.toFloat().pxToDp().toDouble()) - - sw.updateState(this) - } - } else if (!ReactBuildConfig.UNSTABLE_ENABLE_MINIFY_LEGACY_ARCHITECTURE) { - // paper - reactContext.runOnNativeModulesQueueThread( - object : GuardedRunnable(reactContext) { - override fun runGuarded() { - this@ReactSafeAreaView.reactContext.reactApplicationContext - .getNativeModule(com.facebook.react.uimanager.UIManagerModule::class.java) - ?.updateInsetsPadding(id, insets.top, insets.left, insets.bottom, insets.right) - } - }, - ) - } - } -} diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/safeareaview/ReactSafeAreaViewManager.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/safeareaview/ReactSafeAreaViewManager.kt deleted file mode 100644 index 4e0c7154b88e..000000000000 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/safeareaview/ReactSafeAreaViewManager.kt +++ /dev/null @@ -1,53 +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. - */ - -package com.facebook.react.views.safeareaview - -import com.facebook.react.module.annotations.ReactModule -import com.facebook.react.uimanager.ReactStylesDiffMap -import com.facebook.react.uimanager.StateWrapper -import com.facebook.react.uimanager.ThemedReactContext -import com.facebook.react.uimanager.ViewGroupManager -import com.facebook.react.uimanager.ViewManagerDelegate -import com.facebook.react.viewmanagers.SafeAreaViewManagerDelegate -import com.facebook.react.viewmanagers.SafeAreaViewManagerInterface - -/** View manager for [ReactSafeAreaView] components. */ -@ReactModule(name = ReactSafeAreaViewManager.REACT_CLASS) -internal class ReactSafeAreaViewManager : - ViewGroupManager(), SafeAreaViewManagerInterface { - - private val delegate: ViewManagerDelegate = SafeAreaViewManagerDelegate(this) - - override fun getDelegate(): ViewManagerDelegate = delegate - - override fun createViewInstance(context: ThemedReactContext): ReactSafeAreaView = - ReactSafeAreaView(context) - - override fun getName(): String = REACT_CLASS - - @Suppress("DEPRECATION") - override fun createShadowNodeInstance(): com.facebook.react.uimanager.LayoutShadowNode = - com.facebook.react.uimanager.LayoutShadowNode() - - @Suppress("DEPRECATION") - override fun getShadowNodeClass(): Class = - com.facebook.react.uimanager.LayoutShadowNode::class.java - - override fun updateState( - view: ReactSafeAreaView, - props: ReactStylesDiffMap, - stateWrapper: StateWrapper, - ): Any? { - view.stateWrapper = stateWrapper - return null - } - - internal companion object { - const val REACT_CLASS: String = "RCTSafeAreaView" - } -} diff --git a/packages/react-native/ReactAndroid/src/main/jni/CMakeLists.txt b/packages/react-native/ReactAndroid/src/main/jni/CMakeLists.txt index 4c5be342c0bd..d2963cd779f6 100644 --- a/packages/react-native/ReactAndroid/src/main/jni/CMakeLists.txt +++ b/packages/react-native/ReactAndroid/src/main/jni/CMakeLists.txt @@ -121,7 +121,6 @@ add_react_common_subdir(react/renderer/components/text) add_react_common_subdir(react/renderer/components/unimplementedview) add_react_common_subdir(react/renderer/components/modal) add_react_common_subdir(react/renderer/components/scrollview) -add_react_common_subdir(react/renderer/components/safeareaview) add_react_common_subdir(react/renderer/leakchecker) add_react_common_subdir(react/renderer/observers/events) add_react_common_subdir(react/renderer/observers/intersection) @@ -258,7 +257,6 @@ add_library(reactnative $ $ $ - $ $ $ $ @@ -362,7 +360,6 @@ target_include_directories(reactnative $ $ $ - $ $ $ $ diff --git a/packages/react-native/ReactAndroid/src/main/jni/react/fabric/CMakeLists.txt b/packages/react-native/ReactAndroid/src/main/jni/react/fabric/CMakeLists.txt index 4db218564823..cdbb923a57f0 100644 --- a/packages/react-native/ReactAndroid/src/main/jni/react/fabric/CMakeLists.txt +++ b/packages/react-native/ReactAndroid/src/main/jni/react/fabric/CMakeLists.txt @@ -55,7 +55,6 @@ target_link_libraries( rrc_modal rrc_progressbar rrc_root - rrc_safeareaview rrc_scrollview rrc_switch rrc_text diff --git a/packages/react-native/ReactAndroid/src/main/jni/react/fabric/CoreComponentsRegistry.cpp b/packages/react-native/ReactAndroid/src/main/jni/react/fabric/CoreComponentsRegistry.cpp index 57c1e0e8d86e..5275fab0e175 100644 --- a/packages/react-native/ReactAndroid/src/main/jni/react/fabric/CoreComponentsRegistry.cpp +++ b/packages/react-native/ReactAndroid/src/main/jni/react/fabric/CoreComponentsRegistry.cpp @@ -14,7 +14,6 @@ #include #include #include -#include #include #include #include @@ -58,8 +57,6 @@ void addCoreComponents( concreteComponentDescriptorProvider()); providerRegistry->add( concreteComponentDescriptorProvider()); - providerRegistry->add( - concreteComponentDescriptorProvider()); providerRegistry->add( concreteComponentDescriptorProvider()); providerRegistry->add( diff --git a/packages/react-native/ReactCommon/React-FabricComponents.podspec b/packages/react-native/ReactCommon/React-FabricComponents.podspec index 95d9c1c4548f..64beddcf37e6 100644 --- a/packages/react-native/ReactCommon/React-FabricComponents.podspec +++ b/packages/react-native/ReactCommon/React-FabricComponents.podspec @@ -107,13 +107,6 @@ Pod::Spec.new do |s| sss.header_dir = "react/renderer/components/modal" end - ss.subspec "safeareaview" do |sss| - sss.source_files = podspec_sources("react/renderer/components/safeareaview/**/*.{m,mm,cpp,h}", "react/renderer/components/safeareaview/**/*.h") - # Exclude tests to avoid conflicts with the react-native-safe-area-context package - sss.exclude_files = "react/renderer/components/safeareaview/tests" - sss.header_dir = "react/renderer/components/safeareaview" - end - ss.subspec "text" do |sss| sss.source_files = podspec_sources(["react/renderer/components/text/*.{m,mm,cpp,h}", "react/renderer/components/text/platform/cxx/**/*.{m,mm,cpp,h}"], diff --git a/packages/react-native/ReactCommon/react/renderer/components/safeareaview/CMakeLists.txt b/packages/react-native/ReactCommon/react/renderer/components/safeareaview/CMakeLists.txt deleted file mode 100644 index 733778153df9..000000000000 --- a/packages/react-native/ReactCommon/react/renderer/components/safeareaview/CMakeLists.txt +++ /dev/null @@ -1,41 +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. - -cmake_minimum_required(VERSION 3.13) -set(CMAKE_VERBOSE_MAKEFILE on) - -include(${REACT_COMMON_DIR}/cmake-utils/react-native-flags.cmake) - -file(GLOB rrc_safeareaview_SRCS CONFIGURE_DEPENDS *.cpp) - -add_library( - rrc_safeareaview - STATIC - ${rrc_safeareaview_SRCS} -) - -target_include_directories(rrc_safeareaview PUBLIC .) - -target_link_libraries( - rrc_safeareaview - glog - fbjni - folly_runtime - glog_init - react_codegen_rncore - react_cxxstableapi - react_debug - react_renderer_componentregistry - react_renderer_core - react_renderer_debug - react_renderer_graphics - react_renderer_uimanager - reactnativejni - rrc_view - yoga -) - -target_compile_reactnative_options(rrc_safeareaview PRIVATE) -target_compile_options(rrc_safeareaview PRIVATE -Wpedantic) diff --git a/packages/react-native/ReactCommon/react/renderer/components/safeareaview/SafeAreaViewComponentDescriptor.h b/packages/react-native/ReactCommon/react/renderer/components/safeareaview/SafeAreaViewComponentDescriptor.h deleted file mode 100644 index 42ece0a34f95..000000000000 --- a/packages/react-native/ReactCommon/react/renderer/components/safeareaview/SafeAreaViewComponentDescriptor.h +++ /dev/null @@ -1,32 +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. - */ - -#pragma once - -#include - -#include -#include - -namespace facebook::react { - -/* - * Descriptor for component. - */ -class SafeAreaViewComponentDescriptor final : public ConcreteComponentDescriptor { - using ConcreteComponentDescriptor::ConcreteComponentDescriptor; - void adopt(ShadowNode &shadowNode) const override - { - auto &layoutableShadowNode = static_cast(shadowNode); - auto &stateData = static_cast(*shadowNode.getState()).getData(); - layoutableShadowNode.setPadding(stateData.padding); - - ConcreteComponentDescriptor::adopt(shadowNode); - } -}; - -} // namespace facebook::react diff --git a/packages/react-native/ReactCommon/react/renderer/components/safeareaview/SafeAreaViewShadowNode.cpp b/packages/react-native/ReactCommon/react/renderer/components/safeareaview/SafeAreaViewShadowNode.cpp deleted file mode 100644 index 52a347fba9ef..000000000000 --- a/packages/react-native/ReactCommon/react/renderer/components/safeareaview/SafeAreaViewShadowNode.cpp +++ /dev/null @@ -1,15 +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. - */ - -#include "SafeAreaViewShadowNode.h" - -namespace facebook::react { - -// NOLINTNEXTLINE(modernize-avoid-c-arrays) -const char SafeAreaViewComponentName[] = "SafeAreaView"; - -} // namespace facebook::react diff --git a/packages/react-native/ReactCommon/react/renderer/components/safeareaview/SafeAreaViewShadowNode.h b/packages/react-native/ReactCommon/react/renderer/components/safeareaview/SafeAreaViewShadowNode.h deleted file mode 100644 index ef9c2b668ec2..000000000000 --- a/packages/react-native/ReactCommon/react/renderer/components/safeareaview/SafeAreaViewShadowNode.h +++ /dev/null @@ -1,30 +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. - */ - -#pragma once - -#include - -#include -#include -#include -#include - -namespace facebook::react { - -// NOLINTNEXTLINE(modernize-avoid-c-arrays) -extern const char SafeAreaViewComponentName[]; - -/* - * `ShadowNode` for component. - */ -class SafeAreaViewShadowNode final - : public ConcreteViewShadowNode { - using ConcreteViewShadowNode::ConcreteViewShadowNode; -}; - -} // namespace facebook::react diff --git a/packages/react-native/ReactCommon/react/renderer/components/safeareaview/SafeAreaViewState.cpp b/packages/react-native/ReactCommon/react/renderer/components/safeareaview/SafeAreaViewState.cpp deleted file mode 100644 index 44b7721404b7..000000000000 --- a/packages/react-native/ReactCommon/react/renderer/components/safeareaview/SafeAreaViewState.cpp +++ /dev/null @@ -1,19 +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. - */ - -#include "SafeAreaViewState.h" - -namespace facebook::react { - -#ifdef ANDROID -folly::dynamic SafeAreaViewState::getDynamic() const { - return folly::dynamic::object("left", padding.left)("top", padding.top)( - "right", padding.right)("bottom", padding.bottom); -} -#endif - -} // namespace facebook::react diff --git a/packages/react-native/ReactCommon/react/renderer/components/safeareaview/SafeAreaViewState.h b/packages/react-native/ReactCommon/react/renderer/components/safeareaview/SafeAreaViewState.h deleted file mode 100644 index 1d51d12d328a..000000000000 --- a/packages/react-native/ReactCommon/react/renderer/components/safeareaview/SafeAreaViewState.h +++ /dev/null @@ -1,43 +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. - */ - -#pragma once - -#include - -#include - -#ifdef ANDROID -#include -#endif - -namespace facebook::react { - -/* - * State for component. - */ -class SafeAreaViewState final { - public: -#ifdef ANDROID - SafeAreaViewState() = default; - - SafeAreaViewState(const SafeAreaViewState & /*previousState*/, folly::dynamic data) - : padding( - EdgeInsets{ - (Float)data["left"].getDouble(), - (Float)data["top"].getDouble(), - (Float)data["right"].getDouble(), - (Float)data["bottom"].getDouble(), - }) {}; - - folly::dynamic getDynamic() const; -#endif - - EdgeInsets padding{}; -}; - -} // namespace facebook::react diff --git a/packages/react-native/ReactNativeApi.d.ts b/packages/react-native/ReactNativeApi.d.ts index cb67856cb4b3..3cd6445aa5a5 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<<2ceaa8e472a53fc667994edb63ccd995>> + * @generated SignedSource<<5fc2f58ac16dac7a4926cc5d522be670>> * * This file was generated by scripts/js-api/build-types/index.js. */ @@ -354,12 +354,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: ( @@ -4246,8 +4240,6 @@ declare type SafeAreaInsets = { declare type SafeAreaInsetsChangeEvent = NativeSyntheticEvent<{ readonly insets: SafeAreaInsets }> -declare type SafeAreaView = typeof SafeAreaView -declare type SafeAreaViewInstance = HostInstance declare type ScaledSize = DisplayMetrics declare type ScheduleLocalNotificationDetails = PresentLocalNotificationDetails & { @@ -5968,9 +5960,8 @@ export { RootViewStyleProvider, // d5909148 Runnable, // 594dd93a Runnables, // 4367c557 - SafeAreaInsetsChangeEvent, // cedb5309 - SafeAreaView, // d917b6ec - SafeAreaViewInstance, // 2b5d4391 + SafeAreaInsets, // 64d7a605 + SafeAreaInsetsChangeEvent, // 4ffd35e5 ScaledSize, // 07e417c7 ScrollEvent, // 956fdb27 ScrollResponderType, // e41ccb2a diff --git a/packages/react-native/__typetests__/index.tsx b/packages/react-native/__typetests__/index.tsx index 54ea8b7694ba..c18254841f49 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, @@ -1576,31 +1575,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 79b601abb36d..7ffab8300e0e 100644 --- a/packages/react-native/index.js +++ b/packages/react-native/index.js @@ -118,20 +118,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 3d015144404b..70f8963b33aa 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, @@ -485,6 +482,7 @@ export type { NativeTouchEvent, NativeUIEvent, ResponderSyntheticEvent, + SafeAreaInsets, SafeAreaInsetsChangeEvent, ScrollEvent, TargetedEvent, diff --git a/packages/react-native/scripts/ios-prebuild/headers-config.js b/packages/react-native/scripts/ios-prebuild/headers-config.js index 61addbc7a4c4..d7719f6126f6 100644 --- a/packages/react-native/scripts/ios-prebuild/headers-config.js +++ b/packages/react-native/scripts/ios-prebuild/headers-config.js @@ -381,13 +381,6 @@ const PodspecExceptions /*: {[key: string]: PodSpecConfiguration} */ = { headerDir: 'react/renderer/components/modal', }, - { - name: 'safeareaview', - headerPatterns: ['react/renderer/components/safeareaview/**/*.h'], - excludePatterns: ['react/renderer/components/safeareaview/tests'], - headerDir: 'react/renderer/components/safeareaview', - }, - { name: 'scrollview', headerPatterns: [ diff --git a/packages/react-native/src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE.js b/packages/react-native/src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE.js index e6b5cdd5f522..0ea40f01bbf6 100644 --- a/packages/react-native/src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE.js +++ b/packages/react-native/src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE.js @@ -9,23 +9,62 @@ */ import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes'; +import type { + SafeAreaInsets, + SafeAreaInsetsChangeEvent, +} from '../../../../Libraries/Types/CoreEventTypes'; +import type {HostInstance} from '../../types/HostInstance'; import View from '../../../../Libraries/Components/View/View'; -import UIManager from '../../../../Libraries/ReactNative/UIManager'; -import Platform from '../../../../Libraries/Utilities/Platform'; +import I18nManager from '../../../../Libraries/ReactNative/I18nManager'; import * as React from 'react'; +import {useCallback, useMemo, useState} from 'react'; -const exported: component( - ref?: React.RefSetter>, - ...ViewProps -) = Platform.select({ - ios: require('../../../../src/private/components/safeareaview/specs/RCTSafeAreaViewNativeComponent') - .default, - android: UIManager.hasViewManagerConfig('RCTSafeAreaView') - ? require('../../../../src/private/components/safeareaview/specs/RCTSafeAreaViewNativeComponent') - .default - : View, - default: View, -}); +/** + * Renders its children within the safe area of the device, by applying the part + * of the view that is covered by the system UI as padding. + */ +component SafeAreaView( + ref?: React.RefSetter, + ...props: ViewProps +) { + const {style, experimental_onSafeAreaInsetsChange, ...otherProps} = props; + const [insets, setInsets] = useState(null); + + const handleSafeAreaInsetsChange = useCallback( + (event: SafeAreaInsetsChangeEvent) => { + setInsets(event.nativeEvent.insets); + experimental_onSafeAreaInsetsChange?.(event); + }, + [experimental_onSafeAreaInsetsChange], + ); + + const paddingStyle = useMemo(() => { + if (insets == null) { + return null; + } + // Insets are physical edges, but Yoga remaps paddingLeft/paddingRight to + // start/end when I18nManager's swapLeftAndRightInRTL is on, which would + // pad the mirror-image edge in RTL. Swap the values so the physical edge + // keeps its inset. + const {isRTL, doLeftAndRightSwapInRTL} = I18nManager.getConstants(); + const swap = isRTL && doLeftAndRightSwapInRTL; + return { + paddingTop: insets.top, + paddingRight: swap ? insets.left : insets.right, + paddingBottom: insets.bottom, + paddingLeft: swap ? insets.right : insets.left, + }; + }, [insets]); + + return ( + + ); +} -export default exported; +export default SafeAreaView; diff --git a/packages/react-native/Libraries/Components/SafeAreaView/__tests__/SafeAreaView-itest.js b/packages/react-native/src/private/components/safeareaview/__tests__/SafeAreaView-itest.js similarity index 91% rename from packages/react-native/Libraries/Components/SafeAreaView/__tests__/SafeAreaView-itest.js rename to packages/react-native/src/private/components/safeareaview/__tests__/SafeAreaView-itest.js index 0fcae9f2e282..cb84b97d23e7 100644 --- a/packages/react-native/Libraries/Components/SafeAreaView/__tests__/SafeAreaView-itest.js +++ b/packages/react-native/src/private/components/safeareaview/__tests__/SafeAreaView-itest.js @@ -10,9 +10,10 @@ import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment'; +import SafeAreaView from '../SafeAreaView_INTERNAL_DO_NOT_USE'; import * as Fantom from '@react-native/fantom'; import * as React from 'react'; -import {SafeAreaView, Text} from 'react-native'; +import {Text} from 'react-native'; describe('', () => { it('renders with children', () => { diff --git a/packages/react-native/src/private/components/safeareaview/specs/RCTSafeAreaViewNativeComponent.js b/packages/react-native/src/private/components/safeareaview/specs/RCTSafeAreaViewNativeComponent.js deleted file mode 100644 index 0e5ef68ef9ed..000000000000 --- a/packages/react-native/src/private/components/safeareaview/specs/RCTSafeAreaViewNativeComponent.js +++ /dev/null @@ -1,27 +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 {ViewProps} from '../../../../../Libraries/Components/View/ViewPropTypes'; -import type {HostComponent} from '../../../types/HostComponent'; - -import codegenNativeComponent from '../../../../../Libraries/Utilities/codegenNativeComponent'; - -type RCTSafeAreaViewNativeProps = Readonly<{ - ...ViewProps, - - // No props -}>; - -export default codegenNativeComponent( - 'SafeAreaView', - { - interfaceOnly: true, - }, -) as HostComponent; 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_DEPRECATED/Libraries/Components/SafeAreaView/SafeAreaView.d.ts b/packages/react-native/types_DEPRECATED/Libraries/Components/SafeAreaView/SafeAreaView.d.ts deleted file mode 100644 index 590928373daf..000000000000 --- a/packages/react-native/types_DEPRECATED/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 '../../../private/Utilities'; -import {HostInstance} from '../../../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/types_DEPRECATED/index.d.ts b/packages/react-native/types_DEPRECATED/index.d.ts index b5541260cb62..219f5ae9152d 100644 --- a/packages/react-native/types_DEPRECATED/index.d.ts +++ b/packages/react-native/types_DEPRECATED/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 c0f0e2b06282..6821dca645b7 100644 --- a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js +++ b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js @@ -12,7 +12,12 @@ import type { PlatformTestResult, PlatformTestResultStatus, } from './RNTesterPlatformTestTypes'; -import type {ListRenderItemInfo, TextStyle} from 'react-native'; +import type { + ListRenderItemInfo, + SafeAreaInsets, + SafeAreaInsetsChangeEvent, + TextStyle, +} from 'react-native'; import RNTesterPlatformTestMinimizedResultView from './RNTesterPlatformTestMinimizedResultView'; import RNTesterPlatformTestResultsText from './RNTesterPlatformTestResultsText'; @@ -24,7 +29,6 @@ import { KeyboardAvoidingView, Modal, Platform, - SafeAreaView, StyleSheet, Switch, Text, @@ -87,7 +91,7 @@ function FilterModalButton(props: FilterModalProps) { animationType="fade" presentationStyle="overFullScreen" transparent={true}> - + @@ -123,7 +127,7 @@ function FilterModalButton(props: FilterModalProps) { - + ); @@ -230,6 +234,13 @@ export default function RNTesterPlatformTestResultView( ); const [resultsExpanded, setResultsExpanded] = useState(false); + const [safeAreaInsets, setSafeAreaInsets] = useState(null); + const handleSafeAreaInsetsChange = useCallback( + (event: SafeAreaInsetsChangeEvent) => { + setSafeAreaInsets(event.nativeEvent.insets); + }, + [], + ); const handleReset = useCallback(() => { setFilterFailStatus(false); @@ -266,12 +277,21 @@ export default function RNTesterPlatformTestResultView( animationType="slide" onRequestClose={handleMaximizedPress} visible={resultsExpanded}> - + Results @@ -308,7 +328,7 @@ export default function RNTesterPlatformTestResultView( - + ); 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']}> - - - -