diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm index 0912c50fec13..d44d1e02ca51 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm @@ -1746,7 +1746,13 @@ - (NSString *)componentViewName_DO_NOT_USE_THIS_IS_BROKEN - (BOOL)styleNeedsSwiftUIContainer { - if (!_props->filter.empty()) { + if (_props->filter.empty()) { + return NO; + } + + // A filter must not affect layout, but UIHostingController insets its content by the safe area. + // To disable the insets we use `safeAreaRegions` which is only available in iOS 16.4 and tvOS 16.4. + if (@available(iOS 16.4, tvOS 16.4, *)) { for (const auto &primitive : _props->filter) { if (primitive.type == FilterType::Blur || primitive.type == FilterType::Grayscale || primitive.type == FilterType::DropShadow || primitive.type == FilterType::Saturate || @@ -1755,6 +1761,7 @@ - (BOOL)styleNeedsSwiftUIContainer } } } + return NO; } diff --git a/packages/react-native/ReactApple/RCTSwiftUI/RCTSwiftUIContainerView.swift b/packages/react-native/ReactApple/RCTSwiftUI/RCTSwiftUIContainerView.swift index 2ae423819ffb..cf12510d1b5c 100644 --- a/packages/react-native/ReactApple/RCTSwiftUI/RCTSwiftUIContainerView.swift +++ b/packages/react-native/ReactApple/RCTSwiftUI/RCTSwiftUIContainerView.swift @@ -15,6 +15,10 @@ import UIKit @objc public override init() { super.init() hostingController = UIHostingController(rootView: SwiftUIContainerView(viewModel: containerViewModel)) + if #available(iOS 16.4, tvOS 16.4, *) { + // Disable implicit safe area insets or else the view is shifted by the safe area insets + hostingController?.safeAreaRegions = [] + } guard let view = hostingController?.view else { return }