react-native-navigation 8.1.0-alpha-snapshot.1648 → 8.1.0-rc01

package/lib/Mock/Components/ComponentScreen.tsx

@@ -25,7 +25,8 @@ export const ComponentScreen = connect(
     }
 
     isVisible(): boolean {
-      return LayoutStore.isVisibleLayout(this.props.layoutNode);
+      const isVisible = LayoutStore.isVisibleLayout(this.props.layoutNode);
+      return isVisible;
     }
 
     renderTabBar() {

package/lib/Mock/Components/LayoutComponent.tsx

@@ -4,6 +4,7 @@ import { BottomTabs } from './BottomTabs';
 import { ComponentProps } from '../ComponentProps';
 import { ComponentScreen } from './ComponentScreen';
 import { Stack } from './Stack';
+import { SideMenuRoot, SideMenuCenter, SideMenuLeft, SideMenuRight } from './SideMenu';
 
 export const LayoutComponent = class extends Component<ComponentProps> {
   render() {
@@ -14,6 +15,14 @@ export const LayoutComponent = class extends Component<ComponentProps> {
         return <Stack layoutNode={this.props.layoutNode} />;
       case 'Component':
         return <ComponentScreen layoutNode={this.props.layoutNode} />;
+      case 'SideMenuRoot':
+        return <SideMenuRoot layoutNode={this.props.layoutNode} />;
+      case 'SideMenuLeft':
+        return <SideMenuLeft layoutNode={this.props.layoutNode} />;
+      case 'SideMenuCenter':
+        return <SideMenuCenter layoutNode={this.props.layoutNode} />;
+      case 'SideMenuRight':
+        return <SideMenuRight layoutNode={this.props.layoutNode} />;
     }
 
     return <View />;

package/lib/Mock/Components/SideMenu.tsx

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import { connect } from '../connect';
+import { ComponentProps } from '../ComponentProps';
+import { LayoutComponent } from './LayoutComponent';
+import ParentNode from '../Layouts/ParentNode';
+
+export const SideMenuRoot = connect(
+  class extends Component<ComponentProps> {
+    render() {
+      const children = this.props.layoutNode.children;
+      return children.map((child: ParentNode) => {
+        return <LayoutComponent key={child.nodeId} layoutNode={child} />;
+      });
+    }
+  }
+);
+
+class SideMenuComponent extends Component<ComponentProps> {
+  render() {
+    const children = this.props.layoutNode.children;
+    const component = children[0];
+    return <LayoutComponent key={component.nodeId} layoutNode={component} />;
+  }
+}
+export const SideMenuLeft = connect(SideMenuComponent);
+export const SideMenuCenter = connect(SideMenuComponent);
+export const SideMenuRight = connect(SideMenuComponent);

package/lib/Mock/Layouts/BottomTabsNode.ts

@@ -10,8 +10,10 @@ export default class BottomTabsNode extends ParentNode {
     this.selectedIndex = layout.data?.options?.bottomTabs?.currentTabIndex || 0;
   }
 
-  mergeOptions(options: Options) {
-    super.mergeOptions(options);
+  mergeOptions(_options: Options) {
+    super.mergeOptions(_options);
+
+    const { options } = this.data;
     if (options.bottomTabs?.currentTabIndex) {
       this.selectedIndex = options.bottomTabs?.currentTabIndex;
       switchTabByIndex(this, this.selectedIndex);

package/lib/Mock/Layouts/LayoutNodeFactory.ts

@@ -2,6 +2,11 @@ import BottomTabs from './BottomTabsNode';
 import ComponentNode from './ComponentNode';
 import Stack from './StackNode';
 import ParentNode from './ParentNode';
+import SideMenuRootNode, {
+  SideMenuLeftNode,
+  SideMenuRightNode,
+  SideMenuCenterNode,
+} from './SideMenu';
 
 export default class LayoutNodeFactory {
   static create(layout: any, parentNode?: ParentNode) {
@@ -10,7 +15,15 @@ export default class LayoutNodeFactory {
         return new ComponentNode(layout, parentNode);
       case 'Stack':
         return new Stack(layout, parentNode);
-      default:
+      case 'SideMenuRoot':
+        return new SideMenuRootNode(layout, parentNode);
+      case 'SideMenuLeft':
+        return new SideMenuLeftNode(layout, parentNode);
+      case 'SideMenuCenter':
+        return new SideMenuCenterNode(layout, parentNode);
+      case 'SideMenuRight':
+        return new SideMenuRightNode(layout, parentNode);
+      default: // TODO Undo
       case 'BottomTabs':
         return new BottomTabs(layout, parentNode);
     }

package/lib/Mock/Layouts/ParentNode.ts

@@ -35,6 +35,10 @@ export default class ParentNode extends Node {
     return this;
   }
 
+  applyOptions(_options: Options) {
+    this.parentNode?.applyOptions(_options);
+  }
+
   mergeOptions(options: Options) {
     this.data.options = _.mergeWith(this.data.options, options, (objValue, srcValue, key) => {
       if (_.isArray(objValue)) {

package/lib/Mock/Layouts/SideMenu.ts

@@ -0,0 +1,87 @@
+import ParentNode from './ParentNode';
+import ComponentNode from './ComponentNode';
+import { Options } from '../../src/index';
+import * as layoutActions from '../actions/layoutActions';
+import { NodeType } from './Node';
+
+const isCenterChild = (child: ParentNode) => child.type === 'SideMenuCenter';
+const isLeftChild = (child: ParentNode) => child.type === 'SideMenuLeft';
+const isRightChild = (child: ParentNode) => child.type === 'SideMenuRight';
+
+export default class SideMenuRootNode extends ParentNode {
+  visibleChild: ParentNode;
+
+  constructor(layout: any, parentNode?: ParentNode) {
+    super(layout, 'SideMenuRoot', parentNode);
+
+    this.visibleChild = this._getCenterChild();
+    if (!this.visibleChild) {
+      throw new Error('SideMenuRootNode must have a SideMenuCenter child');
+    }
+  }
+
+  applyOptions(_options: Options) {
+    super.applyOptions(_options);
+
+    this._updateVisibility(_options);
+  }
+
+  mergeOptions(options: Options) {
+    super.mergeOptions(options);
+
+    this._updateVisibility(options);
+  }
+
+  /**
+   * @override
+   */
+  getVisibleLayout(): ComponentNode {
+    return this.visibleChild.getVisibleLayout();
+  }
+
+  _updateVisibility(options: 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) as ParentNode;
+  _getLeftChild = () => this.children.find(isLeftChild) as ParentNode;
+  _getRightChild = () => this.children.find(isRightChild) as ParentNode;
+}
+
+export class SideMenuNode extends ParentNode {
+  constructor(layout: any, type: NodeType, parentNode?: ParentNode) {
+    super(layout, type, parentNode);
+  }
+
+  getVisibleLayout() {
+    return this.children[0].getVisibleLayout();
+  }
+}
+
+export class SideMenuLeftNode extends SideMenuNode {
+  constructor(layout: any, parentNode?: ParentNode) {
+    super(layout, 'SideMenuLeft', parentNode);
+  }
+}
+export class SideMenuRightNode extends SideMenuNode {
+  constructor(layout: any, parentNode?: ParentNode) {
+    super(layout, 'SideMenuRight', parentNode);
+  }
+}
+
+export class SideMenuCenterNode extends SideMenuNode {
+  constructor(layout: any, parentNode?: ParentNode) {
+    super(layout, 'SideMenuCenter', parentNode);
+  }
+}

package/lib/Mock/Stores/LayoutStore.ts

@@ -2,8 +2,9 @@ import _ from 'lodash';
 import BottomTabsNode from '../Layouts/BottomTabsNode';
 import ParentNode from '../Layouts/ParentNode';
 import LayoutNodeFactory from '../Layouts/LayoutNodeFactory';
-import { Options } from '../../src/interfaces/Options';
+import { SideMenuNode } from '../Layouts/SideMenu';
 import StackNode from '../Layouts/StackNode';
+import { Options } from '../../src/interfaces/Options';
 
 const remx = require('remx');
 
@@ -11,6 +12,7 @@ const state = remx.state({
   root: {},
   modals: [],
   overlays: [],
+  sideMenu: undefined,
 });
 
 const setters = remx.setters({
@@ -75,6 +77,23 @@ const setters = remx.setters({
   selectTabIndex(layout: BottomTabsNode, index: number) {
     getters.getLayoutById(layout.nodeId).selectedIndex = index;
   },
+  openSideMenu(layout: SideMenuNode) {
+    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: SideMenuNode) {
+    state.sideMenu = undefined;
+  },
+  applyOptions(componentId: string, options: 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: string, options: Options) {
     const layout = getters.getLayoutById(componentId);
     if (layout) layout.mergeOptions(options);
@@ -87,12 +106,26 @@ const getters = remx.getters({
     return state.root;
   },
   getVisibleLayout() {
+    let layout: ParentNode | undefined;
     if (state.modals.length > 0) {
-      return _.last<ParentNode>(state.modals)!.getVisibleLayout();
-    } else if (!_.isEqual(state.root, {})) return state.root.getVisibleLayout();
+      layout = _.last<ParentNode>(state.modals)!;
+    } else if (!_.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;
+    }
+
+    return layout?.getVisibleLayout();
   },
   isVisibleLayout(layout: ParentNode) {
-    return getters.getVisibleLayout() && getters.getVisibleLayout().nodeId === layout.nodeId;
+    const nodeId = layout.nodeId;
+    const visibleLayout = getters.getVisibleLayout();
+    return visibleLayout?.nodeId === nodeId;
   },
   getModals() {
     return state.modals;
@@ -101,13 +134,12 @@ const getters = remx.getters({
     return state.overlays;
   },
   getLayoutById(layoutId: string) {
-    if (getters.getModalById(layoutId))
-      return findParentNode(layoutId, getters.getModalById(layoutId));
+    if (getters.getModalById(layoutId)) return findNode(layoutId, getters.getModalById(layoutId));
 
-    return findParentNode(layoutId, state.root);
+    return findNode(layoutId, state.root);
   },
   getModalById(layoutId: string) {
-    return _.find(state.modals, (layout) => findParentNode(layoutId, layout));
+    return _.find(state.modals, (layout) => findNode(layoutId, layout));
   },
   getLayoutChildren(layoutId: string) {
     return getters.getLayoutById(layoutId).children;
@@ -120,13 +152,13 @@ const getters = remx.getters({
   },
 });
 
-function findParentNode(layoutId: string, layout: ParentNode): any | ParentNode {
+function findNode(layoutId: string, layout: ParentNode): any | ParentNode {
   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/Mock/actions/layoutActions.ts

@@ -1,4 +1,5 @@
 import ParentNode from '../Layouts/ParentNode';
+import { SideMenuNode } from '../Layouts/SideMenu';
 import { LayoutStore } from '../Stores/LayoutStore';
 
 export const switchTabByIndex = (bottomTabs: ParentNode | undefined, index: number) => {
@@ -8,3 +9,13 @@ export const switchTabByIndex = (bottomTabs: ParentNode | undefined, index: numb
     LayoutStore.getVisibleLayout().componentDidAppear();
   }
 };
+
+export const openSideMenu = (sideMenu: SideMenuNode) => {
+  LayoutStore.openSideMenu(sideMenu);
+  LayoutStore.getVisibleLayout().componentDidAppear();
+};
+
+export const closeSideMenu = (layout: SideMenuNode) => {
+  LayoutStore.getVisibleLayout().componentDidDisappear();
+  LayoutStore.closeSideMenu(layout);
+};

package/lib/Mock/mocks/NativeCommandsSender.tsx

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

package/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/bottomtabs/BottomTabsController.java

@@ -1,5 +1,9 @@
 package com.reactnativenavigation.viewcontrollers.bottomtabs;
 
+import static com.reactnativenavigation.utils.CollectionUtils.forEach;
+import static com.reactnativenavigation.utils.CollectionUtils.map;
+import static com.reactnativenavigation.utils.ObjectUtils.perform;
+
 import android.animation.Animator;
 import android.app.Activity;
 import android.content.res.Configuration;
@@ -9,6 +13,8 @@ import android.view.ViewGroup;
 import androidx.annotation.NonNull;
 import androidx.annotation.RestrictTo;
 import androidx.coordinatorlayout.widget.CoordinatorLayout;
+import androidx.core.graphics.Insets;
+import androidx.core.view.WindowInsetsCompat;
 
 import com.aurelhubert.ahbottomnavigation.AHBottomNavigation;
 import com.aurelhubert.ahbottomnavigation.AHBottomNavigationItem;
@@ -34,10 +40,6 @@ import java.util.Deque;
 import java.util.LinkedList;
 import java.util.List;
 
-import static com.reactnativenavigation.utils.CollectionUtils.forEach;
-import static com.reactnativenavigation.utils.CollectionUtils.map;
-import static com.reactnativenavigation.utils.ObjectUtils.perform;
-
 public class BottomTabsController extends ParentController<BottomTabsLayout> implements AHBottomNavigation.OnTabSelectedListener, TabSelector {
 
     private BottomTabsContainer bottomTabsContainer;
@@ -84,6 +86,7 @@ public class BottomTabsController extends ParentController<BottomTabsLayout> imp
     @Override
     public BottomTabsLayout createView() {
         BottomTabsLayout root = new BottomTabsLayout(getActivity());
+
         this.bottomTabsContainer = createBottomTabsContainer();
         this.bottomTabs = bottomTabsContainer.getBottomTabs();
         Options resolveCurrentOptions = resolveCurrentOptions();
@@ -95,6 +98,7 @@ public class BottomTabsController extends ParentController<BottomTabsLayout> imp
         bottomTabs.addItems(createTabs());
         setInitialTab(resolveCurrentOptions);
         tabsAttacher.attach();
+
         return root;
     }
 
@@ -299,6 +303,14 @@ public class BottomTabsController extends ParentController<BottomTabsLayout> imp
         return presenter.getPopAnimation(appearingOptions, disappearingOptions);
     }
 
+    @Override
+    protected WindowInsetsCompat onApplyWindowInsets(View view, WindowInsetsCompat insets) {
+        Insets sysInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars());
+        view.setPaddingRelative(0, 0, 0, sysInsets.bottom);
+        return WindowInsetsCompat.CONSUMED;
+    }
+
+
     @RestrictTo(RestrictTo.Scope.TESTS)
     public BottomTabs getBottomTabs() {
         return bottomTabs;

package/lib/dist/Mock/Components/ComponentScreen.js

@@ -23,7 +23,8 @@ exports.ComponentScreen = (0, connect_1.connect)(class extends react_1.Component
         this.props.layoutNode.componentDidMount();
     }
     isVisible() {
-        return LayoutStore_1.LayoutStore.isVisibleLayout(this.props.layoutNode);
+        const isVisible = LayoutStore_1.LayoutStore.isVisibleLayout(this.props.layoutNode);
+        return isVisible;
     }
     renderTabBar() {
         const bottomTabs = this.props.layoutNode.getBottomTabs();

package/lib/dist/Mock/Components/LayoutComponent.js

@@ -7,6 +7,7 @@ const react_native_1 = require("react-native");
 const BottomTabs_1 = require("./BottomTabs");
 const ComponentScreen_1 = require("./ComponentScreen");
 const Stack_1 = require("./Stack");
+const SideMenu_1 = require("./SideMenu");
 const LayoutComponent = class extends react_1.Component {
     render() {
         switch (this.props.layoutNode.type) {
@@ -16,6 +17,14 @@ const LayoutComponent = class extends react_1.Component {
                 return react_1.default.createElement(Stack_1.Stack, { layoutNode: this.props.layoutNode });
             case 'Component':
                 return react_1.default.createElement(ComponentScreen_1.ComponentScreen, { layoutNode: this.props.layoutNode });
+            case 'SideMenuRoot':
+                return react_1.default.createElement(SideMenu_1.SideMenuRoot, { layoutNode: this.props.layoutNode });
+            case 'SideMenuLeft':
+                return react_1.default.createElement(SideMenu_1.SideMenuLeft, { layoutNode: this.props.layoutNode });
+            case 'SideMenuCenter':
+                return react_1.default.createElement(SideMenu_1.SideMenuCenter, { layoutNode: this.props.layoutNode });
+            case 'SideMenuRight':
+                return react_1.default.createElement(SideMenu_1.SideMenuRight, { layoutNode: this.props.layoutNode });
         }
         return react_1.default.createElement(react_native_1.View, null);
     }

package/lib/dist/Mock/Components/SideMenu.d.ts

@@ -0,0 +1,58 @@
+import React, { Component } from 'react';
+import { ComponentProps } from '../ComponentProps';
+export declare const SideMenuRoot: {
+    new (props: ComponentProps): {
+        render(): React.JSX.Element[];
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<ComponentProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<ComponentProps>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<ComponentProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<ComponentProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<ComponentProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<ComponentProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: ComponentProps, context: any): {
+        render(): React.JSX.Element[];
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<ComponentProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<ComponentProps>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<ComponentProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<ComponentProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<ComponentProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<ComponentProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<ComponentProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+declare class SideMenuComponent extends Component<ComponentProps> {
+    render(): React.JSX.Element;
+}
+export declare const SideMenuLeft: typeof SideMenuComponent;
+export declare const SideMenuCenter: typeof SideMenuComponent;
+export declare const SideMenuRight: typeof SideMenuComponent;
+export {};

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideMenuRight = exports.SideMenuCenter = exports.SideMenuLeft = exports.SideMenuRoot = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const connect_1 = require("../connect");
+const LayoutComponent_1 = require("./LayoutComponent");
+exports.SideMenuRoot = (0, connect_1.connect)(class extends react_1.Component {
+    render() {
+        const children = this.props.layoutNode.children;
+        return children.map((child) => {
+            return react_1.default.createElement(LayoutComponent_1.LayoutComponent, { key: child.nodeId, layoutNode: child });
+        });
+    }
+});
+class SideMenuComponent extends react_1.Component {
+    render() {
+        const children = this.props.layoutNode.children;
+        const component = children[0];
+        return react_1.default.createElement(LayoutComponent_1.LayoutComponent, { key: component.nodeId, layoutNode: component });
+    }
+}
+exports.SideMenuLeft = (0, connect_1.connect)(SideMenuComponent);
+exports.SideMenuCenter = (0, connect_1.connect)(SideMenuComponent);
+exports.SideMenuRight = (0, connect_1.connect)(SideMenuComponent);

package/lib/dist/Mock/Layouts/BottomTabsNode.d.ts

@@ -3,6 +3,6 @@ import ParentNode from './ParentNode';
 export default class BottomTabsNode extends ParentNode {
     selectedIndex: number;
     constructor(layout: any, parentNode?: ParentNode);
-    mergeOptions(options: Options): void;
+    mergeOptions(_options: Options): void;
     getVisibleLayout(): import("./ComponentNode").default;
 }

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

@@ -10,8 +10,9 @@ class BottomTabsNode extends ParentNode_1.default {
         super(layout, 'BottomTabs', parentNode);
         this.selectedIndex = layout.data?.options?.bottomTabs?.currentTabIndex || 0;
     }
-    mergeOptions(options) {
-        super.mergeOptions(options);
+    mergeOptions(_options) {
+        super.mergeOptions(_options);
+        const { options } = this.data;
         if (options.bottomTabs?.currentTabIndex) {
             this.selectedIndex = options.bottomTabs?.currentTabIndex;
             (0, layoutActions_1.switchTabByIndex)(this, this.selectedIndex);

package/lib/dist/Mock/Layouts/LayoutNodeFactory.d.ts

@@ -2,6 +2,7 @@ import BottomTabs from './BottomTabsNode';
 import ComponentNode from './ComponentNode';
 import Stack from './StackNode';
 import ParentNode from './ParentNode';
+import SideMenuRootNode, { SideMenuLeftNode, SideMenuRightNode, SideMenuCenterNode } from './SideMenu';
 export default class LayoutNodeFactory {
-    static create(layout: any, parentNode?: ParentNode): Stack | BottomTabs | ComponentNode;
+    static create(layout: any, parentNode?: ParentNode): ComponentNode | SideMenuRootNode | SideMenuLeftNode | SideMenuRightNode | SideMenuCenterNode | Stack | BottomTabs;
 }

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

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 const BottomTabsNode_1 = tslib_1.__importDefault(require("./BottomTabsNode"));
 const ComponentNode_1 = tslib_1.__importDefault(require("./ComponentNode"));
 const StackNode_1 = tslib_1.__importDefault(require("./StackNode"));
+const SideMenu_1 = tslib_1.__importStar(require("./SideMenu"));
 class LayoutNodeFactory {
     static create(layout, parentNode) {
         switch (layout.type) {
@@ -11,7 +12,15 @@ class LayoutNodeFactory {
                 return new ComponentNode_1.default(layout, parentNode);
             case 'Stack':
                 return new StackNode_1.default(layout, parentNode);
-            default:
+            case 'SideMenuRoot':
+                return new SideMenu_1.default(layout, parentNode);
+            case 'SideMenuLeft':
+                return new SideMenu_1.SideMenuLeftNode(layout, parentNode);
+            case 'SideMenuCenter':
+                return new SideMenu_1.SideMenuCenterNode(layout, parentNode);
+            case 'SideMenuRight':
+                return new SideMenu_1.SideMenuRightNode(layout, parentNode);
+            default: // TODO Undo
             case 'BottomTabs':
                 return new BottomTabsNode_1.default(layout, parentNode);
         }

package/lib/dist/Mock/Layouts/ParentNode.d.ts

@@ -10,6 +10,7 @@ export default class ParentNode extends Node {
     componentDidDisappear(): void;
     getVisibleLayout(): ComponentNode;
     getTopParent(): Node;
+    applyOptions(_options: Options): void;
     mergeOptions(options: Options): void;
     buttonsChanged(_oldButtons: OptionsTopBarButton[], _newButtons: OptionsTopBarButton[]): void;
     titleChanged(_oldComponent: any, _newComponent: any): void;

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

@@ -26,6 +26,9 @@ class ParentNode extends Node_1.default {
             return this.parentNode.getTopParent();
         return this;
     }
+    applyOptions(_options) {
+        this.parentNode?.applyOptions(_options);
+    }
     mergeOptions(options) {
         this.data.options = lodash_1.default.mergeWith(this.data.options, options, (objValue, srcValue, key) => {
             if (lodash_1.default.isArray(objValue)) {

package/lib/dist/Mock/Layouts/SideMenu.d.ts

@@ -0,0 +1,31 @@
+import ParentNode from './ParentNode';
+import ComponentNode from './ComponentNode';
+import { Options } from '../../src/index';
+import { NodeType } from './Node';
+export default class SideMenuRootNode extends ParentNode {
+    visibleChild: ParentNode;
+    constructor(layout: any, parentNode?: ParentNode);
+    applyOptions(_options: Options): void;
+    mergeOptions(options: Options): void;
+    /**
+     * @override
+     */
+    getVisibleLayout(): ComponentNode;
+    _updateVisibility(options: Options): void;
+    _getCenterChild: () => ParentNode;
+    _getLeftChild: () => ParentNode;
+    _getRightChild: () => ParentNode;
+}
+export declare class SideMenuNode extends ParentNode {
+    constructor(layout: any, type: NodeType, parentNode?: ParentNode);
+    getVisibleLayout(): ComponentNode;
+}
+export declare class SideMenuLeftNode extends SideMenuNode {
+    constructor(layout: any, parentNode?: ParentNode);
+}
+export declare class SideMenuRightNode extends SideMenuNode {
+    constructor(layout: any, parentNode?: ParentNode);
+}
+export declare class SideMenuCenterNode extends SideMenuNode {
+    constructor(layout: any, parentNode?: ParentNode);
+}

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/ios/AnimatedTextView.mm

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

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

package/lib/ios/TopBarTitlePresenter.mm

@@ -89,6 +89,8 @@
 
         viewController.navigationItem.titleView = nil;
         viewController.navigationItem.titleView = _customTitleView;
+        [_customTitleView componentWillAppear];
+        [_customTitleView componentDidAppear];
     } else {
         [_customTitleView removeFromSuperview];
         if (readyBlock) {

package/lib/ios/TurboModules/RNNTurboEventEmitter.mm

@@ -18,5 +18,12 @@ RCT_EXPORT_MODULE()
 	_host = host;
 }
 
+- (void)send:(NSString *)eventName body:(id)body {
+    if (_host == nil) {
+        return;
+    }
+    [self sendEventWithName:eventName body:body];
+}
+
 @end
 #endif

package/lib/ios/UINavigationController+RNNCommands.mm

@@ -21,6 +21,7 @@ typedef void (^RNNAnimationBlock)(void);
 
     [self
         performBlock:^{
+        NSLog(@"About to push a controller %@", newTop);
           [self pushViewController:newTop animated:animated];
         }
             animated:animated
@@ -38,9 +39,12 @@ typedef void (^RNNAnimationBlock)(void);
         }
         animated:animated
         completion:^{
+        NSLog(@"Pop popAnimated completed");
           if (poppedVC) {
+              NSLog(@"Pop popAnimated completion invokation");
               completion();
           } else {
+              NSLog(@"Pop rejection");
               [RNNErrorHandler reject:rejection
                         withErrorCode:1012
                      errorDescription:@"popping component failed"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-navigation",
-  "version": "8.1.0-alpha-snapshot.1648",
+  "version": "8.1.0-rc01",
   "description": "React Native Navigation - truly native navigation for iOS and Android",
   "license": "MIT",
   "nativePackage": true,