mocking pop event handler

Author: tommy2804

lib/Mock/Components/ComponentScreen.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import { View, Text, TouchableOpacity, Image, ImageURISource} from 'react-native';
-import { Navigation, ImageResource} from 'react-native-navigation';
+import { View, Text, TouchableOpacity, Image, ImageURISource } from 'react-native';
+import { Navigation, ImageResource } from 'react-native-navigation';
 import { ComponentProps } from '../ComponentProps';
 import { VISIBLE_SCREEN_TEST_ID } from '../constants';
 import { LayoutStore } from '../Stores/LayoutStore';
@@ -10,8 +10,7 @@ import { events } from '../Stores/EventsStore';
 import _ from 'lodash';
 import { switchTabByIndex } from '../actions/layoutActions';
 
-
-function isURISource(src: ImageResource| undefined): src is ImageURISource {
+function isURISource(src: ImageResource | undefined): src is ImageURISource {
   return !!src && typeof src === 'object' && 'uri' in src;
 }
 
@@ -36,12 +35,15 @@ export const ComponentScreen = connect(
       if (bottomTabsOptions?.visible === false) return null;
       const buttons = bottomTabs!.children!.map((child, i) => {
         const bottomTabOptions = child.resolveOptions().bottomTab;
-        const icon = (bottomTabs as any).selectedIndex === i ? bottomTabOptions?.selectedIcon : bottomTabOptions?.icon;
+        const icon =
+          (bottomTabs as any).selectedIndex === i
+            ? bottomTabOptions?.selectedIcon
+            : bottomTabOptions?.icon;
         const iconURI = isURISource(icon) ? icon.uri : undefined;
         return (
           <View key={`tab-${i}`}>
             <TouchableOpacity
-              style={{padding:10}}
+              style={{ padding: 10 }}
               testID={bottomTabOptions?.testID}
               onPress={() => {
                 events.invokeBottomTabPressed({
@@ -51,22 +53,34 @@ export const ComponentScreen = connect(
                   switchTabByIndex(this.props.layoutNode.getBottomTabs(), i);
               }}
             >
-            <View style={{justifyContent: 'center', alignItems: 'center'}}>
-              <Text>{bottomTabOptions?.badge}</Text>
-              {iconURI && <Image style={{width: 18, height: 18, marginBottom: 5}} source={{uri: iconURI}}/>}
-              <Text style={{fontSize: 12}}>{bottomTabOptions?.text || ''}</Text>
-            </View>
+              <View style={{ justifyContent: 'center', alignItems: 'center' }}>
+                <Text>{bottomTabOptions?.badge}</Text>
+                {iconURI && (
+                  <Image
+                    style={{ width: 18, height: 18, marginBottom: 5 }}
+                    source={{ uri: iconURI }}
+                  />
+                )}
+                <Text style={{ fontSize: 12 }}>{bottomTabOptions?.text || ''}</Text>
+              </View>
             </TouchableOpacity>
           </View>
         );
       });
 
       return (
-      <View 
-        testID={bottomTabsOptions?.testID} 
-        style={{flexDirection: 'row',justifyContent: 'center', width: '100%', backgroundColor: '#F0F2F5'}}>
+        <View
+          testID={bottomTabsOptions?.testID}
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'center',
+            width: '100%',
+            backgroundColor: '#F0F2F5',
+          }}
+        >
           {buttons}
-      </View>);
+        </View>
+      );
     }
 
     render() {

lib/Mock/Stores/EventsStore.ts

@@ -2,6 +2,7 @@ import {
   ComponentDidDisappearEvent,
   ComponentWillAppearEvent,
   ModalDismissedEvent,
+  ScreenPoppedEvent,
 } from '../../src/interfaces/ComponentEvents';
 import { ComponentDidAppearEvent, NavigationButtonPressedEvent } from '../../src/index';
 import { BottomTabPressedEvent, CommandCompletedEvent } from '../../src/interfaces/Events';
@@ -14,6 +15,7 @@ export const events = {
   modalDismissed: [(_event: ModalDismissedEvent) => {}],
   bottomTabPressed: [(_event: BottomTabPressedEvent) => {}],
   commandCompleted: [(_event: CommandCompletedEvent) => {}],
+  screenPopped: [(_event: ScreenPoppedEvent) => {}],
   invokeComponentWillAppear: (event: ComponentWillAppearEvent) => {
     events.componentWillAppear &&
       events.componentWillAppear.forEach((listener) => {
@@ -56,4 +58,10 @@ export const events = {
         listener(event);
       });
   },
+  invokeScreenPopped: (event: ScreenPoppedEvent) => {
+    events.screenPopped &&
+      events.screenPopped.forEach((listener) => {
+        listener(event);
+      });
+  },
 };

lib/Mock/mocks/NativeCommandsSender.tsx

@@ -55,6 +55,9 @@ export class NativeCommandsSender {
         LayoutStore.getLayoutById(componentId).getStack().children
       ) as ComponentNode;
       LayoutStore.pop(componentId);
+      events.invokeScreenPopped({
+        componentId,
+      });
       resolve(poppedChild.nodeId);
       this.reportCommandCompletion(CommandName.Pop, commandId);
     });

lib/Mock/mocks/NativeEventsReceiver.ts

@@ -152,8 +152,9 @@ export class NativeEventsReceiver {
   }
 
   public registerScreenPoppedListener(
-    _callback: (event: ScreenPoppedEvent) => void
+    callback: (event: ScreenPoppedEvent) => void
   ): EmitterSubscription {
+    events.screenPopped.push(callback);
     return {
       remove: () => {},
     } as EmitterSubscription;