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

Commencez par l’implémentation de RNAppleAuthButtonView et le reproducteur loginApp décrit dans l’issue, puis reproduisez la mise en page avec React Native 0.77 et Fabric activé. Suivez la façon dont le frame du composant natif est attribué et vérifiez que le bouton Apple reçoit sa position prévue au-dessus du bouton Google plutôt que {{0, 0}, {200, 45}}.