Native Component Frame Not Propagating to RNAppleAuthButtonView Correctly (AppleButton incorrectly positioned)

Description

The AppleButton component is not positioned correctly on the page; rather, it is rendered in the top left corner. This is because the correct coordinates are not being passed down into RNAppleAuthButtonView.

The minimum app is a simple page with Google and Apple login buttons. I have modified RNAppleAuthButtonView to print out the component hierarchy. This shows that the coordinates of the frame for AppleButton are incorrect. I understand this is down to how Fabric works.

The modification to RNAppleAuthButtonView was to add the following

- (void)logViewHierarchy:(UIView *)view level:(NSInteger)level {
     NSMutableString *indent = [NSMutableString string];
     for (NSInteger i = 0; i < level; i++) {
         [indent appendString:@"  "];  // Indentation for hierarchy visualization
     }
 
     NSLog(@"%@|- %@ (Frame: %@)", indent, NSStringFromClass([view class]), NSStringFromCGRect(view.frame));
 
    for (UIView *subview in view.subviews) {
         [self logViewHierarchy:subview level:level + 1];  // Recursively log child views
     }
 
}
 
- (void)layoutSubviews {
  [super layoutSubviews];
 
  NSLog(@"----- View Hierarchy Start -----");     
  [self logViewHierarchy:self.window level:0];  // Start from the root window
  NSLog(@"----- View Hierarchy End -----");
 
  if (self.superview) {     
    // manually set the frame to fit the parent
    CGRect parentBounds = [self.superview convertRect:self.superview.bounds toView:nil];     
    //self.frame = CGRectMake(32, 560,
    //                        317, 76);
      
    NSLog(@"RNAppleAuthButtonView superview: %@", self.superview);
    NSLog(@"RNAppleAuthButtonView superview class: %@", NSStringFromClass([self.superview class]));
    NSLog(@"parent frame: %@", NSStringFromCGRect(self.superview.frame));
    NSLog(@"RNAppleAuthButtonView frame: %@", NSStringFromCGRect(self.frame));
    }
}

This produced the output shown below. As can be seen, the value of RNAppleAuthButtonView (Frame: {{0, 0}, {200, 45}}) is incorrect.

----- View Hierarchy Start -----
|- UIWindow (Frame: {{0, 0}, {402, 874}})
  |- UITransitionView (Frame: {{0, 0}, {402, 874}})
    |- UIDropShadowView (Frame: {{0, 0}, {402, 874}})
      |- RCTSurfaceHostingProxyRootView (Frame: {{0, 0}, {402, 874}})
        |- RCTSurfaceView (Frame: {{0, 0}, {402, 874}})
          |- RCTRootComponentView (Frame: {{0, 0}, {402, 874}})
            |- RCTScrollViewComponentView (Frame: {{0, 0}, {402, 874}})
              |- RCTEnhancedScrollView (Frame: {{0, 0}, {402, 874}})
                |- UIView (Frame: {{0, 0}, {402, 874}})
                  |- RCTViewComponentView (Frame: {{0, 0}, {402, 874}})
                    |- RCTLegacyViewManagerInteropComponentView (Frame: {{0, 0}, {402, 854}})
                      |- BVLinearGradient (Frame: {{0, 0}, {402, 854}})
                        |- RNAppleAuthButtonView (Frame: {{0, 0}, {200, 45}})
                        |- RCTViewComponentView (Frame: {{142.66666412353516, 436}, {116.66667175292969, 37}})
                          |- RCTParagraphComponentView (Frame: {{10, 10}, {96.666656494140625, 17}})
                            |- RCTParagraphTextView (Frame: {{0, 0}, {96.666656494140625, 17}})
                |- _UIScrollViewScrollIndicator (Frame: {{59, 868}, {284, 3}})
                  |- UIView (Frame: {{0, 0}, {284, 3}})
            |- RCTViewComponentView (Frame: {{0, 0}, {402, 874}})
              |- RCTDebuggingOverlayComponentView (Frame: {{0, 0}, {402, 874}})
                |- RCTDebuggingOverlay (Frame: {{0, 0}, {402, 874}})
----- View Hierarchy End -----
RNAppleAuthButtonView superview: <BVLinearGradient: 0x1102245e0; frame = (0 0; 402 854); clipsToBounds = YES; layer = <BVLinearGradientLayer: 0x6000029d6290>> reactTag: 14; frame = {{0, 0}, {402, 854}}; layer = <BVLinearGradientLayer: 0x6000029d6290>
RNAppleAuthButtonView superview class: BVLinearGradient
parent frame: {{0, 0}, {402, 854}}
RNAppleAuthButtonView frame: {{0, 0}, {200, 45}}

Steps to reproduce

1: clone repo
2: yarn install
3: cd ios
4: pod install
5: in Xcode - build
6: in Xcode - run

The page is displayed as shown in the image below. The "Sign in with Apple" should be located above the "Google Sign-In". It is actually located at the top left of the screen

React Native Version

0.77.0

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx react-native info

npx react-native info
info Fetching system and libraries information...
System:
  OS: macOS 14.5
  CPU: (8) arm64 Apple M1
  Memory: 85.28 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.11.0
    path: ~/.nvm/versions/node/v20.11.0/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.2.4
    path: ~/.nvm/versions/node/v20.11.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/richard/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.0
      - iOS 18.0
      - macOS 15.0
      - tvOS 18.0
      - visionOS 2.0
      - watchOS 11.0
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 16.0/16A242d
    path: /usr/bin/xcodebuild
Languages:
  Java: Not Found
  Ruby:
    version: 3.3.5
    path: /Users/richard/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.77.0
    wanted: 0.77.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

No logs

Reproducer

https://github.com/Richard-HeadCoach/loginApp

Screenshots and Videos

Inizia con l’implementazione di RNAppleAuthButtonView e il riproduttore loginApp descritto nell’issue, quindi riproduci il layout su React Native 0.77 con Fabric abilitato. Traccia il modo in cui viene assegnato il frame del componente nativo e verifica che il pulsante Apple riceva la posizione prevista sopra il pulsante Google anziché {{0, 0}, {200, 45}}.