Better alignment of willAppear and didAppear events throughout the lifecycle

lib/ios/RNNCommandsHandler.mm

@@ -467,6 +467,7 @@ - (void)showOverlay:(NSDictionary *)layout
     RNNAssertMainQueue();
 
     UIViewController *overlayVC = [_controllerFactory createLayout:layout];
+    overlayVC.waitForRender = [RNNUtils getDefaultWaitForRender];
     [_layoutManager addPendingViewController:overlayVC];
 
     __weak UIViewController *weakOverlayVC = overlayVC;

lib/ios/RNNReactButtonView.mm

@@ -5,7 +5,7 @@ @implementation RNNReactButtonView
 - (instancetype)initWithHost:(RCTHost *)host
                   moduleName:(NSString *)moduleName
            initialProperties:(NSDictionary *)initialProperties
-                eventEmitter:(RNNEventEmitter *)eventEmitter
+                eventEmitter:(RNNTurboEventEmitter *)eventEmitter
              sizeMeasureMode:(RCTSurfaceSizeMeasureMode)sizeMeasureMode
          reactViewReadyBlock:(RNNReactViewReadyCompletionBlock)reactViewReadyBlock {
     self = [super initWithHost:host moduleName:moduleName initialProperties:initialProperties eventEmitter:eventEmitter sizeMeasureMode:convertToSurfaceSizeMeasureMode(RCTRootViewSizeFlexibilityWidthAndHeight) reactViewReadyBlock:reactViewReadyBlock];

lib/ios/RNNReactView.h

@@ -15,6 +15,8 @@
 #define ComponentTypeButton @"TopBarButton"
 #define ComponentTypeBackground @"TopBarBackground"
 
+#import "RNNTurboEventEmitter.h"
+
 #ifdef RCT_NEW_ARCH_ENABLED
 static RCTSurfaceSizeMeasureMode convertToSurfaceSizeMeasureMode(RCTRootViewSizeFlexibility sizeFlexibility)
 {
@@ -92,7 +94,7 @@ typedef void (^RNNReactViewReadyCompletionBlock)(void);
 - (instancetype)initWithHost:(RCTHost *)host
 				  moduleName:(NSString *)moduleName
 		   initialProperties:(NSDictionary *)initialProperties
-				eventEmitter:(RNNEventEmitter *)eventEmitter
+				eventEmitter:(RNNTurboEventEmitter *)eventEmitter
 			 sizeMeasureMode:(RCTSurfaceSizeMeasureMode)sizeMeasureMode
 		 reactViewReadyBlock:(RNNReactViewReadyCompletionBlock)reactViewReadyBlock;
 

lib/ios/RNNReactView.mm

@@ -11,6 +11,7 @@
 
 @implementation RNNReactView {
     BOOL _isMounted;
+    BOOL _pendingWillAppear;
     BOOL _pendingDidAppear;
     BOOL _didAppear;
     BOOL _willAppear;
@@ -56,17 +57,18 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge
 - (instancetype)initWithHost:(RCTHost *)host
                   moduleName:(NSString *)moduleName
            initialProperties:(NSDictionary *)initialProperties
-                eventEmitter:(RNNEventEmitter *)eventEmitter
+                eventEmitter:(RNNTurboEventEmitter *)eventEmitter
              sizeMeasureMode:(RCTSurfaceSizeMeasureMode)sizeMeasureMode
          reactViewReadyBlock:(RNNReactViewReadyCompletionBlock)reactViewReadyBlock {
+
     RCTFabricSurface *surface = [host createSurfaceWithModuleName:moduleName
                                                 initialProperties:initialProperties];
-             [host.surfacePresenter addObserver:self];
+    [host.surfacePresenter addObserver:self];
     self = [super initWithSurface:surface sizeMeasureMode:sizeMeasureMode];
-
+    
     _reactViewReadyBlock = reactViewReadyBlock;
     _eventEmitter = eventEmitter;
-
+    
     return self;
 }
 #endif
@@ -88,7 +90,7 @@ - (void)contentDidAppear:(NSNotification *)notification {
     }
 }
 #endif
-
+    
 - (void)reactViewReady {
     if (_reactViewReadyBlock) {
         _reactViewReadyBlock();
@@ -99,12 +101,19 @@ - (void)reactViewReady {
 #endif
 }
 
+#pragma mark - RNNComponentProtocol
 - (void)componentWillAppear {
+    if (!_isMounted) {
+        _pendingWillAppear = YES;
+        return;
+    }
+
+    _pendingWillAppear = NO;
+
     if (!_willAppear) {
         [_eventEmitter sendComponentWillAppear:self.componentId
                                  componentName:self.moduleName
                                  componentType:self.componentType];
-
         _willAppear = YES;
     }
 }
@@ -116,6 +125,7 @@ - (void)componentDidAppear {
     }
 
     _pendingDidAppear = NO;
+
     if (!_didAppear) {
         [_eventEmitter sendComponentDidAppear:self.componentId
                                 componentName:self.moduleName
@@ -131,18 +141,43 @@ - (void)componentDidDisappear {
     _willAppear = NO;
     _didAppear = NO;
 }
+
+- (NSString *)componentId {
+    return self.appProperties[@"componentId"];
+}
 
+- (NSString *)componentType {
+    @throw [NSException exceptionWithName:@"componentType not implemented"
+                                   reason:@"Should always subclass RNNReactView"
+                                 userInfo:nil];
+}
+#pragma mark -
+
+
 #ifdef RCT_NEW_ARCH_ENABLED
+
+#pragma mark - RCTSurfacePresenterObserver
+- (void)willMountComponentsWithRootTag:(NSInteger)rootTag {
+    if (self.surface.rootTag == rootTag) {
+        _isMounted = YES;
+
+        if (_pendingWillAppear) {
+            [self componentWillAppear];
+        }
+    }
+}
 
 - (void)didMountComponentsWithRootTag:(NSInteger)rootTag {
     if (self.surface.rootTag == rootTag) {
         _isMounted = YES;
+
         if (_pendingDidAppear) {
             [self componentDidAppear];
         }
     }
 }
-
+#pragma mark -
+
 - (NSDictionary *)appProperties {
     @synchronized(self) {
         return self.surface.properties;
@@ -175,7 +210,7 @@ - (UIView *)view {
 }
 
 - (UIView *)contentView {
-   return self;
+    return self;
 }
 
 - (RCTRootViewSizeFlexibility)sizeFlexibility {
@@ -185,17 +220,7 @@ - (RCTRootViewSizeFlexibility)sizeFlexibility {
 - (void)setSizeFlexibility:(RCTRootViewSizeFlexibility)sizeFlexibility {
     super.sizeMeasureMode = convertToSurfaceSizeMeasureMode(sizeFlexibility);
 }
-
+            
 #endif
-
-- (NSString *)componentId {
-    return self.appProperties[@"componentId"];
-}
-
-- (NSString *)componentType {
-    @throw [NSException exceptionWithName:@"componentType not implemented"
-                                   reason:@"Should always subclass RNNReactView"
-                                 userInfo:nil];
-}
-
+
 @end

playground/src/screens/LayoutsScreen.tsx

@@ -25,6 +25,7 @@ const {
 } = testIDs;
 
 interface State {
+  componentWillAppear: boolean;
   componentDidAppear: boolean;
 }
 
@@ -33,11 +34,13 @@ export default class LayoutsScreen extends NavigationComponent<NavigationProps,
     super(props);
     Navigation.events().bindComponent(this);
     this.state = {
+      componentWillAppear: false,
       componentDidAppear: false,
     };
   }
   componentWillAppear() {
     console.log('componentWillAppear:', this.props.componentId);
+    this.setState(previousState => ({ ...previousState, componentWillAppear: true }));
   }
 
   componentDidDisappear() {
@@ -46,7 +49,7 @@ export default class LayoutsScreen extends NavigationComponent<NavigationProps,
 
   componentDidAppear() {
     console.log('componentDidAppear:', this.props.componentId);
-    this.setState({ componentDidAppear: true });
+    this.setState(previousState => ({ ...previousState, componentDidAppear: true }));
   }
 
   static options(): Options {
@@ -79,6 +82,7 @@ export default class LayoutsScreen extends NavigationComponent<NavigationProps,
           platform="ios"
           onPress={this.splitView}
         />
+        <Text>{this.state.componentWillAppear && 'componentWillAppear'}</Text>
         <Text>{this.state.componentDidAppear && 'componentDidAppear'}</Text>
       </Root>
     );