react-native-navigation 8.1.0-alpha01 → 8.1.0-rc01-snapshot.1685

package/lib/dist/Mock/Layouts/SideMenu.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideMenuCenterNode = exports.SideMenuRightNode = exports.SideMenuLeftNode = exports.SideMenuNode = void 0;
+const tslib_1 = require("tslib");
+const ParentNode_1 = tslib_1.__importDefault(require("./ParentNode"));
+const layoutActions = tslib_1.__importStar(require("../actions/layoutActions"));
+const isCenterChild = (child) => child.type === 'SideMenuCenter';
+const isLeftChild = (child) => child.type === 'SideMenuLeft';
+const isRightChild = (child) => child.type === 'SideMenuRight';
+class SideMenuRootNode extends ParentNode_1.default {
+    visibleChild;
+    constructor(layout, parentNode) {
+        super(layout, 'SideMenuRoot', parentNode);
+        this.visibleChild = this._getCenterChild();
+        if (!this.visibleChild) {
+            throw new Error('SideMenuRootNode must have a SideMenuCenter child');
+        }
+    }
+    applyOptions(_options) {
+        super.applyOptions(_options);
+        this._updateVisibility(_options);
+    }
+    mergeOptions(options) {
+        super.mergeOptions(options);
+        this._updateVisibility(options);
+    }
+    /**
+     * @override
+     */
+    getVisibleLayout() {
+        return this.visibleChild.getVisibleLayout();
+    }
+    _updateVisibility(options) {
+        if (options.sideMenu) {
+            if (options.sideMenu.left?.visible) {
+                this.visibleChild = this._getLeftChild();
+                layoutActions.openSideMenu(this.visibleChild);
+            }
+            else if (options.sideMenu.right?.visible) {
+                this.visibleChild = this._getRightChild();
+                layoutActions.openSideMenu(this.visibleChild);
+            }
+            else {
+                this.visibleChild = this._getCenterChild();
+                layoutActions.closeSideMenu(this.visibleChild);
+            }
+        }
+    }
+    _getCenterChild = () => this.children.find(isCenterChild);
+    _getLeftChild = () => this.children.find(isLeftChild);
+    _getRightChild = () => this.children.find(isRightChild);
+}
+exports.default = SideMenuRootNode;
+class SideMenuNode extends ParentNode_1.default {
+    constructor(layout, type, parentNode) {
+        super(layout, type, parentNode);
+    }
+    getVisibleLayout() {
+        return this.children[0].getVisibleLayout();
+    }
+}
+exports.SideMenuNode = SideMenuNode;
+class SideMenuLeftNode extends SideMenuNode {
+    constructor(layout, parentNode) {
+        super(layout, 'SideMenuLeft', parentNode);
+    }
+}
+exports.SideMenuLeftNode = SideMenuLeftNode;
+class SideMenuRightNode extends SideMenuNode {
+    constructor(layout, parentNode) {
+        super(layout, 'SideMenuRight', parentNode);
+    }
+}
+exports.SideMenuRightNode = SideMenuRightNode;
+class SideMenuCenterNode extends SideMenuNode {
+    constructor(layout, parentNode) {
+        super(layout, 'SideMenuCenter', parentNode);
+    }
+}
+exports.SideMenuCenterNode = SideMenuCenterNode;

package/lib/dist/Mock/Stores/LayoutStore.js

