[Mock] Fix bottomTabs lifecycle events

e2e/BottomTabs.test.js

@@ -122,20 +122,36 @@ describe('BottomTabs', () => {
     await elementById(TestIDs.SECOND_TAB_BAR_BTN).tap();
     await elementById(TestIDs.FIRST_TAB_BAR_BUTTON).tap();
 
-     Android.pressBack();
+    Android.pressBack();
     await expect(elementByLabel('Second Tab')).toBeVisible();
 
-     Android.pressBack();
+    Android.pressBack();
     await expect(elementByLabel('First Tab')).toBeVisible();
 
-     Android.pressBack();
+    Android.pressBack();
     await expect(elementByLabel('Second Tab')).toBeVisible();
 
-     Android.pressBack();
+    Android.pressBack();
     await expect(elementByLabel('First Tab')).toBeVisible();
 
-     Android.pressBack();
+    Android.pressBack();
     await expect(elementByLabel('First Tab')).toBeNotVisible();
     await expect(elementByLabel('Second Tab')).toBeNotVisible();
   });
+
+  it('Switch tab should send lifecycle events', async () => {
+    await elementById(TestIDs.SECOND_TAB_BAR_BTN).tap();
+    await elementById(TestIDs.STATIC_EVENTS_OVERLAY_BTN).tap();
+    await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap();
+    await elementById(TestIDs.FIRST_TAB_BAR_BUTTON).tap();
+    await expect(
+      elementByLabel('componentWillAppear | FirstBottomTabsScreen | Component')
+    ).toBeVisible();
+    await expect(
+      elementByLabel('componentDidDisappear | SecondBottomTabsScreen | Component')
+    ).toBeVisible();
+    await expect(
+      elementByLabel('componentDidAppear | FirstBottomTabsScreen | Component')
+    ).toBeVisible();
+  });
 });

e2e/StaticLifecycleEvents.test.js

@@ -89,7 +89,6 @@ describe('static lifecycle events', () => {
     await elementById(TestIDs.SET_ROOT_BTN).tap();
     await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap();
     await elementById(TestIDs.SET_ROOT_BTN).tap();
-
     await expect(elementByLabel('setRoot complete - previous root is unmounted')).toBeVisible();
   });
 

lib/Mock/Components/ComponentScreen.tsx

@@ -8,6 +8,7 @@ import { connect } from '../connect';
 import { TopBar } from './TopBar';
 import { events } from '../Stores/EventsStore';
 import _ from 'lodash';
+import { switchTabByIndex } from '../actions/layoutActions';
 
 export const ComponentScreen = connect(
   class extends Component<ComponentProps> {
@@ -41,7 +42,7 @@ export const ComponentScreen = connect(
                   tabIndex: i,
                 });
                 if (_.defaultTo(bottomTabOptions?.selectTabOnPress, true))
-                  LayoutStore.selectTabIndex(this.props.layoutNode.getBottomTabs(), i);
+                  switchTabByIndex(this.props.layoutNode.getBottomTabs(), i);
               }}
             />
             <Text>{bottomTabOptions?.badge}</Text>

lib/Mock/Layouts/BottomTabsNode.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { Options } from '../../src/index';
-import { LayoutStore } from '../Stores/LayoutStore';
+import { switchTabByIndex } from '../actions/layoutActions';
 import ParentNode from './ParentNode';
 
 export default class BottomTabsNode extends ParentNode {
@@ -13,15 +13,15 @@ export default class BottomTabsNode extends ParentNode {
     super.mergeOptions(options);
     if (options.bottomTabs?.currentTabIndex) {
       this.selectedIndex = options.bottomTabs?.currentTabIndex;
-      LayoutStore.selectTabIndex(this, this.selectedIndex);
+      switchTabByIndex(this, this.selectedIndex);
     }
     if (options.bottomTabs?.currentTabId) {
       const index = _.findIndex(
         this.children,
         (child) => child.nodeId === options?.bottomTabs?.currentTabId
       );
       if (index !== -1) this.selectedIndex = index;
-      LayoutStore.selectTabIndex(this, this.selectedIndex);
+      switchTabByIndex(this, this.selectedIndex);
     }
   }
 

lib/Mock/actions/layoutActions.ts

@@ -0,0 +1,10 @@
+import ParentNode from '../Layouts/ParentNode';
+import { LayoutStore } from '../Stores/LayoutStore';
+
+export const switchTabByIndex = (bottomTabs: ParentNode | undefined, index: number) => {
+  if (bottomTabs) {
+    LayoutStore.getVisibleLayout().componentDidDisappear();
+    LayoutStore.selectTabIndex(bottomTabs, index);
+    LayoutStore.getVisibleLayout().componentDidAppear();
+  }
+};

playground/src/screens/SecondBottomTabScreen.tsx

@@ -17,6 +17,7 @@ const {
   HIDE_TABS_PUSH_BTN,
   SECOND_TAB_BAR_BTN,
   SET_BADGE_BTN,
+  STATIC_EVENTS_OVERLAY_BTN,
 } = testIDs;
 
 export default class SecondBottomTabScreen extends React.Component<NavigationComponentProps> {
@@ -58,6 +59,11 @@ export default class SecondBottomTabScreen extends React.Component<NavigationCom
           testID={HIDE_TABS_PUSH_BTN}
           onPress={this.hideTabsOnPush}
         />
+        <Button
+          label="Show Overlay"
+          testID={STATIC_EVENTS_OVERLAY_BTN}
+          onPress={this.showEventsOverlay}
+        />
       </Root>
     );
   }
@@ -138,4 +144,17 @@ export default class SecondBottomTabScreen extends React.Component<NavigationCom
       },
     });
   };
+
+  showEventsOverlay = () =>
+    Navigation.showOverlay(
+      Screens.EventsOverlay,
+      {
+        overlay: {
+          interceptTouchOutside: false,
+        },
+      },
+      {
+        showOnTop: true,
+      }
+    );
 }

playground/src/screens/StaticLifecycleOverlay.tsx

@@ -39,10 +39,12 @@ type State = {
   text: string;
   events: Event[];
 };
-export default class StaticLifecycleOverlay extends React.Component<
-  NavigationComponentProps,
-  State
-> {
+
+interface OverlayProps extends NavigationComponentProps {
+  showOnTop: boolean;
+}
+
+export default class StaticLifecycleOverlay extends React.Component<OverlayProps, State> {
   static options(): Options {
     return {
       layout: {
@@ -66,7 +68,7 @@ export default class StaticLifecycleOverlay extends React.Component<
     alert('Overlay Unmounted');
   }
 
-  constructor(props: NavigationComponentProps) {
+  constructor(props: OverlayProps) {
     super(props);
     this.state = {
       text: 'nothing yet',
@@ -146,7 +148,7 @@ export default class StaticLifecycleOverlay extends React.Component<
       <View key={`${event.componentId}${idx}`}>{this.renderEvent(event)}</View>
     ));
     return (
-      <View style={styles.root}>
+      <View style={[styles.root, this.props.showOnTop && { top: 50, bottom: undefined }]}>
         <Text style={styles.h1}>{`Static Lifecycle Events Overlay`}</Text>
         <View style={styles.events}>{events}</View>
         {this.renderDismissButton()}