Global screen visibility listener (#1575)

* Add screen visibility listener which can be registered globally

API
new ScreenVisibilityListener({
    willAppear: ({screen, timestamp}) => console.log(`Displaying screen ${screen}`),
    didAppear: ({screen, timestamp}) => console.log(`Screen ${screen} displayed in ${Date.now() - timestamp} millis`)
  }).register();

todo
* Add timestamp to modal, resetTo
* implement unregister
* implement iOS

* Add global screen visibility listener to example app

* Think I better assign a value to emitter

* Send timestamp in resetTo

* Moved listener to library, it can be deleted from the app

* Add push and resetTo buttons to pushed screens

* Send appear/disappear events after animation ends

* Pass pop timestamp from js

* Send timestamp in popToRoot

* Add popToRoot button in push screen

* Add few navigation buttons to modal screen

* Pass timestamp to tabs

relevant only to first/initial tab

* Update timestamp when navigating between BottomTabs

* Send screen visible events after modal dismiss

* log willDisappear and didDisappear

* Report both start and end timestamps

* Implement unregister

* Send NavigationType parameter in visibilityEvent

This indicates the type of the navigation command that triggered the visibility change

* Rename pushInitialScreen to more explicit name

* Fix duplicate initialScreen visibility events

* Update screen visibility log statement

* Show popToRoot in modal screen only if screens were pushed

* implement global screen event for iOS

* fix lint issues

android/app/src/main/java/com/reactnativenavigation/bridge/EventEmitter.java

@@ -3,7 +3,9 @@ package com.reactnativenavigation.bridge;
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.WritableMap;
 import com.reactnativenavigation.NavigationApplication;
+import com.reactnativenavigation.params.BaseScreenParams;
 import com.reactnativenavigation.react.ReactGateway;
+import com.reactnativenavigation.screens.NavigationType;
 
 public class EventEmitter {
     private ReactGateway reactGateway;
@@ -12,12 +14,41 @@ public class EventEmitter {
         this.reactGateway = reactGateway;
     }
 
-    public void sendScreenChangedEvent(String eventId, String navigatorEventId) {
+    public void sendWillAppearEvent(BaseScreenParams params, NavigationType type) {
+        sendScreenChangedEventToJsScreen("willAppear", params.getNavigatorEventId());
+        sendGlobalScreenChangedEvent("willAppear", params.timestamp, params.screenId, type);
+    }
+
+    public void sendDidAppearEvent(BaseScreenParams params, NavigationType type) {
+        sendScreenChangedEventToJsScreen("didAppear", params.getNavigatorEventId());
+        sendGlobalScreenChangedEvent("didAppear", params.timestamp, params.screenId, type);
+    }
+
+    public void sendWillDisappearEvent(BaseScreenParams params, NavigationType type) {
+        sendScreenChangedEventToJsScreen("willDisappear", params.getNavigatorEventId());
+        sendGlobalScreenChangedEvent("willDisappear", params.timestamp, params.screenId, type);
+    }
+
+    public void sendDidDisappearEvent(BaseScreenParams params, NavigationType type) {
+        sendScreenChangedEventToJsScreen("didDisappear", params.getNavigatorEventId());
+        sendGlobalScreenChangedEvent("didDisappear", params.timestamp, params.screenId, type);
+    }
+
+    private void sendScreenChangedEventToJsScreen(String eventId, String navigatorEventId) {
         WritableMap map = Arguments.createMap();
         map.putString("type", "ScreenChangedEvent");
         sendNavigatorEvent(eventId, navigatorEventId, map);
     }
 
+    private void sendGlobalScreenChangedEvent(String eventId, double timestamp, String screenId, NavigationType type) {
+        WritableMap map = Arguments.createMap();
+        map.putDouble("startTime", timestamp);
+        map.putDouble("endTime", System.currentTimeMillis());
+        map.putString("screen", screenId);
+        map.putString("commandType", String.valueOf(type));
+        sendNavigatorEvent(eventId, map);
+    }
+
     public void sendNavigatorEvent(String eventId, String navigatorEventId) {
         if (!NavigationApplication.instance.isReactContextInitialized()) {
             return;

android/app/src/main/java/com/reactnativenavigation/controllers/Modal.java

@@ -21,6 +21,7 @@ import com.reactnativenavigation.params.ScreenParams;
 import com.reactnativenavigation.params.SlidingOverlayParams;
 import com.reactnativenavigation.params.TitleBarButtonParams;
 import com.reactnativenavigation.params.TitleBarLeftButtonParams;
+import com.reactnativenavigation.screens.NavigationType;
 
 import java.util.List;
 
@@ -177,8 +178,8 @@ public class Modal extends Dialog implements DialogInterface.OnDismissListener,
     @Override
     public void dismiss() {
         if (!isDestroyed) {
-            NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("willDisappear", layout.getCurrentScreen().getNavigatorEventId());
-            NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("didDisappear", layout.getCurrentScreen().getNavigatorEventId());
+            NavigationApplication.instance.getEventEmitter().sendWillDisappearEvent(layout.getCurrentScreen().getScreenParams(), NavigationType.DismissModal);
+            NavigationApplication.instance.getEventEmitter().sendDidDisappearEvent(layout.getCurrentScreen().getScreenParams(), NavigationType.DismissModal);
         }
         super.dismiss();
     }

android/app/src/main/java/com/reactnativenavigation/controllers/NavigationActivity.java

@@ -35,6 +35,7 @@ import com.reactnativenavigation.params.SnackbarParams;
 import com.reactnativenavigation.params.TitleBarButtonParams;
 import com.reactnativenavigation.params.TitleBarLeftButtonParams;
 import com.reactnativenavigation.react.ReactGateway;
+import com.reactnativenavigation.screens.NavigationType;
 import com.reactnativenavigation.screens.Screen;
 import com.reactnativenavigation.utils.OrientationHelper;
 import com.reactnativenavigation.views.SideMenu.Side;
@@ -237,23 +238,23 @@ public class NavigationActivity extends AppCompatActivity implements DefaultHard
 
     void showModal(ScreenParams screenParams) {
         Screen previousScreen = layout.getCurrentScreen();
-        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("willDisappear", previousScreen.getNavigatorEventId());
-        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("didDisappear", previousScreen.getNavigatorEventId());
+        NavigationApplication.instance.getEventEmitter().sendWillDisappearEvent(previousScreen.getScreenParams(), NavigationType.ShowModal);
+        NavigationApplication.instance.getEventEmitter().sendDidDisappearEvent(previousScreen.getScreenParams(), NavigationType.ShowModal);
         modalController.showModal(screenParams);
     }
 
     void dismissTopModal() {
         modalController.dismissTopModal();
         Screen previousScreen = layout.getCurrentScreen();
-        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("willAppear", previousScreen.getNavigatorEventId());
-        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("didAppear", previousScreen.getNavigatorEventId());
+        NavigationApplication.instance.getEventEmitter().sendWillAppearEvent(previousScreen.getScreenParams(), NavigationType.DismissModal);
+        NavigationApplication.instance.getEventEmitter().sendDidAppearEvent(previousScreen.getScreenParams(), NavigationType.DismissModal);
     }
 
     void dismissAllModals() {
         modalController.dismissAllModals();
         Screen previousScreen = layout.getCurrentScreen();
-        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("willAppear", previousScreen.getNavigatorEventId());
-        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("didAppear", previousScreen.getNavigatorEventId());
+        NavigationApplication.instance.getEventEmitter().sendWillAppearEvent(previousScreen.getScreenParams(), NavigationType.DismissModal);
+        NavigationApplication.instance.getEventEmitter().sendDidAppearEvent(previousScreen.getScreenParams(), NavigationType.DismissModal);
     }
 
     public void showLightBox(LightBoxParams params) {

android/app/src/main/java/com/reactnativenavigation/layouts/BottomTabsLayout.java

@@ -27,6 +27,7 @@ import com.reactnativenavigation.params.SnackbarParams;
 import com.reactnativenavigation.params.StyleParams;
 import com.reactnativenavigation.params.TitleBarButtonParams;
 import com.reactnativenavigation.params.TitleBarLeftButtonParams;
+import com.reactnativenavigation.screens.NavigationType;
 import com.reactnativenavigation.screens.Screen;
 import com.reactnativenavigation.screens.ScreenStack;
 import com.reactnativenavigation.utils.ViewUtils;
@@ -132,7 +133,7 @@ public class BottomTabsLayout extends BaseLayout implements AHBottomNavigation.O
     }
 
     private void showInitialScreenStack() {
-        showStackAndUpdateStyle(screenStacks[0]);
+        showStackAndUpdateStyle(screenStacks[0], NavigationType.InitialScreen);
         EventBus.instance.post(new ScreenChangedEvent(screenStacks[0].peek().getScreenParams()));
     }
 
@@ -148,7 +149,7 @@ public class BottomTabsLayout extends BaseLayout implements AHBottomNavigation.O
         }
 
         if (getCurrentScreenStack().canPop()) {
-            getCurrentScreenStack().pop(true);
+            getCurrentScreenStack().pop(true, System.currentTimeMillis());
             setBottomTabsStyleFromCurrentScreen();
             EventBus.instance.post(new ScreenChangedEvent(getCurrentScreenStack().peek().getScreenParams()));
             return true;
@@ -289,6 +290,9 @@ public class BottomTabsLayout extends BaseLayout implements AHBottomNavigation.O
 
     @Override
     public void onModalDismissed() {
+        getCurrentScreenStack().peek().getScreenParams().timestamp = System.currentTimeMillis();
+        NavigationApplication.instance.getEventEmitter().sendWillAppearEvent(getCurrentScreenStack().peek().getScreenParams(), NavigationType.DismissModal);
+        NavigationApplication.instance.getEventEmitter().sendDidAppearEvent(getCurrentScreenStack().peek().getScreenParams(), NavigationType.DismissModal);
         EventBus.instance.post(new ScreenChangedEvent(getCurrentScreenStack().peek().getScreenParams()));
     }
 
@@ -348,7 +352,7 @@ public class BottomTabsLayout extends BaseLayout implements AHBottomNavigation.O
 
     @Override
     public void pop(final ScreenParams params) {
-        getCurrentScreenStack().pop(params.animateScreenTransitions, new ScreenStack.OnScreenPop() {
+        getCurrentScreenStack().pop(params.animateScreenTransitions, params.timestamp, new ScreenStack.OnScreenPop() {
             @Override
             public void onScreenPopAnimationEnd() {
                 setBottomTabsStyleFromCurrentScreen();
@@ -360,7 +364,7 @@ public class BottomTabsLayout extends BaseLayout implements AHBottomNavigation.O
 
     @Override
     public void popToRoot(final ScreenParams params) {
-        getCurrentScreenStack().popToRoot(params.animateScreenTransitions, new ScreenStack.OnScreenPop() {
+        getCurrentScreenStack().popToRoot(params.animateScreenTransitions, params.timestamp, new ScreenStack.OnScreenPop() {
             @Override
             public void onScreenPopAnimationEnd() {
                 setBottomTabsStyleFromCurrentScreen();
@@ -414,7 +418,7 @@ public class BottomTabsLayout extends BaseLayout implements AHBottomNavigation.O
 
         final int unselectedTabIndex = currentStackIndex;
         hideCurrentStack();
-        showNewStack(position);
+        showNewStack(position, NavigationType.BottomTabSelected);
         EventBus.instance.post(new ScreenChangedEvent(getCurrentScreenStack().peek().getScreenParams()));
         sendTabSelectedEventToJs(position, unselectedTabIndex);
         return true;
@@ -442,19 +446,19 @@ public class BottomTabsLayout extends BaseLayout implements AHBottomNavigation.O
         NavigationApplication.instance.getEventEmitter().sendNavigatorEvent("bottomTabReselected", navigatorEventId, data);
     }
 
-    private void showNewStack(int position) {
-        showStackAndUpdateStyle(screenStacks[position]);
+    private void showNewStack(int position, NavigationType type) {
+        showStackAndUpdateStyle(screenStacks[position], type);
         currentStackIndex = position;
     }
 
-    private void showStackAndUpdateStyle(ScreenStack newStack) {
-        newStack.show();
+    private void showStackAndUpdateStyle(ScreenStack newStack, NavigationType type) {
+        newStack.show(type);
         setStyleFromScreen(newStack.getCurrentScreenStyleParams());
     }
 
     private void hideCurrentStack() {
         ScreenStack currentScreenStack = getCurrentScreenStack();
-        currentScreenStack.hide();
+        currentScreenStack.hide(NavigationType.BottomTabSelected);
     }
 
     private ScreenStack getCurrentScreenStack() {
@@ -510,7 +514,7 @@ public class BottomTabsLayout extends BaseLayout implements AHBottomNavigation.O
     @Override
     public boolean onTitleBarBackButtonClick() {
         if (getCurrentScreenStack().canPop()) {
-            getCurrentScreenStack().pop(true, new ScreenStack.OnScreenPop() {
+            getCurrentScreenStack().pop(true, System.currentTimeMillis(), new ScreenStack.OnScreenPop() {
                 @Override
                 public void onScreenPopAnimationEnd() {
                     setBottomTabsStyleFromCurrentScreen();

android/app/src/main/java/com/reactnativenavigation/layouts/ModalScreenLayout.java

@@ -16,6 +16,6 @@ public class ModalScreenLayout extends SingleScreenLayout {
 
     @Override
     protected void pushInitialScreen(LayoutParams lp) {
-        stack.pushInitialScreenWithAnimation(screenParams, lp);
+        stack.pushInitialModalScreenWithAnimation(screenParams, lp);
     }
 }

android/app/src/main/java/com/reactnativenavigation/layouts/SingleScreenLayout.java

@@ -19,6 +19,7 @@ import com.reactnativenavigation.params.SlidingOverlayParams;
 import com.reactnativenavigation.params.SnackbarParams;
 import com.reactnativenavigation.params.TitleBarButtonParams;
 import com.reactnativenavigation.params.TitleBarLeftButtonParams;
+import com.reactnativenavigation.screens.NavigationType;
 import com.reactnativenavigation.screens.Screen;
 import com.reactnativenavigation.screens.ScreenStack;
 import com.reactnativenavigation.views.LeftButtonOnClickListener;
@@ -87,7 +88,7 @@ public class SingleScreenLayout extends BaseLayout {
 
     protected void pushInitialScreen(LayoutParams lp) {
         stack.pushInitialScreen(screenParams, lp);
-        stack.show();
+        stack.show(NavigationType.Push);
     }
 
     private void sendScreenChangedEventAfterInitialPush() {
@@ -113,7 +114,7 @@ public class SingleScreenLayout extends BaseLayout {
         }
 
         if (stack.canPop()) {
-            stack.pop(true);
+            stack.pop(true, System.currentTimeMillis());
             EventBus.instance.post(new ScreenChangedEvent(stack.peek().getScreenParams()));
             return true;
         } else {
@@ -145,7 +146,7 @@ public class SingleScreenLayout extends BaseLayout {
 
     @Override
     public void pop(ScreenParams params) {
-        stack.pop(params.animateScreenTransitions, new ScreenStack.OnScreenPop() {
+        stack.pop(params.animateScreenTransitions, params.timestamp, new ScreenStack.OnScreenPop() {
             @Override
             public void onScreenPopAnimationEnd() {
                 EventBus.instance.post(new ScreenChangedEvent(stack.peek().getScreenParams()));
@@ -155,7 +156,7 @@ public class SingleScreenLayout extends BaseLayout {
 
     @Override
     public void popToRoot(ScreenParams params) {
-        stack.popToRoot(params.animateScreenTransitions, new ScreenStack.OnScreenPop() {
+        stack.popToRoot(params.animateScreenTransitions, params.timestamp, new ScreenStack.OnScreenPop() {
             @Override
             public void onScreenPopAnimationEnd() {
                 EventBus.instance.post(new ScreenChangedEvent(stack.peek().getScreenParams()));
@@ -285,6 +286,9 @@ public class SingleScreenLayout extends BaseLayout {
 
     @Override
     public void onModalDismissed() {
+        stack.peek().getScreenParams().timestamp = System.currentTimeMillis();
+        NavigationApplication.instance.getEventEmitter().sendWillAppearEvent(stack.peek().getScreenParams(), NavigationType.DismissModal);
+        NavigationApplication.instance.getEventEmitter().sendDidAppearEvent(stack.peek().getScreenParams(), NavigationType.DismissModal);
         EventBus.instance.post(new ScreenChangedEvent(stack.peek().getScreenParams()));
     }
 

android/app/src/main/java/com/reactnativenavigation/params/BaseScreenParams.java

@@ -6,6 +6,7 @@ import android.os.Bundle;
 import java.util.List;
 
 public class BaseScreenParams {
+    public double timestamp;
     public String screenId;
     public String title;
     public String subtitle;

android/app/src/main/java/com/reactnativenavigation/params/SideMenuParams.java

@@ -2,9 +2,7 @@ package com.reactnativenavigation.params;
 
 import com.reactnativenavigation.views.SideMenu;
 
-public class SideMenuParams {
-    public String screenId;
-    public NavigationParams navigationParams;
+public class SideMenuParams extends BaseScreenParams {
     public boolean disableOpenGesture;
     public SideMenu.Side side;
 }

android/app/src/main/java/com/reactnativenavigation/params/parsers/ScreenParamsParser.java

@@ -15,6 +15,7 @@ public class ScreenParamsParser extends Parser {
     private static final String KEY_TITLE = "title";
     private static final String KEY_SUBTITLE = "subtitle";
     private static final String KEY_SCREEN_ID = "screenId";
+    private static final String KEY_TIMESTAMP = "timestamp";
     private static final String KEY_NAVIGATION_PARAMS = "navigationParams";
     private static final String STYLE_PARAMS = "styleParams";
     private static final String TOP_TABS = "topTabs";
@@ -27,6 +28,7 @@ public class ScreenParamsParser extends Parser {
     public static ScreenParams parse(Bundle params) {
         ScreenParams result = new ScreenParams();
         result.screenId = params.getString(KEY_SCREEN_ID);
+        result.timestamp = params.getDouble(KEY_TIMESTAMP);
         assertKeyExists(params, KEY_NAVIGATION_PARAMS);
         result.navigationParams = new NavigationParams(params.getBundle(KEY_NAVIGATION_PARAMS));
 

android/app/src/main/java/com/reactnativenavigation/screens/NavigationType.java

@@ -0,0 +1,12 @@
+package com.reactnativenavigation.screens;
+
+public enum NavigationType {
+    Push,
+    Pop,
+    BottomTabSelected,
+    InitialScreen,
+    ShowModal,
+    DismissModal,
+    OpenSideMenu,
+    CloseSideMenu
+}

android/app/src/main/java/com/reactnativenavigation/screens/Screen.java

@@ -251,23 +251,32 @@ public abstract class Screen extends RelativeLayout implements Subscriber {
 
     public abstract void setOnDisplayListener(OnDisplayListener onContentViewDisplayedListener);
 
-    public void show() {
-        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("willAppear", screenParams.getNavigatorEventId());
-        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("didAppear", screenParams.getNavigatorEventId());
+    public void show(NavigationType type) {
+        NavigationApplication.instance.getEventEmitter().sendWillAppearEvent(screenParams, type);
+        NavigationApplication.instance.getEventEmitter().sendDidAppearEvent(screenParams, type);
         screenAnimator.show(screenParams.animateScreenTransitions);
     }
 
-    public void show(boolean animated) {
-        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("willAppear", screenParams.getNavigatorEventId());
-        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("didAppear", screenParams.getNavigatorEventId());
-        screenAnimator.show(animated);
+    public void show(boolean animated, final NavigationType type) {
+        NavigationApplication.instance.getEventEmitter().sendWillAppearEvent(screenParams, type);
+        screenAnimator.show(animated, new Runnable() {
+            @Override
+            public void run() {
+                NavigationApplication.instance.getEventEmitter().sendDidAppearEvent(screenParams, type);
+            }
+        });
     }
 
-    public void show(boolean animated, Runnable onAnimationEnd) {
-        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("willAppear", screenParams.getNavigatorEventId());
-        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("didAppear", screenParams.getNavigatorEventId());
+    public void show(boolean animated, final Runnable onAnimationEnd, final NavigationType type) {
+        NavigationApplication.instance.getEventEmitter().sendWillAppearEvent(screenParams, type);
         setStyle();
-        screenAnimator.show(animated, onAnimationEnd);
+        screenAnimator.show(animated, new Runnable() {
+            @Override
+            public void run() {
+                NavigationApplication.instance.getEventEmitter().sendDidAppearEvent(screenParams, type);
+                if (onAnimationEnd != null) onAnimationEnd.run();
+            }
+        });
     }
 
     public void showWithSharedElementsTransitions(Map<String, SharedElementTransition> fromElements, final Runnable onAnimationEnd) {
@@ -282,24 +291,25 @@ public abstract class Screen extends RelativeLayout implements Subscriber {
         screenAnimator.hideWithSharedElementsTransition(onAnimationEnd);
     }
 
-    public void hide(Map<String, SharedElementTransition> sharedElements, Runnable onAnimationEnd) {
+    public void hide(Map<String, SharedElementTransition> sharedElements, Runnable onAnimationEnd, NavigationType type) {
         removeHiddenSharedElements();
         if (hasVisibleSharedElements()) {
             hideWithSharedElementTransitions(sharedElements, onAnimationEnd);
         } else {
-            hide(false, onAnimationEnd);
+            hide(false, onAnimationEnd, type);
         }
     }
 
-    public void animateHide(Map<String, SharedElementTransition> sharedElements, Runnable onAnimationEnd) {
+    public void animateHide(Map<String, SharedElementTransition> sharedElements, Runnable onAnimationEnd, NavigationType type) {
         removeHiddenSharedElements();
         if (hasVisibleSharedElements()) {
             hideWithSharedElementTransitions(sharedElements, onAnimationEnd);
         } else {
-            hide(true, onAnimationEnd);
+            hide(true, onAnimationEnd, type);
         }
     }
 
+    @SuppressWarnings("SimplifiableIfStatement")
     private boolean hasVisibleSharedElements() {
         if (screenParams.sharedElementsTransitions.isEmpty()) {
             return false;
@@ -311,10 +321,15 @@ public abstract class Screen extends RelativeLayout implements Subscriber {
         sharedElements.removeHiddenElements();
     }
 
-    private void hide(boolean animated, Runnable onAnimatedEnd) {
-        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("willDisappear", screenParams.getNavigatorEventId());
-        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("didDisappear", screenParams.getNavigatorEventId());
-        screenAnimator.hide(animated, onAnimatedEnd);
+    private void hide(boolean animated, final Runnable onAnimatedEnd, final NavigationType type) {
+        NavigationApplication.instance.getEventEmitter().sendWillDisappearEvent(screenParams, type);
+        screenAnimator.hide(animated, new Runnable() {
+            @Override
+            public void run() {
+                NavigationApplication.instance.getEventEmitter().sendDidDisappearEvent(screenParams, type);
+                if (onAnimatedEnd != null) onAnimatedEnd.run();
+            }
+        });
     }
 
     public void showContextualMenu(ContextualMenuParams params, Callback onButtonClicked) {

android/app/src/main/java/com/reactnativenavigation/screens/ScreenStack.java

@@ -78,14 +78,14 @@ public class ScreenStack {
         }
     }
 
-    public void pushInitialScreenWithAnimation(final ScreenParams initialScreenParams, LayoutParams params) {
+    public void pushInitialModalScreenWithAnimation(final ScreenParams initialScreenParams, LayoutParams params) {
         isStackVisible = true;
         pushInitialScreen(initialScreenParams, params);
         final Screen screen = stack.peek();
         screen.setOnDisplayListener(new Screen.OnDisplayListener() {
             @Override
             public void onDisplay() {
-                screen.show(initialScreenParams.animateScreenTransitions);
+                screen.show(initialScreenParams.animateScreenTransitions, NavigationType.ShowModal);
                 screen.setStyle();
             }
         });
@@ -94,15 +94,6 @@ public class ScreenStack {
     public void pushInitialScreen(ScreenParams initialScreenParams, LayoutParams params) {
         Screen initialScreen = ScreenFactory.create(activity, initialScreenParams, leftButtonOnClickListener);
         initialScreen.setVisibility(View.INVISIBLE);
-        initialScreen.setOnDisplayListener(new Screen.OnDisplayListener() {
-            @Override
-            public void onDisplay() {
-                if (isStackVisible) {
-                    NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("willAppear", stack.peek().getNavigatorEventId());
-                    NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("didAppear", stack.peek().getNavigatorEventId());
-                }
-            }
-        });
         addScreen(initialScreen, params);
     }
 
@@ -131,7 +122,7 @@ public class ScreenStack {
                                           @Nullable final Screen.OnDisplayListener onDisplay) {
         nextScreen.setVisibility(View.INVISIBLE);
         addScreen(nextScreen, layoutParams);
-        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("willDisappear", previousScreen.getNavigatorEventId());
+        NavigationApplication.instance.getEventEmitter().sendWillDisappearEvent(previousScreen.screenParams, NavigationType.Push);
         nextScreen.setOnDisplayListener(new Screen.OnDisplayListener() {
             @Override
             public void onDisplay() {
@@ -139,10 +130,10 @@ public class ScreenStack {
                     @Override
                     public void run() {
                         if (onDisplay != null) onDisplay.onDisplay();
-                        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("didDisappear", previousScreen.getNavigatorEventId());
+                        NavigationApplication.instance.getEventEmitter().sendDidDisappearEvent(previousScreen.screenParams, NavigationType.Push);
                         parent.removeView(previousScreen);
                     }
-                });
+                }, NavigationType.Push);
             }
         });
     }
@@ -178,11 +169,11 @@ public class ScreenStack {
         parent.addView(screen, parent.getChildCount() - 1, layoutParams);
     }
 
-    public void pop(boolean animated) {
-        pop(animated, null);
+    public void pop(boolean animated, double jsPopTimestamp) {
+        pop(animated, jsPopTimestamp, null);
     }
 
-    public void pop(final boolean animated, @Nullable final OnScreenPop onScreenPop) {
+    public void pop(final boolean animated, final double jsPopTimestamp, @Nullable final OnScreenPop onScreenPop) {
         if (!canPop()) {
             return;
         }
@@ -191,18 +182,19 @@ public class ScreenStack {
                 @Override
                 public void run() {
                     keyboardVisibilityDetector.setKeyboardCloseListener(null);
-                    popInternal(animated, onScreenPop);
+                    popInternal(animated, jsPopTimestamp, onScreenPop);
                 }
             });
             keyboardVisibilityDetector.closeKeyboard();
         } else {
-            popInternal(animated, onScreenPop);
+            popInternal(animated, jsPopTimestamp, onScreenPop);
         }
     }
 
-    private void popInternal(final boolean animated, @Nullable final OnScreenPop onScreenPop) {
+    private void popInternal(final boolean animated, double jsPopTimestamp, @Nullable final OnScreenPop onScreenPop) {
         final Screen toRemove = stack.pop();
         final Screen previous = stack.peek();
+        previous.screenParams.timestamp = jsPopTimestamp;
         swapScreens(animated, toRemove, previous, onScreenPop);
     }
 
@@ -215,18 +207,20 @@ public class ScreenStack {
         }
     }
 
-    private void hideScreen(boolean animated, final Screen toRemove, Screen previous) {
+    private void hideScreen(boolean animated, final Screen toRemove, final Screen previous) {
+        NavigationApplication.instance.getEventEmitter().sendWillAppearEvent(previous.screenParams, NavigationType.Pop);
         Runnable onAnimationEnd = new Runnable() {
             @Override
             public void run() {
                 toRemove.destroy();
                 parent.removeView(toRemove);
+                NavigationApplication.instance.getEventEmitter().sendDidAppearEvent(previous.screenParams, NavigationType.Pop);
             }
         };
         if (animated) {
-            toRemove.animateHide(previous.sharedElements.getToElements(), onAnimationEnd);
+            toRemove.animateHide(previous.sharedElements.getToElements(), onAnimationEnd, NavigationType.Pop);
         } else {
-            toRemove.hide(previous.sharedElements.getToElements(), onAnimationEnd);
+            toRemove.hide(previous.sharedElements.getToElements(), onAnimationEnd, NavigationType.Pop);
         }
     }
 
@@ -236,32 +230,30 @@ public class ScreenStack {
 
     private void readdPrevious(Screen previous) {
         previous.setVisibility(View.VISIBLE);
-        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("willAppear", previous.getNavigatorEventId());
-        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("didAppear", previous.getNavigatorEventId());
         parent.addView(previous, 0);
     }
 
-    public void popToRoot(final boolean animated, @Nullable final OnScreenPop onScreenPop) {
+    public void popToRoot(final boolean animated, final double jsPopTimestamp, @Nullable final OnScreenPop onScreenPop) {
         if (keyboardVisibilityDetector.isKeyboardVisible()) {
             keyboardVisibilityDetector.setKeyboardCloseListener(new Runnable() {
                 @Override
                 public void run() {
                     keyboardVisibilityDetector.setKeyboardCloseListener(null);
-                    popToRootInternal(animated, onScreenPop);
+                    popToRootInternal(animated, jsPopTimestamp, onScreenPop);
                 }
             });
             keyboardVisibilityDetector.closeKeyboard();
         } else {
-            popToRootInternal(animated, onScreenPop);
+            popToRootInternal(animated, jsPopTimestamp, onScreenPop);
         }
     }
 
-    private void popToRootInternal(final boolean animated, @Nullable final OnScreenPop onScreenPop) {
+    private void popToRootInternal(final boolean animated, double jsPopTimestamp, @Nullable final OnScreenPop onScreenPop) {
         while (canPop()) {
             if (stack.size() == 2) {
-                popInternal(animated, onScreenPop);
+                popInternal(animated, jsPopTimestamp, onScreenPop);
             } else {
-                popInternal(animated, null);
+                popInternal(animated, jsPopTimestamp, null);
             }
         }
     }
@@ -421,17 +413,18 @@ public class ScreenStack {
         }
     }
 
-    public void show() {
+    public void show(NavigationType type) {
         isStackVisible = true;
         stack.peek().setStyle();
         stack.peek().setVisibility(View.VISIBLE);
-        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("willAppear", stack.peek().getNavigatorEventId());
-        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("didAppear", stack.peek().getNavigatorEventId());
+        stack.peek().screenParams.timestamp = System.currentTimeMillis();
+        NavigationApplication.instance.getEventEmitter().sendWillAppearEvent(stack.peek().screenParams, type);
+        NavigationApplication.instance.getEventEmitter().sendDidAppearEvent(stack.peek().screenParams, type);
     }
 
-    public void hide() {
-        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("willDisappear", stack.peek().getNavigatorEventId());
-        NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("didDisappear", stack.peek().getNavigatorEventId());
+    public void hide(NavigationType type) {
+        NavigationApplication.instance.getEventEmitter().sendWillDisappearEvent(stack.peek().screenParams, type);
+        NavigationApplication.instance.getEventEmitter().sendDidDisappearEvent(stack.peek().screenParams, type);
         isStackVisible = false;
         stack.peek().setVisibility(View.INVISIBLE);
     }

android/app/src/main/java/com/reactnativenavigation/views/SideMenu.java

@@ -9,11 +9,16 @@ import android.view.ViewGroup;
 import android.widget.RelativeLayout;
 
 import com.reactnativenavigation.NavigationApplication;
+import com.reactnativenavigation.params.BaseScreenParams;
 import com.reactnativenavigation.params.SideMenuParams;
+import com.reactnativenavigation.screens.NavigationType;
 import com.reactnativenavigation.screens.Screen;
 import com.reactnativenavigation.utils.ViewUtils;
 
 public class SideMenu extends DrawerLayout {
+    private SideMenuParams leftMenuParams;
+    private SideMenuParams rightMenuParams;
+
     public enum Side {
         Left(Gravity.LEFT), Right(Gravity.RIGHT);
 
@@ -91,6 +96,8 @@ public class SideMenu extends DrawerLayout {
 
     public SideMenu(Context context, SideMenuParams leftMenuParams, SideMenuParams rightMenuParams) {
         super(context);
+        this.leftMenuParams = leftMenuParams;
+        this.rightMenuParams = rightMenuParams;
         createContentContainer();
         leftSideMenuView = createSideMenu(leftMenuParams);
         rightSideMenuView = createSideMenu(rightMenuParams);
@@ -133,14 +140,18 @@ public class SideMenu extends DrawerLayout {
         sideMenuListener = new SimpleDrawerListener() {
             @Override
             public void onDrawerOpened(View drawerView) {
-                NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("willAppear", ((ContentView)drawerView).getNavigatorEventId());
-                NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("didAppear", ((ContentView)drawerView).getNavigatorEventId());
+                NavigationApplication.instance.getEventEmitter().sendWillAppearEvent(getVisibleDrawerScreenParams(), NavigationType.OpenSideMenu);
+                NavigationApplication.instance.getEventEmitter().sendDidAppearEvent(getVisibleDrawerScreenParams(), NavigationType.OpenSideMenu);
             }
 
             @Override
             public void onDrawerClosed(View drawerView) {
-                NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("willDisappear", ((ContentView)drawerView).getNavigatorEventId());
-                NavigationApplication.instance.getEventEmitter().sendScreenChangedEvent("didDisappear", ((ContentView)drawerView).getNavigatorEventId());
+                NavigationApplication.instance.getEventEmitter().sendWillDisappearEvent(getVisibleDrawerScreenParams(), NavigationType.CloseSideMenu);
+                NavigationApplication.instance.getEventEmitter().sendDidDisappearEvent(getVisibleDrawerScreenParams(), NavigationType.CloseSideMenu);
+            }
+
+            private BaseScreenParams getVisibleDrawerScreenParams() {
+                return isDrawerOpen(Side.Left.gravity) ? leftMenuParams : rightMenuParams;
             }
         };
         addDrawerListener(sideMenuListener);

example/src/app.js

@@ -1,9 +1,11 @@
 import {Platform} from 'react-native';
 import {Navigation} from 'react-native-navigation';
-import registerScreens from './screens';
+import {registerScreens, registerScreenVisibilityListener} from './screens';
+
 
 // screen related book keeping
 registerScreens();
+registerScreenVisibilityListener();
 
 const tabs = [{
   label: 'Navigation',

example/src/screens/Types.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
 import Row from '../components/Row';
 
-class Types extends React.Component {
+class Types extends Component {
 
   toggleDrawer = () => {
     this.props.navigator.toggleDrawer({

example/src/screens/index.js

@@ -1,4 +1,4 @@
-import {Navigation} from 'react-native-navigation';
+import {Navigation, ScreenVisibilityListener} from 'react-native-navigation';
 
 import Types from './Types';
 import Actions from './Actions';
@@ -23,7 +23,7 @@ import CardsInfo from './transitions/sharedElementTransitions/Cards/Info';
 import Masonry from './transitions/sharedElementTransitions/Masonry/Masonry';
 import MasonryItem from './transitions/sharedElementTransitions/Masonry/Item';
 
-export default function () {
+export function registerScreens() {
   Navigation.registerComponent('example.Types', () => Types);
   Navigation.registerComponent('example.Actions', () => Actions);
   Navigation.registerComponent('example.Transitions', () => Transitions);
@@ -46,3 +46,12 @@ export default function () {
   Navigation.registerComponent('example.Transitions.SharedElementTransitions.Masonry', () => Masonry);
   Navigation.registerComponent('example.Transitions.SharedElementTransitions.Masonry.Item', () => MasonryItem);
 }
+
+export function registerScreenVisibilityListener() {
+  new ScreenVisibilityListener({
+    willAppear: ({screen}) => console.log(`Displaying screen ${screen}`),
+    didAppear: ({screen, startTime, endTime, commandType}) => console.log('screenVisibility', `Screen ${screen} displayed in ${endTime - startTime} millis [${commandType}]`),
+    willDisappear: ({screen}) => console.log(`Screen will disappear ${screen}`),
+    didDisappear: ({screen}) => console.log(`Screen disappeared ${screen}`)
+  }).register();
+}

example/src/screens/types/Modal.js

@@ -1,12 +1,49 @@
-import React from 'react';
-import {StyleSheet, View, Text} from 'react-native';
+import React, {Component} from 'react';
+import {StyleSheet, View, Text, Button} from 'react-native';
 
-class Modal extends React.Component {
+class Modal extends Component {
+
+  onPushScreen = () => {
+    this.props.navigator.push({
+      screen: 'example.Types.Modal',
+      title: `Screen ${this.props.count || 1}`,
+      passProps: {
+        count: this.props.count ? this.props.count + 1 : 2
+      }
+    });
+  };
+
+  onResetTo = () => {
+    this.props.navigator.resetTo({
+      screen: 'example.Types.Modal',
+      icon: require('../../../img/list.png'),
+      title: 'Modal'
+    });
+  };
+
+  onPopToRoot = () => {
+    this.props.navigator.popToRoot();
+  };
 
   render() {
     return (
       <View style={styles.container}>
         <Text>Modal Screen</Text>
+        <View style={styles.button}>
+          <Button
+            onPress={this.onPushScreen}
+            title="Push Screen"/>
+        </View>
+        <View style={styles.button}>
+          <Button
+            onPress={this.onResetTo}
+            title="Reset Stack"/>
+        </View>
+        {this.props.count > 1 && <View style={styles.button}>
+          <Button
+            onPress={this.onPopToRoot}
+            title="Pop To Root"/>
+        </View>}
       </View>
     );
   }
@@ -19,6 +56,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: '#ffffff',
   },
+  button: {
+    marginTop: 16
+  }
 });
 
 export default Modal;

example/src/screens/types/Push.js

@@ -1,12 +1,50 @@
-import React from 'react';
-import {StyleSheet, View, Text} from 'react-native';
+import React, {Component} from 'react';
+import {StyleSheet, View, Text, Button} from 'react-native';
 
-class Push extends React.Component {
+class Push extends Component {
+
+  onPushAnother = () => {
+    this.props.navigator.push({
+      screen: 'example.Types.Push',
+      title: `Screen ${this.props.count || 1}`,
+      passProps: {
+        count: this.props.count ? this.props.count + 1 : 2
+      }
+    });
+  };
+
+  onResetTo = () => {
+    this.props.navigator.resetTo({
+      label: 'Navigation',
+      screen: 'example.Types',
+      icon: require('../../../img/list.png'),
+      title: 'Navigation Types'
+    });
+  };
+
+  onPopToRoot = () => {
+    this.props.navigator.popToRoot();
+  };
 
   render() {
     return (
       <View style={styles.container}>
         <Text>Pushed Screen</Text>
+        <View style={styles.button}>
+          <Button
+            onPress={this.onPushAnother}
+            title="Push Another Screen"/>
+        </View>
+        <View style={styles.button}>
+          <Button
+            onPress={this.onResetTo}
+            title="Reset Stack"/>
+        </View>
+        <View style={styles.button}>
+          <Button
+            onPress={this.onPopToRoot}
+            title="Pop To Root"/>
+        </View>
       </View>
     );
   }
@@ -19,6 +57,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: '#ffffff',
   },
+  button: {
+    marginTop: 16
+  }
 });
 
 export default Push;

ios/Helpers/RCTHelpers.h

@@ -13,4 +13,5 @@
 +(BOOL)removeYellowBox:(RCTRootView*)reactRootView;
 + (NSMutableDictionary *)textAttributesFromDictionary:(NSDictionary *)dictionary withPrefix:(NSString *)prefix;
 + (NSMutableDictionary *)textAttributesFromDictionary:(NSDictionary *)dictionary withPrefix:(NSString *)prefix baseFont:(UIFont *)font;
++ (NSString *)getTimestampString;
 @end

ios/Helpers/RCTHelpers.m

@@ -200,5 +200,9 @@
     return [self textAttributesFromDictionary:dictionary withPrefix:prefix baseFont:[UIFont systemFontOfSize:[UIFont systemFontSize]]];
 }
 
++ (NSString *)getTimestampString {
+    long long milliseconds = (long long)([[NSDate date] timeIntervalSince1970] * 1000.0);
+    return [NSString stringWithFormat:@"%lld", milliseconds];
+}
 
 @end

ios/RCCManagerModule.m

@@ -9,6 +9,7 @@
 #import "RCCTabBarController.h"
 #import "RCCTheSideBarManagerViewController.h"
 #import "RCCNotification.h"
+#import "RCTHelpers.h"
 
 #define kSlideDownAnimationDuration 0.35
 
@@ -222,11 +223,15 @@ RCT_EXPORT_METHOD(
 
 -(void)performSetRootController:(NSDictionary*)layout animationType:(NSString*)animationType globalProps:(NSDictionary*)globalProps
 {
+    
+    NSMutableDictionary *modifiedGloablProps = [globalProps mutableCopy];
+    modifiedGloablProps[GLOBAL_SCREEN_ACTION_COMMAND_TYPE] = COMMAND_TYPE_INITIAL_SCREEN;
+    
     // first clear the registry to remove any refernece to the previous controllers
     [[RCCManager sharedInstance] clearModuleRegistry];
     
     // create the new controller
-    UIViewController *controller = [RCCViewController controllerWithLayout:layout globalProps:globalProps bridge:[[RCCManager sharedInstance] getBridge]];
+    UIViewController *controller = [RCCViewController controllerWithLayout:layout globalProps:modifiedGloablProps bridge:[[RCCManager sharedInstance] getBridge]];
     if (controller == nil) return;
     
     id<UIApplicationDelegate> appDelegate = [UIApplication sharedApplication].delegate;
@@ -318,7 +323,11 @@ RCT_EXPORT_METHOD(
 RCT_EXPORT_METHOD(
                   showController:(NSDictionary*)layout animationType:(NSString*)animationType globalProps:(NSDictionary*)globalProps resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
 {
-    UIViewController *controller = [RCCViewController controllerWithLayout:layout globalProps:globalProps bridge:[[RCCManager sharedInstance] getBridge]];
+
+    NSMutableDictionary *modifiedGlobalProps = [globalProps mutableCopy];
+    layout[@"props"][@"passProps"][GLOBAL_SCREEN_ACTION_COMMAND_TYPE] = COMMAND_TYPE_SHOW_MODAL;
+    
+    UIViewController *controller = [RCCViewController controllerWithLayout:layout globalProps:modifiedGlobalProps bridge:[[RCCManager sharedInstance] getBridge]];
     if (controller == nil)
     {
         [RCCManagerModule handleRCTPromiseRejectBlock:reject

ios/RCCNavigationController.m

@@ -74,7 +74,9 @@ NSString const *CALLBACK_ASSOCIATED_ID = @"RCCNavigationController.CALLBACK_ASSO
     NSString *component = actionParams[@"component"];
     if (!component) return;
     
-    NSDictionary *passProps = actionParams[@"passProps"];
+    NSMutableDictionary *passProps = [actionParams[@"passProps"] mutableCopy];
+    passProps[GLOBAL_SCREEN_ACTION_COMMAND_TYPE] = COMMAND_TYPE_PUSH;
+    passProps[GLOBAL_SCREEN_ACTION_TIMESTAMP] = actionParams[GLOBAL_SCREEN_ACTION_TIMESTAMP];
     NSDictionary *navigatorStyle = actionParams[@"style"];
     
     // merge the navigatorStyle of our parent
@@ -206,7 +208,8 @@ NSString const *CALLBACK_ASSOCIATED_ID = @"RCCNavigationController.CALLBACK_ASSO
     NSString *component = actionParams[@"component"];
     if (!component) return;
     
-    NSDictionary *passProps = actionParams[@"passProps"];
+    NSMutableDictionary *passProps = [actionParams[@"passProps"] mutableCopy];
+    passProps[@"commantType"] = @"resetTo";
     NSDictionary *navigatorStyle = actionParams[@"style"];
     
     RCCViewController *viewController = [[RCCViewController alloc] initWithComponent:component passProps:passProps navigatorStyle:navigatorStyle globalProps:nil bridge:bridge];

ios/RCCTabBarController.m

@@ -35,6 +35,17 @@
     [RCCTabBarController sendScreenTabChangedEvent:viewController body:body];
     
     [[[RCCManager sharedInstance] getBridge].eventDispatcher sendAppEventWithName:@"bottomTabSelected" body:body];
+    if ([viewController isKindOfClass:[UINavigationController class]]) {
+      UINavigationController *navigationController = (UINavigationController*)viewController;
+      UIViewController *topViewController = navigationController.topViewController;
+      
+      if ([topViewController isKindOfClass:[RCCViewController class]]) {
+        RCCViewController *topRCCViewController = (RCCViewController*)topViewController;
+        topRCCViewController.commandType = COMMAND_TYPE_BOTTOME_TAB_SELECTED;
+        topRCCViewController.timestamp = [RCTHelpers getTimestampString];
+      }
+    }
+    
   } else {
     [RCCTabBarController sendScreenTabPressedEvent:viewController body:nil];
   }

ios/RCCViewController.h

@@ -1,12 +1,22 @@
 #import <UIKit/UIKit.h>
 #import <React/RCTBridge.h>
 
+#define GLOBAL_SCREEN_ACTION_COMMAND_TYPE       @"commandType"
+#define GLOBAL_SCREEN_ACTION_TIMESTAMP          @"timestamp"
+#define COMMAND_TYPE_PUSH                       @"Push"
+#define COMMAND_TYPE_SHOW_MODAL                 @"ShowModal"
+#define COMMAND_TYPE_BOTTOME_TAB_SELECTED       @"BottomTabSelected"
+#define COMMAND_TYPE_INITIAL_SCREEN             @"InitialScreen"
+
+
 extern NSString* const RCCViewControllerCancelReactTouchesNotification;
 
 @interface RCCViewController : UIViewController
 
 @property (nonatomic) NSMutableDictionary *navigatorStyle;
 @property (nonatomic) BOOL navBarHidden;
+@property (nonatomic, strong) NSString *commandType;
+@property (nonatomic, strong) NSString *timestamp;
 
 + (UIViewController*)controllerWithLayout:(NSDictionary *)layout globalProps:(NSDictionary *)globalProps bridge:(RCTBridge *)bridge;
 

ios/RCCViewController.m

@@ -107,6 +107,23 @@ const NSInteger TRANSPARENT_NAVBAR_TAG = 78264803;
   return controller;
 }
 
+-(NSDictionary*)addCommandTypeAndTimestampIfExists:(NSDictionary*)globalProps passProps:(NSDictionary*)passProps {
+  NSMutableDictionary *modifiedPassProps = [NSMutableDictionary dictionaryWithDictionary:passProps];
+  
+  NSString *commandType = globalProps[GLOBAL_SCREEN_ACTION_COMMAND_TYPE];
+  if (commandType) {
+    modifiedPassProps[GLOBAL_SCREEN_ACTION_COMMAND_TYPE] = commandType;
+  }
+  
+  NSString *timestamp = globalProps[GLOBAL_SCREEN_ACTION_TIMESTAMP];
+  if (timestamp) {
+    modifiedPassProps[GLOBAL_SCREEN_ACTION_TIMESTAMP] = timestamp;
+  }
+  return modifiedPassProps;
+}
+
+
+
 - (instancetype)initWithProps:(NSDictionary *)props children:(NSArray *)children globalProps:(NSDictionary *)globalProps bridge:(RCTBridge *)bridge
 {
   NSString *component = props[@"component"];
@@ -142,7 +159,9 @@ const NSInteger TRANSPARENT_NAVBAR_TAG = 78264803;
   self = [super init];
   if (!self) return nil;
   
-  [self commonInit:reactView navigatorStyle:navigatorStyle props:passProps];
+  NSDictionary *modifiedPassProps = [self addCommandTypeAndTimestampIfExists:globalProps passProps:passProps];
+
+  [self commonInit:reactView navigatorStyle:navigatorStyle props:modifiedPassProps];
   
   return self;
 }
@@ -161,6 +180,10 @@ const NSInteger TRANSPARENT_NAVBAR_TAG = 78264803;
   [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(onRNReload) name:RCTJavaScriptWillStartLoadingNotification object:nil];
   [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(onCancelReactTouches) name:RCCViewControllerCancelReactTouchesNotification object:nil];
   
+  self.commandType = props[GLOBAL_SCREEN_ACTION_COMMAND_TYPE];
+  self.timestamp = props[GLOBAL_SCREEN_ACTION_TIMESTAMP];
+  
+  
   // In order to support 3rd party native ViewControllers, we support passing a class name as a prop mamed `ExternalNativeScreenClass`
   // In this case, we create an instance and add it as a child ViewController which preserves the VC lifecycle.
   // In case some props are necessary in the native ViewController, the ExternalNativeScreenProps can be used to pass them
@@ -203,15 +226,58 @@ const NSInteger TRANSPARENT_NAVBAR_TAG = 78264803;
   }
 }
 
+- (void)sendGlobalScreenEvent:(NSString *)eventName endTimestampString:(NSString *)endTimestampStr shouldReset:(BOOL)shouldReset {
+  
+  if (!self.commandType) return;
+  
+  if ([self.view isKindOfClass:[RCTRootView class]]){
+    NSString *screenName = [((RCTRootView*)self.view) moduleName];
+    
+    [[[RCCManager sharedInstance] getBridge].eventDispatcher sendAppEventWithName:eventName body:@
+     {
+       @"commandType": self.commandType ? self.commandType : @"",
+       @"screen": screenName ? screenName : @"",
+       @"startTime": self.timestamp ? self.timestamp : @"",
+       @"endTime": endTimestampStr ? endTimestampStr : @""
+     }];
+    
+    if (shouldReset) {
+      self.commandType = nil;
+      self.timestamp = nil;
+    }
+  }
+}
+
+
+-(BOOL)isDisappearTriggeredFromPop:(NSString *)eventName {
+
+  NSArray *navigationViewControllers = self.navigationController.viewControllers;
+  
+  if (navigationViewControllers.lastObject == self || [navigationViewControllers indexOfObject:self] == NSNotFound) {
+    return YES;
+  }
+  return NO;
+}
+
+- (NSString *)getTimestampString {
+  long long milliseconds = (long long)([[NSDate date] timeIntervalSince1970] * 1000.0);
+  return [NSString stringWithFormat:@"%lld", milliseconds];
+}
+
+
 - (void)viewDidAppear:(BOOL)animated
 {
   [super viewDidAppear:animated];
+  
+  [self sendGlobalScreenEvent:@"didAppear" endTimestampString:[self getTimestampString] shouldReset:YES];
   [self sendScreenChangedEvent:@"didAppear"];
+  
 }
 
 - (void)viewWillAppear:(BOOL)animated
 {
   [super viewWillAppear:animated];
+  [self sendGlobalScreenEvent:@"willAppear" endTimestampString:[self getTimestampString] shouldReset:NO];
   [self sendScreenChangedEvent:@"willAppear"];
   [self setStyleOnAppear];
 }
@@ -219,12 +285,14 @@ const NSInteger TRANSPARENT_NAVBAR_TAG = 78264803;
 - (void)viewDidDisappear:(BOOL)animated
 {
   [super viewDidDisappear:animated];
+  [self sendGlobalScreenEvent:@"didDisappear" endTimestampString:[self getTimestampString] shouldReset:YES];
   [self sendScreenChangedEvent:@"didDisappear"];
 }
 
 - (void)viewWillDisappear:(BOOL)animated
 {
   [super viewWillDisappear:animated];
+  [self sendGlobalScreenEvent:@"willDisappear" endTimestampString:[self getTimestampString] shouldReset:NO];
   [self sendScreenChangedEvent:@"willDisappear"];
   [self setStyleOnDisappear];
 }

src/ScreenVisibilityListener.js

@@ -0,0 +1,37 @@
+import {
+  NativeAppEventEmitter,
+  DeviceEventEmitter,
+  Platform
+} from 'react-native';
+export default class ScreenVisibilityListener {
+  constructor(listeners) {
+    this.emitter = Platform.OS === 'android' ? DeviceEventEmitter : NativeAppEventEmitter;
+    this.listeners = listeners;
+  }
+
+  register() {
+    const {willAppear, didAppear, willDisappear, didDisappear} = this.listeners;
+    this.willAppearSubscription = willAppear && this.emitter.addListener('willAppear', willAppear);
+    this.didAppearSubscription = didAppear && this.emitter.addListener('didAppear', didAppear);
+    this.willDisappearSubscription = willDisappear && this.emitter.addListener('willDisappear', willDisappear);
+    this.didDisappearSubscription = didDisappear && this.emitter.addListener('didDisappear', didDisappear);
+  }
+
+  unregister() {
+    if (this.willAppearSubscription) {
+      this.willAppearSubscription.remove();
+    }
+
+    if (this.didAppearSubscription) {
+      this.didAppearSubscription.remove();
+    }
+
+    if (this.willDisappearSubscription) {
+      this.willDisappearSubscription.remove();
+    }
+
+    if (this.didDisappearSubscription) {
+      this.didDisappearSubscription.remove();
+    }
+  }
+}

src/deprecated/indexDeprecated.android.js

@@ -1,9 +1,11 @@
 import Navigation from './../Navigation';
 import SharedElementTransition from './../views/sharedElementTransition';
 import NativeEventsReceiver from './../NativeEventsReceiver';
+import ScreenVisibilityListener from './../ScreenVisibilityListener';
 
 module.exports = {
   Navigation,
   SharedElementTransition,
-  NativeEventsReceiver
+  NativeEventsReceiver,
+  ScreenVisibilityListener
 };

src/deprecated/indexDeprecated.ios.js

@@ -2,10 +2,12 @@ import Navigation from './../Navigation';
 import {NavigationToolBarIOS} from './controllers';
 import SharedElementTransition from '../views/sharedElementTransition';
 import NativeEventsReceiver from './../NativeEventsReceiver';
+import ScreenVisibilityListener from './../ScreenVisibilityListener';
 
 module.exports = {
   Navigation,
   NavigationToolBarIOS,
   SharedElementTransition,
-  NativeEventsReceiver
+  NativeEventsReceiver,
+  ScreenVisibilityListener
 };

src/deprecated/platformSpecificDeprecated.android.js

@@ -73,12 +73,12 @@ function navigatorPush(navigator, params) {
   addNavigationStyleParams(params);
 
   adaptTopTabs(params, params.navigatorID);
-  // findSharedElementsNodeHandles(params);
 
   params.screenId = params.screen;
   let adapted = adaptNavigationStyleToScreenStyle(params);
   adapted = adaptNavigationParams(adapted);
   adapted.overrideBackPress = params.overrideBackPress;
+  adapted.timestamp = Date.now();
 
   newPlatformSpecific.push(adapted);
 }
@@ -89,6 +89,7 @@ function navigatorPop(navigator, params) {
   params.screenId = params.screen;
   let adapted = adaptNavigationStyleToScreenStyle(params);
   adapted = adaptNavigationParams(adapted);
+  adapted.timestamp = Date.now();
 
   newPlatformSpecific.pop(adapted);
 }
@@ -99,6 +100,7 @@ function navigatorPopToRoot(navigator, params) {
   params.screenId = params.screen;
   let adapted = adaptNavigationStyleToScreenStyle(params);
   adapted = adaptNavigationParams(adapted);
+  adapted.timestamp = Date.now();
 
   newPlatformSpecific.popToRoot(adapted);
 }
@@ -113,6 +115,7 @@ function navigatorResetTo(navigator, params) {
   params.screenId = params.screen;
   let adapted = adaptNavigationStyleToScreenStyle(params);
   adapted = adaptNavigationParams(adapted);
+  adapted.timestamp = Date.now();
 
   newPlatformSpecific.newStack(adapted);
 }
@@ -266,6 +269,7 @@ function startTabBasedApp(params) {
     let newtab = adaptNavigationStyleToScreenStyle(tab);
     newtab = adaptNavigationParams(tab);
     newtab.overrideBackPress = tab.overrideBackPress;
+    newtab.timestamp = Date.now();
     newTabs.push(newtab);
   });
   params.tabs = newTabs;
@@ -429,6 +433,7 @@ function showModal(params) {
   let adapted = adaptNavigationStyleToScreenStyle(params);
   adapted = adaptNavigationParams(adapted);
   adapted.overrideBackPress = params.overrideBackPress;
+  adapted.timestamp = Date.now();
 
   newPlatformSpecific.showModal(adapted);
 }

src/deprecated/platformSpecificDeprecated.ios.js

@@ -82,7 +82,7 @@ function startTabBasedApp(params) {
                     passProps={{
                     navigatorID: tab.navigationParams.navigatorID,
                     screenInstanceID: tab.navigationParams.screenInstanceID,
-                    navigatorEventID: tab.navigationParams.navigatorEventID
+                    navigatorEventID: tab.navigationParams.navigatorEventID,
                   }}
                     style={tab.navigationParams.navigatorStyle}
                     leftButtons={tab.navigationParams.navigatorButtons.leftButtons}
@@ -97,6 +97,7 @@ function startTabBasedApp(params) {
     }
   });
   savePassProps(params);
+  _.set(params, 'passProps.timestamp', Date.now());
 
   ControllerRegistry.registerController(controllerID, () => Controller);
   ControllerRegistry.setRootController(controllerID, params.animationType, params.passProps || {});
@@ -247,14 +248,16 @@ function navigatorPush(navigator, params) {
     backButtonTitle: params.backButtonTitle,
     backButtonHidden: params.backButtonHidden,
     leftButtons: navigatorButtons.leftButtons,
-    rightButtons: navigatorButtons.rightButtons
+    rightButtons: navigatorButtons.rightButtons,
+    timestamp: Date.now()
   });
 }
 
 function navigatorPop(navigator, params) {
   Controllers.NavigationControllerIOS(navigator.navigatorID).pop({
     animated: params.animated,
-    animationType: params.animationType
+    animationType: params.animationType,
+    timestamp: Date.now()
   });
 }
 
@@ -457,6 +460,7 @@ function showModal(params) {
   passProps.navigatorID = navigatorID;
   passProps.screenInstanceID = screenInstanceID;
   passProps.navigatorEventID = navigatorEventID;
+  passProps.timestamp = Date.now();
 
   params.navigationParams = {
     screenInstanceID,