@@ -9,6 +9,7 @@ const state = remx.state({
     root: {},
     modals: [],
     overlays: [],
+    sideMenu: undefined,
 });
 const setters = remx.setters({
     setRoot(layout) {
@@ -73,6 +74,23 @@ const setters = remx.setters({
     selectTabIndex(layout, index) {
         getters.getLayoutById(layout.nodeId).selectedIndex = index;
     },
+    openSideMenu(layout) {
+        if (state.sideMenu) {
+            throw new Error('A side-menu is already open; Mocked-testing of multiple side-menu scenarios is not supported yet.' +
+                ' You can submit a request in https://github.com/wix/react-native-navigation/issues/new/choose.');
+        }
+        state.sideMenu = layout;
+    },
+    closeSideMenu(_layout) {
+        state.sideMenu = undefined;
+    },
+    applyOptions(componentId, options) {
+        const layout = getters.getLayoutById(componentId);
+        if (layout)
+            layout.applyOptions(options);
+        else
+            console.warn(`[RNN error] Merge options failure: cannot find layout for: ${componentId}`);
+    },
     mergeOptions(componentId, options) {
         const layout = getters.getLayoutById(componentId);
         if (layout)
@@ -86,14 +104,25 @@ const getters = remx.getters({
         return state.root;
     },
     getVisibleLayout() {
+        let layout;
         if (state.modals.length > 0) {
-            return lodash_1.default.last(state.modals).getVisibleLayout();
+            layout = lodash_1.default.last(state.modals);
+        }
+        else if (!lodash_1.default.isEqual(state.root, {})) {
+            layout = state.root;
+        }
+        // Note: While this logic should be fair for all use cases (i.e. even multiple side-menus across tabs),
+        // there is no current test case that justifies it. Nevertheless, it's required to pass the tests,
+        // because otherwise getVisibleLayout() would not be revisited whenever side-menus are opened/closed.
+        if (layout && state.sideMenu && findNode(state.sideMenu.nodeId, layout)) {
+            layout = state.sideMenu.parentNode;
         }
-        else if (!lodash_1.default.isEqual(state.root, {}))
-            return state.root.getVisibleLayout();
+        return layout?.getVisibleLayout();
     },
     isVisibleLayout(layout) {
-        return getters.getVisibleLayout() && getters.getVisibleLayout().nodeId === layout.nodeId;
+        const nodeId = layout.nodeId;
+        const visibleLayout = getters.getVisibleLayout();
+        return visibleLayout?.nodeId === nodeId;
     },
     getModals() {
         return state.modals;
@@ -103,11 +132,11 @@ const getters = remx.getters({
     },
     getLayoutById(layoutId) {
         if (getters.getModalById(layoutId))
-            return findParentNode(layoutId, getters.getModalById(layoutId));
-        return findParentNode(layoutId, state.root);
+            return findNode(layoutId, getters.getModalById(layoutId));
+        return findNode(layoutId, state.root);
     },
     getModalById(layoutId) {
-        return lodash_1.default.find(state.modals, (layout) => findParentNode(layoutId, layout));
+        return lodash_1.default.find(state.modals, (layout) => findNode(layoutId, layout));
     },
     getLayoutChildren(layoutId) {
         return getters.getLayoutById(layoutId).children;
@@ -117,14 +146,14 @@ const getters = remx.getters({
             lodash_1.default.find(state.modals, (layout) => findStack(layoutId, layout)));
     },
 });
-function findParentNode(layoutId, layout) {
+function findNode(layoutId, layout) {
     if (layoutId === layout.nodeId) {
         return layout;
     }
     else if (layout.children) {
         for (let i = 0; i < layout.children.length; i += 1) {
             const child = layout.children[i];
-            const result = findParentNode(layoutId, child);
+            const result = findNode(layoutId, child);
             if (result !== false) {
                 return result;
             }

package/lib/dist/Mock/actions/layoutActions.d.ts

@@ -1,2 +1,5 @@
 import ParentNode from '../Layouts/ParentNode';
+import { SideMenuNode } from '../Layouts/SideMenu';
 export declare const switchTabByIndex: (bottomTabs: ParentNode | undefined, index: number) => void;
+export declare const openSideMenu: (sideMenu: SideMenuNode) => void;
+export declare const closeSideMenu: (layout: SideMenuNode) => void;

package/lib/dist/Mock/actions/layoutActions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.switchTabByIndex = void 0;
+exports.closeSideMenu = exports.openSideMenu = exports.switchTabByIndex = void 0;
 const LayoutStore_1 = require("../Stores/LayoutStore");
 const switchTabByIndex = (bottomTabs, index) => {
     if (bottomTabs) {
@@ -10,3 +10,13 @@ const switchTabByIndex = (bottomTabs, index) => {
     }
 };
 exports.switchTabByIndex = switchTabByIndex;
+const openSideMenu = (sideMenu) => {
+    LayoutStore_1.LayoutStore.openSideMenu(sideMenu);
+    LayoutStore_1.LayoutStore.getVisibleLayout().componentDidAppear();
+};
+exports.openSideMenu = openSideMenu;
+const closeSideMenu = (layout) => {
+    LayoutStore_1.LayoutStore.getVisibleLayout().componentDidDisappear();
+    LayoutStore_1.LayoutStore.closeSideMenu(layout);
+};
+exports.closeSideMenu = closeSideMenu;

package/lib/dist/Mock/mocks/NativeCommandsSender.js

@@ -34,6 +34,7 @@ class NativeCommandsSender {
             const layoutNode = LayoutNodeFactory_1.default.create(layout, stack);
             stack.getVisibleLayout().componentDidDisappear();
             LayoutStore_1.LayoutStore.push(layoutNode, stack);
+            LayoutStore_1.LayoutStore.applyOptions(layoutNode.nodeId, layoutNode.data.options);
             stack.getVisibleLayout().componentDidAppear();
             resolve(stack.getVisibleLayout().nodeId);
             this.reportCommandCompletion(CommandName_1.CommandName.Push, commandId);

package/lib/dist/src/adapters/NativeCommandsSender.d.ts

@@ -1,7 +1,5 @@
 import { NavigationConstants } from './Constants';
-export declare class NativeCommandsSender {
-    private readonly nativeCommandsModule;
-    constructor();
+interface NativeCommandsModule {
     setRoot(commandId: string, layout: {
         root: any;
         modals: any[];
@@ -13,7 +11,7 @@ export declare class NativeCommandsSender {
     pop(commandId: string, componentId: string, options?: object): Promise<any>;
     popTo(commandId: string, componentId: string, options?: object): Promise<any>;
     popToRoot(commandId: string, componentId: string, options?: object): Promise<any>;
-    setStackRoot(commandId: string, onComponentId: string, layout: object): Promise<any>;
+    setStackRoot(commandId: string, onComponentId: string, layout: object[]): Promise<any>;
     showModal(commandId: string, layout: object): Promise<any>;
     dismissModal(commandId: string, componentId: string, options?: object): Promise<any>;
     dismissAllModals(commandId: string, options?: object): Promise<any>;
@@ -23,4 +21,41 @@ export declare class NativeCommandsSender {
     getLaunchArgs(commandId: string): Promise<any>;
     getNavigationConstants(): Promise<NavigationConstants>;
     getNavigationConstantsSync(): NavigationConstants;
+    getConstants?: () => NavigationConstants;
+}
+export declare class NativeCommandsSender implements NativeCommandsModule {
+    private readonly nativeCommandsModule;
+    constructor();
+    setRoot(commandId: string, layout: {
+        root: any;
+        modals: any[];
+        overlays: any[];
+    }): Promise<string>;
+    setDefaultOptions(options: object): void;
+    mergeOptions(componentId: string, options: object): void;
+    push(commandId: string, onComponentId: string, layout: object): Promise<string>;
+    pop(commandId: string, componentId: string, options?: object): Promise<string>;
+    popTo(commandId: string, componentId: string, options?: object): Promise<string>;
+    popToRoot(commandId: string, componentId: string, options?: object): Promise<string>;
+    setStackRoot(commandId: string, onComponentId: string, layout: object[]): Promise<string>;
+    showModal(commandId: string, layout: object): Promise<string>;
+    dismissModal(commandId: string, componentId: string, options?: object): Promise<string>;
+    dismissAllModals(commandId: string, options?: object): Promise<string>;
+    showOverlay(commandId: string, layout: object): Promise<string>;
+    dismissOverlay(commandId: string, componentId: string): Promise<string>;
+    dismissAllOverlays(commandId: string): Promise<string>;
+    getLaunchArgs(commandId: string): Promise<string[]>;
+    getNavigationConstants(): Promise<{
+        topBarHeight: number;
+        statusBarHeight: number;
+        bottomTabsHeight: number;
+        backButtonId: string;
+    }>;
+    getNavigationConstantsSync(): {
+        topBarHeight: number;
+        statusBarHeight: number;
+        bottomTabsHeight: number;
+        backButtonId: string;
+    };
 }
+export {};

package/lib/dist/src/adapters/NativeCommandsSender.js

@@ -54,10 +54,10 @@ class NativeCommandsSender {
         return this.nativeCommandsModule.getLaunchArgs(commandId);
     }
     getNavigationConstants() {
-        return this.nativeCommandsModule.getNavigationConstants();
+        return Promise.resolve(this.nativeCommandsModule.getConstants());
     }
     getNavigationConstantsSync() {
-        return this.nativeCommandsModule.getNavigationConstantsSync();
+        return this.nativeCommandsModule.getConstants();
     }
 }
 exports.NativeCommandsSender = NativeCommandsSender;

package/lib/dist/src/adapters/NativeRNNTurboEventEmitter.js

@@ -1,13 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_native_1 = require("react-native");
-let eventEmitter = null;
-try {
-    // Running in bridge mode
-    eventEmitter = react_native_1.NativeModules.RNNBridgeEventEmitter;
-}
-catch (e) {
-    // Running in bridgeless, access to NativeModules is prohibited
-    eventEmitter = react_native_1.TurboModuleRegistry.get('RNNTurboEventEmitter');
-}
+let eventEmitter;
+eventEmitter = react_native_1.TurboModuleRegistry.get('RNNTurboEventEmitter');
 exports.default = eventEmitter;

package/lib/dist/src/adapters/NativeRNNTurboModule.d.ts

@@ -5,24 +5,23 @@ export interface Spec extends TurboModule {
         topBarHeight: Double;
         statusBarHeight: Double;
         bottomTabsHeight: Double;
+        backButtonId: string;
     };
     setRoot(commandId: string, layout: UnsafeObject): Promise<string>;
     setDefaultOptions(options: UnsafeObject): void;
     mergeOptions(componentId: string, options: UnsafeObject): void;
     push(commandId: string, componentId: string, layout: UnsafeObject): Promise<string>;
-    pop(commandId: string, componentId: string, options: UnsafeObject): Promise<string>;
-    popTo(commandId: string, componentId: string, options: UnsafeObject): Promise<string>;
-    popToRoot(commandId: string, componentId: string, options: UnsafeObject): Promise<string>;
+    pop(commandId: string, componentId: string, options?: UnsafeObject): Promise<string>;
+    popTo(commandId: string, componentId: string, options?: UnsafeObject): Promise<string>;
+    popToRoot(commandId: string, componentId: string, options?: UnsafeObject): Promise<string>;
     setStackRoot(commandId: string, componentId: string, layout: Array<UnsafeObject>): Promise<string>;
     showModal(commandId: string, layout: UnsafeObject): Promise<string>;
-    dismissModal(commandId: string, componentId: string, options: UnsafeObject): Promise<string>;
-    dismissAllModals(commandId: string, options: UnsafeObject): Promise<void>;
+    dismissModal(commandId: string, componentId: string, options?: UnsafeObject): Promise<string>;
+    dismissAllModals(commandId: string, options?: UnsafeObject): Promise<string>;
     showOverlay(commandId: string, layout: UnsafeObject): Promise<string>;
-    dismissOverlay(commandId: string, componentId: string): Promise<void>;
-    dismissAllOverlays(commandId: string): Promise<void>;
+    dismissOverlay(commandId: string, componentId: string): Promise<string>;
+    dismissAllOverlays(commandId: string): Promise<string>;
     getLaunchArgs(commandId: string): Promise<Array<string>>;
 }
-declare const commands: any;
-export declare const RCTAssertNewArchEnabled: () => void;
-export declare const isRNNTurboModuleAvailable: boolean;
+declare const commands: Spec;
 export default commands;

package/lib/dist/src/adapters/NativeRNNTurboModule.js

@@ -1,16 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isRNNTurboModuleAvailable = exports.RCTAssertNewArchEnabled = void 0;
 const react_native_1 = require("react-native");
-const isTurboModuleEnabled = globalThis.__turboModuleProxy != null;
-const commands = isTurboModuleEnabled && react_native_1.Platform.OS === 'ios'
-    ? react_native_1.TurboModuleRegistry.get('RNNTurboModule')
-    : react_native_1.NativeModules.RNNBridgeModule;
-const isNewArchWithBridgeless = isTurboModuleEnabled;
-const RCTAssertNewArchEnabled = () => {
-    if (!isNewArchWithBridgeless)
-        throw new Error('Allowed only in New Architecture with Bridgeless!');
-};
-exports.RCTAssertNewArchEnabled = RCTAssertNewArchEnabled;
-exports.isRNNTurboModuleAvailable = isNewArchWithBridgeless;
+const commands = react_native_1.TurboModuleRegistry.get('RNNTurboModule');
 exports.default = commands;

package/lib/dist/src/commands/Commands.d.ts

@@ -20,20 +20,20 @@ export declare class Commands {
     private readonly layoutProcessor;
     private readonly optionsCrawler;
     constructor(store: Store, nativeCommandsSender: NativeCommandsSender, layoutTreeParser: LayoutTreeParser, layoutTreeCrawler: LayoutTreeCrawler, commandsObserver: CommandsObserver, uniqueIdProvider: UniqueIdProvider, optionsProcessor: OptionsProcessor, layoutProcessor: LayoutProcessor, optionsCrawler: OptionsCrawler);
-    setRoot(simpleApi: LayoutRoot): Promise<any>;
+    setRoot(simpleApi: LayoutRoot): Promise<string>;
     setDefaultOptions(options: Options): void;
     mergeOptions(componentId: string, options: Options): void;
     updateProps(componentId: string, props: object, callback?: () => void): void;
-    showModal<P>(layout: Layout<P>): Promise<any>;
-    dismissModal(componentId: string, mergeOptions?: Options): Promise<any>;
-    dismissAllModals(mergeOptions?: Options): Promise<any>;
-    push<P>(componentId: string, simpleApi: Layout<P>): Promise<any>;
-    pop(componentId: string, mergeOptions?: Options): Promise<any>;
-    popTo(componentId: string, mergeOptions?: Options): Promise<any>;
-    popToRoot(componentId: string, mergeOptions?: Options): Promise<any>;
-    setStackRoot<P>(componentId: string, children: Layout<P>[]): Promise<any>;
-    showOverlay<P>(simpleApi: Layout<P>): Promise<any>;
-    dismissOverlay(componentId: string): Promise<any>;
-    dismissAllOverlays(): Promise<any>;
-    getLaunchArgs(): Promise<any>;
+    showModal<P>(layout: Layout<P>): Promise<string>;
+    dismissModal(componentId: string, mergeOptions?: Options): Promise<string>;
+    dismissAllModals(mergeOptions?: Options): Promise<string>;
+    push<P>(componentId: string, simpleApi: Layout<P>): Promise<string>;
+    pop(componentId: string, mergeOptions?: Options): Promise<string>;
+    popTo(componentId: string, mergeOptions?: Options): Promise<string>;
+    popToRoot(componentId: string, mergeOptions?: Options): Promise<string>;
+    setStackRoot<P>(componentId: string, children: Layout<P>[]): Promise<string>;
+    showOverlay<P>(simpleApi: Layout<P>): Promise<string>;
+    dismissOverlay(componentId: string): Promise<string>;
+    dismissAllOverlays(): Promise<string>;
+    getLaunchArgs(): Promise<string[]>;
 }

package/lib/ios/AnimatedTextView.mm

@@ -45,6 +45,7 @@
 
 - (void)reset {
     [super reset];
+    _fromTextContainer.size = _fromSize;
 }
 
 - (NSTextContainer *)container:(NSTextStorage *)fromTextStorage {

package/lib/ios/Constants.mm

@@ -16,7 +16,8 @@
 	JS::NativeRNNTurboModule::Constants::Builder::Input input = {
 		[self topBarHeight],
 		[self statusBarHeight],
-		[self bottomTabsHeight]
+		[self bottomTabsHeight],
+        [self backButtonId]
 	};
 
 	return input;
@@ -35,4 +36,9 @@
     return [UIApplication.sharedApplication.delegate.window.rootViewController getBottomTabsHeight];
 }
 
++ (NSString*)backButtonId {
+    // This property is used only in android but we have to add it for compatability in turbo modules
+    return @"";
+}
+
 @end

package/lib/ios/RNNAppDelegate.mm

@@ -1,3 +1,4 @@
+
 #import "RNNAppDelegate.h"
 #import <ReactNativeNavigation/ReactNativeNavigation.h>
 
@@ -39,6 +40,7 @@ static NSString *const kRNConcurrentRoot = @"concurrentRoot";
 	RCTAppSetupPrepareApp(application, self.turboModuleEnabled);
 	RCTSetNewArchEnabled(TRUE);
 
+
 	if (self.bridgelessEnabled) {
 		// Creating host instead of bridge
 		self.rootViewFactory.reactHost = [self.rootViewFactory createReactHost:launchOptions];
@@ -113,7 +115,7 @@ static NSString *const kRNConcurrentRoot = @"concurrentRoot";
 }
 
 - (id<RCTTurboModule>)getModuleInstanceFromClass:(Class)moduleClass {
-	return RCTAppSetupDefaultModuleFromClass(moduleClass);
+	return RCTAppSetupDefaultModuleFromClass(moduleClass, self.dependencyProvider);
 }
 #endif
 

package/lib/ios/RNNCommandsHandler.mm

@@ -300,6 +300,7 @@ static NSString *const setDefaultOptions = @"setDefaultOptions";
                    completion:^{
                      [self->_eventEmitter sendOnNavigationCommandCompletion:pop
                                                                   commandId:commandId];
+                NSLog(@"Pop commandshandler completed");
                      completion();
                    }
                     rejection:rejection];

package/lib/ios/RNNCustomTitleView.h

@@ -4,6 +4,7 @@
 
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTSurfaceDelegate.h>
+#import <React/RCTSurface.h>
 #endif
 
 @interface RNNCustomTitleView : UIView <

package/lib/ios/RNNCustomTitleView.mm

@@ -55,8 +55,15 @@
 
 #ifdef RCT_NEW_ARCH_ENABLED
 - (void)surface:(RCTSurface *)surface didChangeIntrinsicSize:(CGSize)intrinsicSize {
-	// TODO: FILL WITH DATA
+    if ([self.alignment isEqualToString:@"center"]) {
+        [self setFrame:CGRectMake(self.frame.origin.x, self.frame.origin.y,
+                                  self.subView.intrinsicContentSize.width,
+                                  self.subView.intrinsicContentSize.height)];
+        [self.subView setFrame:CGRectMake(0, 0, surface.intrinsicSize.width,
+                                          surface.intrinsicSize.height)];
+    }
 }
+
 #else
 - (void)rootViewDidChangeIntrinsicSize:(RCTRootView *)rootView {
     if ([self.alignment isEqualToString:@"center"]) {

package/lib/ios/RNNEventEmitter.mm

@@ -154,6 +154,9 @@ static NSString *const BottomTabPressed = @"RNN.BottomTabPressed";
 #pragma mark private
 
 - (void)send:(NSString *)eventName body:(id)body {
+    if (self.bridge == nil) {
+        return;
+    }
     [self sendEventWithName:eventName body:body];
 }
 

package/lib/ios/RNNReactButtonView.mm

@@ -5,7 +5,7 @@
 - (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];

package/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;
 

package/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)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 @@
     }
 }
 #endif
-
+    
 - (void)reactViewReady {
     if (_reactViewReadyBlock) {
         _reactViewReadyBlock();
@@ -99,12 +101,19 @@
 #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 @@
     }
     
     _pendingDidAppear = NO;
+    
     if (!_didAppear) {
         [_eventEmitter sendComponentDidAppear:self.componentId
                                 componentName:self.moduleName
@@ -131,18 +141,43 @@
     _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 *)contentView {
-   return self;
+    return self;
 }
 
 - (RCTRootViewSizeFlexibility)sizeFlexibility {
@@ -185,17 +220,7 @@
 - (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