Layout breaks when UIContextMenuInteraction is used with the new architecture

[aleksey-golovanov]

Description

1. Create a custom Fabric component, add iOS UIContextMenuInteraction to the parent UIView
2. Layout breaks after the context menu is displayed, it looks like all View children are left on their places behind the context menu interaction.

Here is the code:

#import "RTNContextMenu.h"

#import <react/renderer/components/RTNContextMenuSpecs/ComponentDescriptors.h>
#import <react/renderer/components/RTNContextMenuSpecs/EventEmitters.h>
#import <react/renderer/components/RTNContextMenuSpecs/Props.h>
#import <react/renderer/components/RTNContextMenuSpecs/RCTComponentViewHelpers.h>

#import "RCTFabricComponentsPlugins.h"

using namespace facebook::react;

@interface RTNContextMenu () <RCTRTNContextMenuViewProtocol, UIContextMenuInteractionDelegate>
@end

@implementation RTNContextMenu {
  UIView *_view;
}

+ (ComponentDescriptorProvider)componentDescriptorProvider
{
  return concreteComponentDescriptorProvider<RTNContextMenuComponentDescriptor>();
}

- (instancetype)initWithFrame:(CGRect)frame
{
  if (self = [super initWithFrame:frame]) {
    static const auto defaultProps = std::make_shared<const RTNContextMenuProps>();
    _props = defaultProps;

    _view = [[UIView alloc] init];
      
    if (@available(iOS 13.0, *)) {
        UIContextMenuInteraction* contextInteraction = [[UIContextMenuInteraction alloc] initWithDelegate:self];
        [_view addInteraction:contextInteraction];
    }

    self.contentView = _view;
  }
    
  return self;
}

- (nullable UIContextMenuConfiguration *)contextMenuInteraction:(nonnull UIContextMenuInteraction *)interaction configurationForMenuAtLocation:(CGPoint)location API_AVAILABLE(ios(13.0)){
    return [UIContextMenuConfiguration configurationWithIdentifier:nil previewProvider:nil actionProvider:^UIMenu * _Nullable(NSArray<UIMenuElement *> * _Nonnull suggestedActions) {
        UIAction *share = [UIAction actionWithTitle:@"test" image:[UIImage systemImageNamed:@"square.and.arrow.up"] identifier:nil handler:^(__kindof UIAction * _Nonnull action) {
            // empty
        }];

        
        return [UIMenu menuWithTitle:@"test" children:@[share]];
    }];
}
@end

Class<RCTComponentViewProtocol> RTNContextMenuCls(void)
{
  return RTNContextMenu.class;
}

Steps to reproduce

1. Install the application with yarn ios
2. Long-press the green square
3. Observe how only the parent View included in the context menu preview, but the child View is left on it's place behind the preview.

React Native Version

0.74.2

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx react-native info

System:
  OS: macOS 14.4.1
  CPU: (10) arm64 Apple M1 Max
  Memory: 604.77 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.10.0
    path: /usr/local/bin/node
  Yarn:
    version: 3.6.4
    path: /usr/local/bin/yarn
  npm:
    version: 10.2.3
    path: /usr/local/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.11.3
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - watchOS 10.2
  Android SDK:
    API Levels:
      - "29"
      - "30"
      - "31"
      - "32"
      - "33"
      - "34"
    Build Tools:
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 32.0.0
      - 33.0.0
      - 33.0.1
      - 34.0.0
    System Images:
      - android-28 | Google ARM64-V8a Play ARM 64 v8a
      - android-30 | Google APIs ARM 64 v8a
      - android-30 | Google Play ARM 64 v8a
      - android-32 | Google APIs ARM 64 v8a
      - android-32 | Google Play ARM 64 v8a
      - android-33 | Google APIs ARM 64 v8a
    Android NDK: 22.1.7171670
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11076708
  Xcode:
    version: 15.1/15C65
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.1
    path: /Users/aleksey/.jenv/shims/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.2
    wanted: 0.74.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

the bug is visual

Reproducer

https://github.com/aleksey-golovanov/rn-ios-context-menu-reproducer

Screenshots and Videos

https://github.com/facebook/react-native/assets/38842730/1127037a-ba78-4fee-b3cb-546694ef1eaa

[realsoelynn]

@aleksey-golovanov The reason the issue is happening is due to _view in RTNContextMenu which is then being added as contentView during init frame.

We don't need to maintain another view and you can directly add UIInteraction to the subviews. Here's the suggestion https://github.com/aleksey-golovanov/rn-ios-context-menu-reproducer/pull/1/files

UIContextMenu.Demo.mov

There's an existing library that i found which is similar to what you're trying to achieve. https://www.npmjs.com/package/react-native-context-menu-view