Component type (#5820)

Send componentType field in componentDidAppear and componentDidDisappear events.

The new field is either:
- TopBarButton
- TopBarTitle
- TopBarBackground
- Component

e2e/StaticLifecycleEvents.test.js

@@ -11,15 +11,15 @@ describe('static lifecycle events', () => {
   });
 
   it('didAppear didDisappear', async () => {
-    await expect(elementByLabel('componentDidAppear | EventsOverlay')).toBeVisible();
+    await expect(elementByLabel('componentDidAppear | EventsOverlay | Component')).toBeVisible();
     await elementById(TestIDs.PUSH_BTN).tap();
-    await expect(elementByLabel('componentDidAppear | Pushed')).toBeVisible();
-    await expect(elementByLabel('componentDidDisappear | EventsScreen')).toBeVisible();
+    await expect(elementByLabel('componentDidAppear | Pushed | Component')).toBeVisible();
+    await expect(elementByLabel('componentDidDisappear | EventsScreen | Component')).toBeVisible();
   });
 
   it('pushing and popping screen dispatch static event', async () => {
     await expect(elementByLabel('Static Lifecycle Events Overlay')).toBeVisible();
-    await expect(elementByLabel('componentDidAppear | EventsOverlay')).toBeVisible();
+    await expect(elementByLabel('componentDidAppear | EventsOverlay | Component')).toBeVisible();
     await elementById(TestIDs.PUSH_BTN).tap();
     await expect(elementByLabel('push')).toBeVisible();
     await elementById(TestIDs.POP_BTN).tap();
@@ -40,4 +40,24 @@ describe('static lifecycle events', () => {
     await expect(elementByLabel('Overlay Unmounted')).toBeVisible();
     await elementByLabel('OK').tap();
   });
+
+  it('top bar buttons didAppear didDisappear', async () => {
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await elementById(TestIDs.PUSH_OPTIONS_BUTTON).tap();
+    await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap();
+    await elementById(TestIDs.GOTO_BUTTONS_SCREEN).tap();
+    await expect(elementByLabel('componentDidAppear | CustomRoundedButton | TopBarButton')).toBeVisible();
+    await elementById(TestIDs.RESET_BUTTONS).tap();
+    await expect(elementByLabel('componentDidDisappear | CustomRoundedButton | TopBarButton')).toBeVisible();
+  });
+
+  it('top bar title didAppear didDisappear', async () => {
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await elementById(TestIDs.PUSH_OPTIONS_BUTTON).tap();
+    await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap();
+    await elementById(TestIDs.SET_REACT_TITLE_VIEW).tap();
+    await expect(elementByLabel('componentDidAppear | ReactTitleView | TopBarTitle')).toBeVisible();
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await expect(elementByLabel('componentDidDisappear | ReactTitleView | TopBarTitle')).toBeVisible();
+  });
 });

lib/android/app/src/main/java/com/reactnativenavigation/parse/LayoutFactory.java

@@ -11,7 +11,7 @@ import com.reactnativenavigation.presentation.Presenter;
 import com.reactnativenavigation.presentation.RenderChecker;
 import com.reactnativenavigation.presentation.SideMenuPresenter;
 import com.reactnativenavigation.presentation.StackPresenter;
-import com.reactnativenavigation.react.EventEmitter;
+import com.reactnativenavigation.react.events.EventEmitter;
 import com.reactnativenavigation.utils.Assertions;
 import com.reactnativenavigation.utils.ImageLoader;
 import com.reactnativenavigation.utils.TypefaceLoader;

lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java

@@ -1,5 +1,6 @@
 package com.reactnativenavigation.react;
 
+import com.reactnativenavigation.react.events.EventEmitter;
 import com.reactnativenavigation.utils.LaunchArgsParser;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.bridge.Arguments;

lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationReactInitializer.java

@@ -1,10 +1,11 @@
 package com.reactnativenavigation.react;
 
-import androidx.annotation.NonNull;
-
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.bridge.ReactContext;
 import com.reactnativenavigation.NavigationActivity;
+import com.reactnativenavigation.react.events.EventEmitter;
+
+import androidx.annotation.NonNull;
 
 public class NavigationReactInitializer implements ReactInstanceManager.ReactInstanceEventListener {
 

lib/android/app/src/main/java/com/reactnativenavigation/react/ReactComponentViewCreator.java

@@ -4,7 +4,6 @@ import android.app.Activity;
 
 import com.facebook.react.ReactInstanceManager;
 import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
-import com.reactnativenavigation.viewcontrollers.IReactView;
 
 public class ReactComponentViewCreator implements ReactViewCreator {
 	private ReactInstanceManager reactInstanceManager;
@@ -14,7 +13,7 @@ public class ReactComponentViewCreator implements ReactViewCreator {
 	}
 
 	@Override
-	public IReactView create(final Activity activity, final String componentId, final String componentName) {
+	public ReactView create(final Activity activity, final String componentId, final String componentName) {
 		return new ReactView(activity, reactInstanceManager, componentId, componentName);
 	}
 }

lib/android/app/src/main/java/com/reactnativenavigation/react/ReactView.java

@@ -3,7 +3,6 @@ package com.reactnativenavigation.react;
 import android.annotation.SuppressLint;
 import android.content.Context;
 import android.os.Bundle;
-import androidx.annotation.RestrictTo;
 import android.view.MotionEvent;
 
 import com.facebook.react.ReactInstanceManager;
@@ -13,6 +12,8 @@ import com.facebook.react.uimanager.JSTouchDispatcher;
 import com.facebook.react.uimanager.UIManagerModule;
 import com.facebook.react.uimanager.events.EventDispatcher;
 import com.reactnativenavigation.interfaces.ScrollEventListener;
+import com.reactnativenavigation.react.events.ComponentType;
+import com.reactnativenavigation.react.events.EventEmitter;
 import com.reactnativenavigation.viewcontrollers.IReactView;
 import com.reactnativenavigation.views.Renderable;
 import com.reactnativenavigation.views.element.Element;
@@ -20,6 +21,8 @@ import com.reactnativenavigation.views.element.Element;
 import java.util.ArrayList;
 import java.util.List;
 
+import androidx.annotation.RestrictTo;
+
 @SuppressLint("ViewConstructor")
 public class ReactView extends ReactRootView implements IReactView, Renderable {
 
@@ -64,19 +67,17 @@ public class ReactView extends ReactRootView implements IReactView, Renderable {
 		unmountReactApplication();
 	}
 
-	@Override
-	public void sendComponentStart() {
+	public void sendComponentStart(ComponentType type) {
         ReactContext currentReactContext = reactInstanceManager.getCurrentReactContext();
         if (currentReactContext != null) {
-            new EventEmitter(currentReactContext).emitComponentDidAppear(componentId, componentName);
+            new EventEmitter(currentReactContext).emitComponentDidAppear(componentId, componentName, type);
         }
 	}
 
-	@Override
-	public void sendComponentStop() {
+	public void sendComponentStop(ComponentType type) {
         ReactContext currentReactContext = reactInstanceManager.getCurrentReactContext();
         if (currentReactContext != null) {
-            new EventEmitter(currentReactContext).emitComponentDidDisappear(componentId, componentName);
+            new EventEmitter(currentReactContext).emitComponentDidDisappear(componentId, componentName, type);
         }
 	}
 

lib/android/app/src/main/java/com/reactnativenavigation/react/events/ComponentType.java

@@ -0,0 +1,18 @@
+package com.reactnativenavigation.react.events;
+
+public enum ComponentType {
+    Component("Component"),
+    Button("TopBarButton"),
+    Title("TopBarTitle"),
+    Background("TopBarBackground");
+
+    private String name;
+
+    public String getName() {
+        return name;
+    }
+
+    ComponentType(String name) {
+        this.name = name;
+    }
+    }

lib/android/app/src/main/java/com/reactnativenavigation/react/EventEmitter.java → lib/android/app/src/main/java/com/reactnativenavigation/react/events/EventEmitter.java

@@ -1,4 +1,4 @@
-package com.reactnativenavigation.react;
+package com.reactnativenavigation.react.events;
 
 import android.util.Log;
 
@@ -28,20 +28,22 @@ public class EventEmitter {
     }
 
     public void appLaunched() {
-        emit(AppLaunched);
+        emit(EventEmitter.AppLaunched, Arguments.createMap());
     }
 
-    public void emitComponentDidDisappear(String id, String componentName) {
+    public void emitComponentDidDisappear(String id, String componentName, ComponentType type) {
         WritableMap event = Arguments.createMap();
         event.putString("componentId", id);
         event.putString("componentName", componentName);
+        event.putString("componentType", type.getName());
         emit(ComponentDidDisappear, event);
     }
 
-    public void emitComponentDidAppear(String id, String componentName) {
+    public void emitComponentDidAppear(String id, String componentName, ComponentType type) {
         WritableMap event = Arguments.createMap();
         event.putString("componentId", id);
         event.putString("componentName", componentName);
+        event.putString("componentType", type.getName());
         emit(ComponentDidAppear, event);
     }
 
@@ -80,10 +82,6 @@ public class EventEmitter {
         emit(ScreenPopped, event);
     }
 
-    private void emit(String eventName) {
-        emit(eventName, Arguments.createMap());
-    }
-
     private void emit(String eventName, WritableMap data) {
         if (reactContext == null) {
             Log.e("RNN", "Could not send event " + eventName + ". React context is null!");

lib/android/app/src/main/java/com/reactnativenavigation/utils/NativeCommandListener.java

@@ -3,7 +3,7 @@ package com.reactnativenavigation.utils;
 import androidx.annotation.Nullable;
 
 import com.facebook.react.bridge.Promise;
-import com.reactnativenavigation.react.EventEmitter;
+import com.reactnativenavigation.react.events.EventEmitter;
 
 public class NativeCommandListener extends CommandListenerAdapter {
     private String commandId;

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/IReactView.java

@@ -14,10 +14,6 @@ public interface IReactView extends Destroyable {
 
     View asView();
 
-    void sendComponentStart();
-
-    void sendComponentStop();
-
     void sendOnNavigationButtonPressed(String buttonId);
 
     ScrollEventListener getScrollEventListener();

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/TitleBarButtonController.java

@@ -1,13 +1,9 @@
-    package com.reactnativenavigation.viewcontrollers;
+package com.reactnativenavigation.viewcontrollers;
 
 import android.annotation.SuppressLint;
 import android.app.Activity;
 import android.graphics.Color;
 import android.graphics.drawable.Drawable;
-import androidx.annotation.NonNull;
-import androidx.annotation.RestrictTo;
-import androidx.appcompat.widget.ActionMenuView;
-import androidx.appcompat.widget.Toolbar;
 import android.view.Menu;
 import android.view.MenuItem;
 import android.widget.ImageButton;
@@ -16,6 +12,7 @@ import android.widget.TextView;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Button;
 import com.reactnativenavigation.parse.params.Text;
+import com.reactnativenavigation.react.events.ComponentType;
 import com.reactnativenavigation.utils.ArrayUtils;
 import com.reactnativenavigation.utils.ButtonPresenter;
 import com.reactnativenavigation.utils.ImageLoader;
@@ -28,6 +25,11 @@ import com.reactnativenavigation.views.titlebar.TitleBarReactButtonView;
 import java.util.Collections;
 import java.util.List;
 
+import androidx.annotation.NonNull;
+import androidx.annotation.RestrictTo;
+import androidx.appcompat.widget.ActionMenuView;
+import androidx.appcompat.widget.Toolbar;
+
 public class TitleBarButtonController extends ViewController<TitleBarReactButtonView> implements MenuItem.OnMenuItemClickListener {
     public interface OnClickListener {
         void onPress(String buttonId);
@@ -69,13 +71,13 @@ public class TitleBarButtonController extends ViewController<TitleBarReactButton
     @SuppressLint("MissingSuperCall")
     @Override
     public void onViewAppeared() {
-        getView().sendComponentStart();
+        getView().sendComponentStart(ComponentType.Button);
     }
 
     @SuppressLint("MissingSuperCall")
     @Override
     public void onViewDisappear() {
-        getView().sendComponentStop();
+        getView().sendComponentStop(ComponentType.Button);
     }
 
     @Override

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/TitleBarReactViewController.java

@@ -4,6 +4,7 @@ import android.app.Activity;
 
 import com.reactnativenavigation.parse.Component;
 import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.react.events.ComponentType;
 import com.reactnativenavigation.utils.CompatUtils;
 import com.reactnativenavigation.views.titlebar.TitleBarReactView;
 import com.reactnativenavigation.views.titlebar.TitleBarReactViewCreator;
@@ -23,13 +24,13 @@ public class TitleBarReactViewController extends ViewController<TitleBarReactVie
         super.onViewAppeared();
         if (!isDestroyed()) {
             runOnPreDraw(view -> view.setLayoutParams(view.getLayoutParams()));
-            getView().sendComponentStart();
+            getView().sendComponentStart(ComponentType.Title);
         }
     }
 
     @Override
     public void onViewDisappear() {
-        getView().sendComponentStop();
+        getView().sendComponentStop(ComponentType.Title);
         super.onViewDisappear();
     }
 

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

@@ -12,7 +12,7 @@ import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.presentation.BottomTabPresenter;
 import com.reactnativenavigation.presentation.BottomTabsPresenter;
 import com.reactnativenavigation.presentation.Presenter;
-import com.reactnativenavigation.react.EventEmitter;
+import com.reactnativenavigation.react.events.EventEmitter;
 import com.reactnativenavigation.utils.CommandListener;
 import com.reactnativenavigation.utils.ImageLoader;
 import com.reactnativenavigation.viewcontrollers.ChildControllersRegistry;

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/externalcomponent/ExternalComponentViewController.java

@@ -1,15 +1,14 @@
 package com.reactnativenavigation.viewcontrollers.externalcomponent;
 
 import android.app.Activity;
-import androidx.fragment.app.FragmentActivity;
-import androidx.core.view.ViewCompat;
 import android.view.View;
 
 import com.facebook.react.ReactInstanceManager;
 import com.reactnativenavigation.parse.ExternalComponent;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.presentation.ExternalComponentPresenter;
-import com.reactnativenavigation.react.EventEmitter;
+import com.reactnativenavigation.react.events.ComponentType;
+import com.reactnativenavigation.react.events.EventEmitter;
 import com.reactnativenavigation.utils.CoordinatorLayoutUtils;
 import com.reactnativenavigation.utils.StatusBarUtils;
 import com.reactnativenavigation.viewcontrollers.NoOpYellowBoxDelegate;
@@ -17,6 +16,9 @@ import com.reactnativenavigation.viewcontrollers.ViewController;
 import com.reactnativenavigation.views.BehaviourDelegate;
 import com.reactnativenavigation.views.ExternalComponentLayout;
 
+import androidx.core.view.ViewCompat;
+import androidx.fragment.app.FragmentActivity;
+
 import static com.reactnativenavigation.utils.ObjectUtils.perform;
 
 public class ExternalComponentViewController extends ViewController<ExternalComponentLayout> {
@@ -60,13 +62,13 @@ public class ExternalComponentViewController extends ViewController<ExternalComp
     @Override
     public void onViewAppeared() {
         super.onViewAppeared();
-        emitter.emitComponentDidAppear(getId(), externalComponent.name.get());
+        emitter.emitComponentDidAppear(getId(), externalComponent.name.get(), ComponentType.Component);
     }
 
     @Override
     public void onViewDisappear() {
         super.onViewDisappear();
-        emitter.emitComponentDidDisappear(getId(), externalComponent.name.get());
+        emitter.emitComponentDidDisappear(getId(), externalComponent.name.get(), ComponentType.Component);
     }
 
     @Override

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java

@@ -7,7 +7,7 @@ import android.view.ViewGroup;
 
 import com.reactnativenavigation.anim.ModalAnimator;
 import com.reactnativenavigation.parse.Options;
-import com.reactnativenavigation.react.EventEmitter;
+import com.reactnativenavigation.react.events.EventEmitter;
 import com.reactnativenavigation.utils.CommandListener;
 import com.reactnativenavigation.utils.CommandListenerAdapter;
 import com.reactnativenavigation.viewcontrollers.ViewController;

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/navigator/Navigator.java

@@ -8,7 +8,7 @@ import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.presentation.OverlayManager;
 import com.reactnativenavigation.presentation.Presenter;
 import com.reactnativenavigation.presentation.RootPresenter;
-import com.reactnativenavigation.react.EventEmitter;
+import com.reactnativenavigation.react.events.EventEmitter;
 import com.reactnativenavigation.utils.CommandListener;
 import com.reactnativenavigation.utils.CommandListenerAdapter;
 import com.reactnativenavigation.utils.CompatUtils;

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/StackController.java

@@ -9,7 +9,7 @@ import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.presentation.Presenter;
 import com.reactnativenavigation.presentation.StackPresenter;
 import com.reactnativenavigation.react.Constants;
-import com.reactnativenavigation.react.EventEmitter;
+import com.reactnativenavigation.react.events.EventEmitter;
 import com.reactnativenavigation.utils.CommandListener;
 import com.reactnativenavigation.utils.CommandListenerAdapter;
 import com.reactnativenavigation.utils.CompatUtils;

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/StackControllerBuilder.java

@@ -6,7 +6,7 @@ import com.reactnativenavigation.anim.NavigationAnimator;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.presentation.Presenter;
 import com.reactnativenavigation.presentation.StackPresenter;
-import com.reactnativenavigation.react.EventEmitter;
+import com.reactnativenavigation.react.events.EventEmitter;
 import com.reactnativenavigation.viewcontrollers.ChildControllersRegistry;
 import com.reactnativenavigation.viewcontrollers.ViewController;
 import com.reactnativenavigation.viewcontrollers.topbar.TopBarController;

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/topbar/TopBarBackgroundViewController.java

@@ -4,6 +4,7 @@ import android.app.Activity;
 
 import com.reactnativenavigation.parse.Component;
 import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.react.events.ComponentType;
 import com.reactnativenavigation.utils.CompatUtils;
 import com.reactnativenavigation.viewcontrollers.ViewController;
 import com.reactnativenavigation.viewcontrollers.YellowBoxDelegate;
@@ -28,12 +29,12 @@ public class TopBarBackgroundViewController extends ViewController<TopBarBackgro
     @Override
     public void onViewAppeared() {
         super.onViewAppeared();
-        getView().sendComponentStart();
+        getView().sendComponentStart(ComponentType.Background);
     }
 
     @Override
     public void onViewDisappear() {
-        getView().sendComponentStop();
+        getView().sendComponentStop(ComponentType.Background);
         super.onViewDisappear();
     }
 

lib/android/app/src/main/java/com/reactnativenavigation/views/ComponentLayout.java

@@ -8,7 +8,8 @@ import android.view.View;
 import com.reactnativenavigation.interfaces.ScrollEventListener;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Bool;
-import com.reactnativenavigation.viewcontrollers.IReactView;
+import com.reactnativenavigation.react.ReactView;
+import com.reactnativenavigation.react.events.ComponentType;
 import com.reactnativenavigation.viewcontrollers.TitleBarButtonController;
 import com.reactnativenavigation.views.element.Element;
 import com.reactnativenavigation.views.touch.OverlayTouchDelegate;
@@ -22,10 +23,10 @@ import static com.reactnativenavigation.utils.CoordinatorLayoutUtils.matchParent
 @SuppressLint("ViewConstructor")
 public class ComponentLayout extends CoordinatorLayout implements ReactComponent, TitleBarButtonController.OnClickListener {
 
-    private IReactView reactView;
+    private ReactView reactView;
     private final OverlayTouchDelegate touchDelegate;
 
-    public ComponentLayout(Context context, IReactView reactView) {
+    public ComponentLayout(Context context, ReactView reactView) {
 		super(context);
 		this.reactView = reactView;
         addView(reactView.asView(), matchParentLP());
@@ -47,14 +48,12 @@ public class ComponentLayout extends CoordinatorLayout implements ReactComponent
         reactView.destroy();
     }
 
-	@Override
 	public void sendComponentStart() {
-		reactView.sendComponentStart();
+		reactView.sendComponentStart(ComponentType.Component);
 	}
 
-	@Override
 	public void sendComponentStop() {
-		reactView.sendComponentStop();
+		reactView.sendComponentStop(ComponentType.Component);
 	}
 
     public void applyOptions(Options options) {

lib/android/app/src/main/java/com/reactnativenavigation/views/ComponentViewCreator.java

@@ -4,6 +4,7 @@ import android.app.Activity;
 
 import com.facebook.react.ReactInstanceManager;
 import com.reactnativenavigation.react.ReactComponentViewCreator;
+import com.reactnativenavigation.react.ReactView;
 import com.reactnativenavigation.viewcontrollers.IReactView;
 import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
 
@@ -17,7 +18,7 @@ public class ComponentViewCreator implements ReactViewCreator {
 
 	@Override
 	public IReactView create(Activity activity, String componentId, String componentName) {
-        IReactView reactView = new ReactComponentViewCreator(instanceManager).create(activity, componentId, componentName);
+        ReactView reactView = new ReactComponentViewCreator(instanceManager).create(activity, componentId, componentName);
         return new ComponentLayout(activity, reactView);
 	}
 }

lib/android/app/src/test/java/com/reactnativenavigation/TestUtils.java

@@ -12,7 +12,7 @@ import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Bool;
 import com.reactnativenavigation.presentation.RenderChecker;
 import com.reactnativenavigation.presentation.StackPresenter;
-import com.reactnativenavigation.react.EventEmitter;
+import com.reactnativenavigation.react.events.EventEmitter;
 import com.reactnativenavigation.utils.ImageLoader;
 import com.reactnativenavigation.utils.UiUtils;
 import com.reactnativenavigation.viewcontrollers.ChildControllersRegistry;

lib/android/app/src/test/java/com/reactnativenavigation/mocks/SimpleOverlay.java

@@ -36,16 +36,6 @@ public class SimpleOverlay extends RelativeLayout implements IReactView {
 
     }
 
-    @Override
-    public void sendComponentStart() {
-
-    }
-
-    @Override
-    public void sendComponentStop() {
-
-    }
-
     @Override
     public void sendOnNavigationButtonPressed(String buttonId) {
 

lib/android/app/src/test/java/com/reactnativenavigation/mocks/SimpleViewController.java

@@ -90,16 +90,6 @@ public class SimpleViewController extends ChildController<SimpleViewController.S
 
         }
 
-        @Override
-        public void sendComponentStart() {
-
-        }
-
-        @Override
-        public void sendComponentStop() {
-
-        }
-
         @Override
         public void sendOnNavigationButtonPressed(String buttonId) {
 

lib/android/app/src/test/java/com/reactnativenavigation/mocks/TestComponentLayout.java

@@ -6,20 +6,20 @@ import android.view.View;
 
 import com.reactnativenavigation.interfaces.ScrollEventListener;
 import com.reactnativenavigation.parse.Options;
-import com.reactnativenavigation.viewcontrollers.IReactView;
+import com.reactnativenavigation.react.ReactView;
+import com.reactnativenavigation.react.events.ComponentType;
 import com.reactnativenavigation.viewcontrollers.TitleBarButtonController;
 import com.reactnativenavigation.views.ComponentLayout;
 
 public class TestComponentLayout extends ComponentLayout implements TitleBarButtonController.OnClickListener {
 
-    private IReactView reactView;
+    private ReactView reactView;
 
-    public TestComponentLayout(final Context context, IReactView reactView) {
+    public TestComponentLayout(final Context context, ReactView reactView) {
         super(context, reactView);
         this.reactView = reactView;
     }
 
-
     @Override
     public boolean isReady() {
         return false;
@@ -36,12 +36,12 @@ public class TestComponentLayout extends ComponentLayout implements TitleBarButt
 
     @Override
     public void sendComponentStart() {
-        reactView.sendComponentStart();
+        reactView.sendComponentStart(ComponentType.Component);
     }
 
     @Override
     public void sendComponentStop() {
-        reactView.sendComponentStop();
+        reactView.sendComponentStop(ComponentType.Component);
     }
 
     @Override

lib/android/app/src/test/java/com/reactnativenavigation/mocks/TestComponentViewCreator.java

@@ -2,8 +2,8 @@ package com.reactnativenavigation.mocks;
 
 import android.app.Activity;
 
+import com.reactnativenavigation.react.ReactView;
 import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
-import com.reactnativenavigation.viewcontrollers.IReactView;
 import com.reactnativenavigation.views.ComponentLayout;
 import com.reactnativenavigation.views.ReactComponent;
 
@@ -12,7 +12,7 @@ import static org.mockito.Mockito.spy;
 public class TestComponentViewCreator implements ReactViewCreator {
     @Override
     public ReactComponent create(final Activity activity, final String componentId, final String componentName) {
-        IReactView reactView = spy(new TestReactView(activity));
+        ReactView reactView = spy(new TestReactView(activity));
         return new ComponentLayout(activity, reactView);
     }
 }

lib/android/app/src/test/java/com/reactnativenavigation/mocks/TestReactView.java

@@ -1,46 +1,50 @@
 package com.reactnativenavigation.mocks;
 
 import android.content.Context;
-import androidx.annotation.NonNull;
+import android.os.Bundle;
 import android.view.MotionEvent;
-import android.view.View;
-import android.widget.FrameLayout;
 
+import com.facebook.react.ReactInstanceManager;
 import com.reactnativenavigation.interfaces.ScrollEventListener;
+import com.reactnativenavigation.react.ReactView;
+import com.reactnativenavigation.react.events.ComponentType;
 import com.reactnativenavigation.viewcontrollers.IReactView;
 import com.reactnativenavigation.views.element.Element;
 
 import java.util.Collections;
 import java.util.List;
 
-public class TestReactView extends FrameLayout implements IReactView {
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+public class TestReactView extends ReactView implements IReactView {
 
     public TestReactView(@NonNull Context context) {
-        super(context);
+        super(context, null, "", "");
     }
 
     @Override
-    public boolean isReady() {
-        return false;
+    public void startReactApplication(ReactInstanceManager reactInstanceManager, String moduleName, @Nullable Bundle initialProperties, @Nullable String initialUITemplate) {
+
     }
 
     @Override
-    public View asView() {
-        return this;
+    public void sendComponentStart(ComponentType type) {
+
     }
 
     @Override
-    public void destroy() {
+    public void sendComponentStop(ComponentType type) {
 
     }
 
     @Override
-    public void sendComponentStart() {
-
+    public boolean isReady() {
+        return false;
     }
 
     @Override
-    public void sendComponentStop() {
+    public void destroy() {
 
     }
 

lib/android/app/src/test/java/com/reactnativenavigation/mocks/TopBarButtonCreatorMock.java

@@ -3,8 +3,9 @@ package com.reactnativenavigation.mocks;
 import android.app.Activity;
 
 import com.facebook.react.ReactInstanceManager;
-import com.reactnativenavigation.views.titlebar.TitleBarReactButtonView;
+import com.reactnativenavigation.react.events.ComponentType;
 import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
+import com.reactnativenavigation.views.titlebar.TitleBarReactButtonView;
 
 import static org.mockito.Mockito.mock;
 
@@ -15,12 +16,12 @@ public class TopBarButtonCreatorMock implements ReactViewCreator {
         final ReactInstanceManager reactInstanceManager = mock(ReactInstanceManager.class);
         return new TitleBarReactButtonView(activity, reactInstanceManager, componentId, componentName) {
             @Override
-            public void sendComponentStart() {
+            public void sendComponentStart(ComponentType type) {
 
             }
 
             @Override
-            public void sendComponentStop() {
+            public void sendComponentStop(ComponentType type) {
 
             }
         };

lib/android/app/src/test/java/com/reactnativenavigation/utils/NativeCommandListenerTest.java

@@ -2,7 +2,7 @@ package com.reactnativenavigation.utils;
 
 import com.facebook.react.bridge.Promise;
 import com.reactnativenavigation.BaseTest;
-import com.reactnativenavigation.react.EventEmitter;
+import com.reactnativenavigation.react.events.EventEmitter;
 
 import org.junit.Test;
 import org.mockito.ArgumentCaptor;

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/ExternalComponentViewControllerTest.java

@@ -1,8 +1,6 @@
 package com.reactnativenavigation.viewcontrollers;
 
 import android.app.Activity;
-import androidx.coordinatorlayout.widget.CoordinatorLayout;
-import androidx.fragment.app.FragmentActivity;
 
 import com.facebook.react.ReactInstanceManager;
 import com.reactnativenavigation.BaseTest;
@@ -10,7 +8,8 @@ import com.reactnativenavigation.parse.ExternalComponent;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Text;
 import com.reactnativenavigation.presentation.ExternalComponentPresenter;
-import com.reactnativenavigation.react.EventEmitter;
+import com.reactnativenavigation.react.events.ComponentType;
+import com.reactnativenavigation.react.events.EventEmitter;
 import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalComponentViewController;
 import com.reactnativenavigation.viewcontrollers.externalcomponent.FragmentCreatorMock;
 import com.reactnativenavigation.views.ExternalComponentLayout;
@@ -19,6 +18,9 @@ import org.json.JSONObject;
 import org.junit.Test;
 import org.mockito.Mockito;
 
+import androidx.coordinatorlayout.widget.CoordinatorLayout;
+import androidx.fragment.app.FragmentActivity;
+
 import static org.assertj.core.api.Java6Assertions.assertThat;
 import static org.mockito.Mockito.spy;
 import static org.mockito.Mockito.times;
@@ -66,13 +68,13 @@ public class ExternalComponentViewControllerTest extends BaseTest {
     @Test
     public void onViewAppeared_appearEventIsEmitted() {
         uut.onViewAppeared();
-        verify(emitter).emitComponentDidAppear(uut.getId(), ec.name.get());
+        verify(emitter).emitComponentDidAppear(uut.getId(), ec.name.get(), ComponentType.Component);
     }
 
     @Test
     public void onViewDisappear_disappearEventIsEmitted() {
         uut.onViewDisappear();
-        verify(emitter).emitComponentDidDisappear(uut.getId(), ec.name.get());
+        verify(emitter).emitComponentDidDisappear(uut.getId(), ec.name.get(), ComponentType.Component);
     }
 
     private ExternalComponent createExternalComponent() {

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/TopTabsViewControllerTest.java

@@ -1,7 +1,6 @@
 package com.reactnativenavigation.viewcontrollers;
 
 import android.app.Activity;
-import androidx.annotation.NonNull;
 import android.view.ViewGroup;
 
 import com.reactnativenavigation.BaseTest;
@@ -14,6 +13,7 @@ import com.reactnativenavigation.parse.params.Bool;
 import com.reactnativenavigation.parse.params.Text;
 import com.reactnativenavigation.presentation.ComponentPresenter;
 import com.reactnativenavigation.presentation.Presenter;
+import com.reactnativenavigation.react.events.ComponentType;
 import com.reactnativenavigation.utils.CommandListenerAdapter;
 import com.reactnativenavigation.utils.ViewHelper;
 import com.reactnativenavigation.viewcontrollers.stack.StackController;
@@ -28,6 +28,8 @@ import org.mockito.Mockito;
 import java.util.ArrayList;
 import java.util.List;
 
+import androidx.annotation.NonNull;
+
 import static org.assertj.core.api.Java6Assertions.assertThat;
 import static org.mockito.ArgumentMatchers.any;
 import static org.mockito.ArgumentMatchers.eq;
@@ -133,9 +135,9 @@ public class TopTabsViewControllerTest extends BaseTest {
         TestReactView selectedTab = getActualTabView(1);
 
         uut.switchToTab(1);
-        verify(initialTab, times(1)).sendComponentStop();
-        verify(selectedTab, times(1)).sendComponentStart();
-        verify(selectedTab, times(0)).sendComponentStop();
+        verify(initialTab, times(1)).sendComponentStop(ComponentType.Component);
+        verify(selectedTab, times(1)).sendComponentStart(ComponentType.Component);
+        verify(selectedTab, times(0)).sendComponentStop(ComponentType.Component);
     }
 
     @Test
@@ -146,10 +148,10 @@ public class TopTabsViewControllerTest extends BaseTest {
         uut.switchToTab(1);
         uut.switchToTab(0);
 
-        verify(getActualTabView(0), times(1)).sendComponentStop();
-        verify(getActualTabView(0), times(2)).sendComponentStart();
-        verify(getActualTabView(1), times(1)).sendComponentStart();
-        verify(getActualTabView(1), times(1)).sendComponentStop();
+        verify(getActualTabView(0), times(1)).sendComponentStop(ComponentType.Component);
+        verify(getActualTabView(0), times(2)).sendComponentStart(ComponentType.Component);
+        verify(getActualTabView(1), times(1)).sendComponentStart(ComponentType.Component);
+        verify(getActualTabView(1), times(1)).sendComponentStop(ComponentType.Component);
     }
 
     @Test

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/bottomtabs/BottomTabsControllerTest.java

@@ -18,7 +18,7 @@ import com.reactnativenavigation.parse.params.Text;
 import com.reactnativenavigation.presentation.BottomTabPresenter;
 import com.reactnativenavigation.presentation.BottomTabsPresenter;
 import com.reactnativenavigation.presentation.Presenter;
-import com.reactnativenavigation.react.EventEmitter;
+import com.reactnativenavigation.react.events.EventEmitter;
 import com.reactnativenavigation.utils.CommandListenerAdapter;
 import com.reactnativenavigation.utils.ImageLoader;
 import com.reactnativenavigation.utils.OptionHelper;

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/modal/ModalStackTest.java

@@ -9,7 +9,7 @@ import com.reactnativenavigation.*;
 import com.reactnativenavigation.anim.ModalAnimator;
 import com.reactnativenavigation.mocks.SimpleViewController;
 import com.reactnativenavigation.parse.Options;
-import com.reactnativenavigation.react.EventEmitter;
+import com.reactnativenavigation.react.events.EventEmitter;
 import com.reactnativenavigation.utils.CommandListener;
 import com.reactnativenavigation.utils.CommandListenerAdapter;
 import com.reactnativenavigation.viewcontrollers.ChildControllersRegistry;

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/navigator/NavigatorTest.java

@@ -19,7 +19,7 @@ import com.reactnativenavigation.presentation.BottomTabsPresenter;
 import com.reactnativenavigation.presentation.OverlayManager;
 import com.reactnativenavigation.presentation.Presenter;
 import com.reactnativenavigation.presentation.RootPresenter;
-import com.reactnativenavigation.react.EventEmitter;
+import com.reactnativenavigation.react.events.EventEmitter;
 import com.reactnativenavigation.utils.CommandListener;
 import com.reactnativenavigation.utils.CommandListenerAdapter;
 import com.reactnativenavigation.utils.CompatUtils;

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/stack/StackControllerTest.java

@@ -22,7 +22,7 @@ import com.reactnativenavigation.parse.params.Bool;
 import com.reactnativenavigation.parse.params.Text;
 import com.reactnativenavigation.presentation.RenderChecker;
 import com.reactnativenavigation.presentation.StackPresenter;
-import com.reactnativenavigation.react.EventEmitter;
+import com.reactnativenavigation.react.events.EventEmitter;
 import com.reactnativenavigation.utils.CommandListenerAdapter;
 import com.reactnativenavigation.utils.StatusBarUtils;
 import com.reactnativenavigation.utils.TitleBarHelper;

lib/ios/RNNBasePresenter.h

@@ -30,6 +30,10 @@ typedef void (^RNNReactViewReadyCompletionBlock)(void);
 
 - (void)viewDidLayoutSubviews;
 
+- (void)componentDidAppear;
+
+- (void)componentDidDisappear;
+
 - (UIStatusBarStyle)getStatusBarStyle:(RNNNavigationOptions *)resolvedOptions;
 
 - (UIInterfaceOrientationMask)getOrientation:(RNNNavigationOptions *)options;

lib/ios/RNNBasePresenter.m

@@ -28,6 +28,14 @@
     _defaultOptions = defaultOptions;
 }
 
+- (void)componentDidAppear {
+    
+}
+
+- (void)componentDidDisappear {
+    
+}
+
 - (void)applyOptionsOnInit:(RNNNavigationOptions *)initialOptions {
     UIViewController* viewController = self.boundViewController;
     RNNNavigationOptions *withDefault = [initialOptions withDefault:[self defaultOptions]];

lib/ios/RNNBridgeManager.m

@@ -87,7 +87,7 @@
 - (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge {
 	RNNEventEmitter *eventEmitter = [[RNNEventEmitter alloc] init];
 
-	id<RNNComponentViewCreator> rootViewCreator = [[RNNReactRootViewCreator alloc] initWithBridge:bridge];
+	id<RNNComponentViewCreator> rootViewCreator = [[RNNReactRootViewCreator alloc] initWithBridge:bridge eventEmitter:eventEmitter];
 	_componentRegistry = [[RNNReactComponentRegistry alloc] initWithCreator:rootViewCreator];
 	RNNControllerFactory *controllerFactory = [[RNNControllerFactory alloc] initWithRootViewCreator:rootViewCreator eventEmitter:eventEmitter store:_store componentRegistry:_componentRegistry andBridge:bridge bottomTabsAttachModeFactory:[BottomTabsAttachModeFactory new]];
 

lib/ios/RNNComponentPresenter.m

@@ -4,9 +4,10 @@
 #import "RCTConvert+Modal.h"
 #import "RNNTitleViewHelper.h"
 #import "UIViewController+LayoutProtocol.h"
+#import "RNNReactTitleView.h"
 
 @interface RNNComponentPresenter() {
-	RNNReactView* _customTitleView;
+	RNNReactTitleView* _customTitleView;
 	RNNTitleViewHelper* _titleViewHelper;
 	RNNReactComponentRegistry* _componentRegistry;
 }
@@ -26,6 +27,25 @@
 	_navigationButtons = [[RNNNavigationButtons alloc] initWithViewController:self.boundViewController componentRegistry:_componentRegistry];
 }
 
+- (void)componentDidAppear {
+    RNNReactView* component = (RNNReactView *)self.boundViewController.view;
+    if ([component respondsToSelector:@selector(componentDidAppear)]) {
+        [component componentDidAppear];
+    }
+    [_customTitleView componentDidAppear];
+    [_navigationButtons componentDidAppear];
+}
+
+- (void)componentDidDisappear {
+    RNNReactView* component = (RNNReactView *)self.boundViewController.view;
+    if ([component respondsToSelector:@selector(componentDidDisappear)]) {
+        [component componentDidDisappear];
+    }
+    
+    [_customTitleView componentDidDisappear];
+    [_navigationButtons componentDidDisappear];
+}
+
 - (void)applyOptionsOnWillMoveToParentViewController:(RNNNavigationOptions *)options {
 	[super applyOptionsOnWillMoveToParentViewController:options];
 }
@@ -156,7 +176,8 @@
 }
 
 - (void)removeTitleComponentIfNeeded:(RNNNavigationOptions *)options {
-	if (options.topBar.title.text.hasValue && !options.topBar.component.hasValue) {
+	if (options.topBar.title.text.hasValue) {
+        [_customTitleView componentDidDisappear];
 		[_customTitleView removeFromSuperview];
 		_customTitleView = nil;
 	}
@@ -175,7 +196,7 @@
 	}
 	
 	if (options.topBar.title.component.name.hasValue) {
-		_customTitleView = [_componentRegistry createComponentIfNotExists:options.topBar.title.component parentComponentId:viewController.layoutInfo.componentId reactViewReadyBlock:readyBlock];
+        _customTitleView = (RNNReactTitleView *)[_componentRegistry createComponentIfNotExists:options.topBar.title.component parentComponentId:viewController.layoutInfo.componentId componentType:RNNComponentTypeTopBarTitle reactViewReadyBlock:readyBlock];
 		_customTitleView.backgroundColor = UIColor.clearColor;
 		NSString* alignment = [options.topBar.title.component.alignment getWithDefaultValue:@""];
 		[_customTitleView setAlignment:alignment inFrame:viewController.navigationController.navigationBar.frame];
@@ -183,6 +204,7 @@
 		
 		viewController.navigationItem.titleView = nil;
 		viewController.navigationItem.titleView = _customTitleView;
+        [_customTitleView componentDidAppear];
 	} else {
 		[_customTitleView removeFromSuperview];
 		if (readyBlock) {

lib/ios/RNNComponentViewController.m

@@ -29,18 +29,14 @@
 	[self.parentViewController onChildWillAppear];
 }
 
--(void)viewDidAppear:(BOOL)animated {
-	[super viewDidAppear:animated];
-	[self.eventEmitter sendComponentDidAppear:self.layoutInfo.componentId componentName:self.layoutInfo.name];
-}
-
-- (void)viewWillDisappear:(BOOL)animated {
-	[super viewWillDisappear:animated];
+- (void)viewDidAppear:(BOOL)animated {
+    [super viewDidAppear:animated];
+    [self componentDidAppear];
 }
 
 - (void)viewDidDisappear:(BOOL)animated {
-	[super viewDidDisappear:animated];
-	[self.eventEmitter sendComponentDidDisappear:self.layoutInfo.componentId componentName:self.layoutInfo.name];
+    [super viewDidDisappear:animated];
+    [self componentDidDisappear];
 }
 
 - (void)loadView {
@@ -56,7 +52,10 @@
 
 - (void)renderReactViewIfNeeded {
     if (!self.isViewLoaded) {
-        self.view = [self.creator createRootView:self.layoutInfo.name rootViewId:self.layoutInfo.componentId reactViewReadyBlock:^{
+        self.view = [self.creator createRootView:self.layoutInfo.name
+                                      rootViewId:self.layoutInfo.componentId
+                                          ofType:RNNComponentTypeComponent
+                             reactViewReadyBlock:^{
             [self->_presenter renderComponents:self.resolveOptions perform:^{
                 [self readyForPresentation];
             }];

lib/ios/RNNComponentViewCreator.h

@@ -2,14 +2,20 @@
 #import <UIKit/UIKit.h>
 #import "RNNComponentOptions.h"
 #import "RNNReactView.h"
+#import "RNNReactButtonView.h"
+#import "RNNReactTitleView.h"
+#import "RNNReactBackgroundView.h"
 
-@protocol RNNComponentViewCreator
-
-- (RNNReactView*)createRootView:(NSString*)name rootViewId:(NSString*)rootViewId reactViewReadyBlock:(RNNReactViewReadyCompletionBlock)reactViewReadyBlock;
+typedef enum RNNComponentType {
+    RNNComponentTypeComponent,
+    RNNComponentTypeTopBarTitle,
+    RNNComponentTypeTopBarButton,
+    RNNComponentTypeTopBarBackground
+} RNNComponentType;
 
-- (UIView*)createRootViewFromComponentOptions:(RNNComponentOptions*)componentOptions;
+@protocol RNNComponentViewCreator
 
-- (UIView*)createRootViewFromComponentOptions:(RNNComponentOptions*)componentOptions reactViewReadyBlock:(RNNReactViewReadyCompletionBlock)reactViewReadyBlock;
+- (RNNReactView*)createRootView:(NSString*)name rootViewId:(NSString*)rootViewId ofType:(RNNComponentType)componentType reactViewReadyBlock:(RNNReactViewReadyCompletionBlock)reactViewReadyBlock;
 
 @end
 

lib/ios/RNNEventEmitter.h

@@ -1,5 +1,4 @@
 #import <Foundation/Foundation.h>
-
 #import <React/RCTEventEmitter.h>
 #import <React/RCTBridgeModule.h>
 
@@ -7,9 +6,9 @@
 
 - (void)sendOnAppLaunched;
 
-- (void)sendComponentDidAppear:(NSString*)componentId componentName:(NSString*)componentName;
+- (void)sendComponentDidAppear:(NSString*)componentId componentName:(NSString*)componentName componentType:(NSString *)componentType;
 
-- (void)sendComponentDidDisappear:(NSString*)componentId componentName:(NSString*)componentName;
+- (void)sendComponentDidDisappear:(NSString *)componentId componentName:(NSString *)componentName componentType:(NSString *)componentType;
 
 - (void)sendOnNavigationButtonPressed:(NSString*)componentId buttonId:(NSString*)buttonId;
 

lib/ios/RNNEventEmitter.m

@@ -44,17 +44,19 @@ static NSString* const ScreenPopped             = @"RNN.ScreenPopped";
     }
 }
 
-- (void)sendComponentDidAppear:(NSString *)componentId componentName:(NSString *)componentName {
+- (void)sendComponentDidAppear:(NSString *)componentId componentName:(NSString *)componentName componentType:(NSString *)componentType {
     [self send:ComponentDidAppear body:@{
         @"componentId":componentId,
-        @"componentName": componentName
+        @"componentName": componentName,
+        @"componentType": componentType
     }];
 }
 
-- (void)sendComponentDidDisappear:(NSString *)componentId componentName:(NSString *)componentName{
+- (void)sendComponentDidDisappear:(NSString *)componentId componentName:(NSString *)componentName componentType:(NSString *)componentType {
     [self send:ComponentDidDisappear body:@{
         @"componentId":componentId,
-        @"componentName": componentName
+        @"componentName": componentName,
+        @"componentType": componentType
     }];
 }
 

lib/ios/RNNNavigationButtons.h

@@ -10,6 +10,10 @@
 
 -(void)applyLeftButtons:(NSArray*)leftButtons rightButtons:(NSArray*)rightButtons defaultLeftButtonStyle:(RNNButtonOptions *)defaultLeftButtonStyle defaultRightButtonStyle:(RNNButtonOptions *)defaultRightButtonStyle;
 
+- (void)componentDidAppear;
+
+- (void)componentDidDisappear;
+
 @end
 
 

lib/ios/RNNNavigationButtons.m

@@ -63,6 +63,31 @@
         [self clearPreviousButtonViews:barButtonItems oldButtons:self.viewController.navigationItem.rightBarButtonItems];
         [self.viewController.navigationItem setRightBarButtonItems:barButtonItems animated:animated];
     }
+    
+    [self notifyButtonsDidAppear:barButtonItems];
+}
+
+- (NSArray *)currentButtons {
+    NSArray* currentButtons = [self.viewController.navigationItem.leftBarButtonItems arrayByAddingObjectsFromArray:self.viewController.navigationItem.rightBarButtonItems];
+    return currentButtons;
+}
+
+- (void)componentDidAppear {
+    for (RNNUIBarButtonItem* barButtonItem in [self currentButtons]) {
+        [barButtonItem notifyDidAppear];
+    }
+}
+
+- (void)componentDidDisappear {
+    for (RNNUIBarButtonItem* barButtonItem in [self currentButtons]) {
+        [barButtonItem notifyDidDisappear];
+    }
+}
+
+- (void)notifyButtonsDidAppear:(NSArray *)barButtonItems {
+    for (RNNUIBarButtonItem* barButtonItem in barButtonItems) {
+        [barButtonItem notifyDidAppear];
+    }
 }
 
 - (void)clearPreviousButtonViews:(NSArray<UIBarButtonItem *> *)newButtons oldButtons:(NSArray<UIBarButtonItem *> *)oldButtons {
@@ -71,6 +96,7 @@
     for (UIBarButtonItem* buttonItem in removedButtons) {
         RNNReactView* reactView = buttonItem.customView;
         if ([reactView isKindOfClass:[RNNReactView class]]) {
+            [reactView componentDidDisappear];
             [_componentRegistry removeChildComponent:reactView.componentId];
         }
     }
@@ -117,7 +143,7 @@
         componentOptions.componentId = [[Text alloc] initWithValue:component[@"componentId"]];
         componentOptions.name = [[Text alloc] initWithValue:component[@"name"]];
         
-        RNNReactView *view = [_componentRegistry createComponentIfNotExists:componentOptions parentComponentId:self.viewController.layoutInfo.componentId reactViewReadyBlock:nil];
+        RNNReactButtonView *view = [_componentRegistry createComponentIfNotExists:componentOptions parentComponentId:self.viewController.layoutInfo.componentId componentType:RNNComponentTypeTopBarButton reactViewReadyBlock:nil];
         barButtonItem = [[RNNUIBarButtonItem alloc] init:buttonId withCustomView:view];
     } else if (iconImage) {
         barButtonItem = [[RNNUIBarButtonItem alloc] init:buttonId withIcon:iconImage];

lib/ios/RNNReactBackgroundView.h

@@ -0,0 +1,5 @@
+#import "RNNReactTitleView.h"
+
+@interface RNNReactBackgroundView : RNNReactTitleView
+
+@end

lib/ios/RNNReactBackgroundView.m

@@ -0,0 +1,9 @@
+#import "RNNReactBackgroundView.h"
+
+@implementation RNNReactBackgroundView
+
+- (NSString *)componentType {
+	return ComponentTypeBackground;
+}
+
+@end

lib/ios/RNNReactButtonView.h

@@ -0,0 +1,5 @@
+#import "RNNReactView.h"
+
+@interface RNNReactButtonView : RNNReactView
+
+@end

lib/ios/RNNReactButtonView.m

@@ -0,0 +1,9 @@
+#import "RNNReactButtonView.h"
+
+@implementation RNNReactButtonView
+
+- (NSString *)componentType {
+    return ComponentTypeButton;
+}
+
+@end

lib/ios/RNNReactComponentRegistry.h

@@ -1,5 +1,6 @@
 #import <Foundation/Foundation.h>
-#import "RNNReactView.h"
+#import "RNNReactButtonView.h"
+#import "RNNReactTitleView.h"
 #import "RNNComponentOptions.h"
 #import "RNNComponentViewCreator.h"
 
@@ -7,7 +8,7 @@
 
 - (instancetype)initWithCreator:(id<RNNComponentViewCreator>)creator;
 
-- (RNNReactView *)createComponentIfNotExists:(RNNComponentOptions *)component parentComponentId:(NSString *)parentComponentId reactViewReadyBlock:(RNNReactViewReadyCompletionBlock)reactViewReadyBlock;
+- (RNNReactButtonView *)createComponentIfNotExists:(RNNComponentOptions *)component parentComponentId:(NSString *)parentComponentId componentType:(RNNComponentType)componentType reactViewReadyBlock:(RNNReactViewReadyCompletionBlock)reactViewReadyBlock;
 
 - (void)removeComponent:(NSString *)componentId;
 

lib/ios/RNNReactComponentRegistry.m

@@ -16,18 +16,26 @@
 	return self;
 }
 
-- (RNNReactView *)createComponentIfNotExists:(RNNComponentOptions *)component parentComponentId:(NSString *)parentComponentId reactViewReadyBlock:(RNNReactViewReadyCompletionBlock)reactViewReadyBlock {
-	NSMapTable* parentComponentDict = [self componentsForParentId:parentComponentId];
-	
-	RNNReactView* reactView = [parentComponentDict objectForKey:component.componentId.get];
-	if (!reactView) {
-		reactView = (RNNReactView *)[_creator createRootViewFromComponentOptions:component reactViewReadyBlock:reactViewReadyBlock];
-        [parentComponentDict setObject:reactView forKey:component.componentId.get];
-	} else if (reactViewReadyBlock) {
-		reactViewReadyBlock();
-	}
-	
-	return reactView;
+- (RNNReactButtonView *)createComponentIfNotExists:(RNNComponentOptions *)component parentComponentId:(NSString *)parentComponentId componentType:(RNNComponentType)componentType reactViewReadyBlock:(RNNReactViewReadyCompletionBlock)reactViewReadyBlock {
+    RNNReactView* reactView = [self findComponent:component.componentId.get parentComponentId:parentComponentId];
+    if (!reactView) {
+        reactView = [_creator createRootView:component.name.get rootViewId:component.componentId.get ofType:componentType reactViewReadyBlock:reactViewReadyBlock];
+        [self storeComponent:reactView componentId:component.componentId.get parentComponentId:parentComponentId];
+    } else if (reactViewReadyBlock) {
+        reactViewReadyBlock();
+    }
+    
+    return (RNNReactButtonView *)reactView;
+}
+
+- (RNNReactView *)findComponent:(NSString *)componentId parentComponentId:(NSString *)parentComponentId {
+    NSMapTable* parentComponentDict = [self componentsForParentId:parentComponentId];
+    return [parentComponentDict objectForKey:componentId];
+}
+
+- (void)storeComponent:(RNNReactView *)component componentId:(NSString *)componentId parentComponentId:(NSString *)parentComponentId {
+    NSMapTable* parentComponentDict = [self componentsForParentId:parentComponentId];
+    [parentComponentDict setObject:component forKey:componentId];
 }
 
 - (NSMapTable *)componentsForParentId:(NSString *)parentComponentId {

lib/ios/RNNReactRootViewCreator.h

@@ -1,10 +1,10 @@
 #import <Foundation/Foundation.h>
 #import "RNNComponentViewCreator.h"
-
+#import "RNNEventEmitter.h"
 #import <React/RCTBridge.h>
 
 @interface RNNReactRootViewCreator : NSObject <RNNComponentViewCreator>
 
--(instancetype)initWithBridge:(RCTBridge*)bridge;
+-(instancetype)initWithBridge:(RCTBridge*)bridge eventEmitter:(RNNEventEmitter*)eventEmitter;
 
 @end

lib/ios/RNNReactRootViewCreator.m

@@ -4,34 +4,43 @@
 
 @implementation RNNReactRootViewCreator {
 	RCTBridge *_bridge;
+    RNNEventEmitter* _eventEmitter;
 }
 
-- (instancetype)initWithBridge:(RCTBridge*)bridge {
+- (instancetype)initWithBridge:(RCTBridge*)bridge eventEmitter:(RNNEventEmitter*)eventEmitter {
 	self = [super init];
-	
 	_bridge = bridge;
-	
+    _eventEmitter = eventEmitter;
 	return self;
 }
 
-- (RNNReactView*)createRootView:(NSString*)name rootViewId:(NSString*)rootViewId reactViewReadyBlock:(RNNReactViewReadyCompletionBlock)reactViewReadyBlock {
-	if (!rootViewId) {
-		@throw [NSException exceptionWithName:@"MissingViewId" reason:@"Missing view id" userInfo:nil];
-	}
-	
-	RNNReactView *view = [[RNNReactView alloc] initWithBridge:_bridge
-												   moduleName:name
-											initialProperties:@{@"componentId": rootViewId}
-										  reactViewReadyBlock:reactViewReadyBlock];
-	return view;
+- (RNNReactView*)createRootView:(NSString*)name rootViewId:(NSString*)rootViewId ofType:(RNNComponentType)componentType reactViewReadyBlock:(RNNReactViewReadyCompletionBlock)reactViewReadyBlock {
+    [self verifyRootViewId:rootViewId];
+    return [[[self resolveComponentViewClass:componentType] alloc] initWithBridge:_bridge
+             moduleName:name
+      initialProperties:@{@"componentId": rootViewId}
+           eventEmitter:_eventEmitter
+    reactViewReadyBlock:reactViewReadyBlock];
 }
 
-- (UIView*)createRootViewFromComponentOptions:(RNNComponentOptions*)componentOptions {
-	return [self createRootView:componentOptions.name.get rootViewId:componentOptions.componentId.get reactViewReadyBlock:nil];
+- (Class)resolveComponentViewClass:(RNNComponentType)componentType {
+    switch (componentType) {
+        case RNNComponentTypeTopBarTitle:
+            return RNNReactTitleView.class;
+        case RNNComponentTypeTopBarButton:
+            return RNNReactButtonView.class;
+        case RNNComponentTypeTopBarBackground:
+            return RNNReactBackgroundView.class;
+        case RNNComponentTypeComponent:
+        default:
+            return RNNReactView.class;
+    }
 }
 
-- (UIView*)createRootViewFromComponentOptions:(RNNComponentOptions*)componentOptions reactViewReadyBlock:(RNNReactViewReadyCompletionBlock)reactViewReadyBlock {
-	return [self createRootView:componentOptions.name.get rootViewId:componentOptions.componentId.get reactViewReadyBlock:reactViewReadyBlock];
+- (void)verifyRootViewId:(NSString *)rootViewId {
+    if (!rootViewId) {
+        @throw [NSException exceptionWithName:@"MissingViewId" reason:@"Missing view id" userInfo:nil];
+    }
 }
 
 @end

lib/ios/RNNReactTitleView.h

@@ -0,0 +1,9 @@
+#import "RNNReactView.h"
+
+@interface RNNReactTitleView : RNNReactView <RCTRootViewDelegate>
+
+- (void)setAlignment:(NSString *)alignment inFrame:(CGRect)frame;
+
+@property (nonatomic, copy) void (^rootViewDidChangeIntrinsicSize)(CGSize intrinsicSize);
+
+@end

lib/ios/RNNReactTitleView.m

@@ -0,0 +1,44 @@
+#import "RNNReactTitleView.h"
+
+@implementation RNNReactTitleView {
+    BOOL _fillParent;
+}
+
+- (NSString *)componentType {
+    return ComponentTypeTitle;
+}
+
+- (CGSize)intrinsicContentSize {
+    if (_fillParent) {
+        return UILayoutFittingExpandedSize;
+    } else {
+        return [super intrinsicContentSize];
+    }
+}
+
+- (void)setAlignment:(NSString *)alignment inFrame:(CGRect)frame {
+    if ([alignment isEqualToString:@"fill"]) {
+        _fillParent = YES;
+        self.frame = frame;
+        self.sizeFlexibility = RCTRootViewSizeFlexibilityNone;
+    } else {
+        self.sizeFlexibility = RCTRootViewSizeFlexibilityWidthAndHeight;
+        __weak RNNReactView *weakSelf = self;
+        [self setRootViewDidChangeIntrinsicSize:^(CGSize intrinsicSize) {
+            [weakSelf setFrame:CGRectMake(0, 0, intrinsicSize.width, intrinsicSize.height)];
+        }];
+    }
+}
+
+- (void)setRootViewDidChangeIntrinsicSize:(void (^)(CGSize))rootViewDidChangeIntrinsicSize {
+        _rootViewDidChangeIntrinsicSize = rootViewDidChangeIntrinsicSize;
+        self.delegate = self;
+}
+
+- (void)rootViewDidChangeIntrinsicSize:(RCTRootView *)rootView {
+    if (_rootViewDidChangeIntrinsicSize) {
+        _rootViewDidChangeIntrinsicSize(rootView.intrinsicContentSize);
+    }
+}
+
+@end

lib/ios/RNNReactView.h

@@ -1,17 +1,27 @@
 #import <React/RCTRootView.h>
 #import <React/RCTRootViewDelegate.h>
+#import "RNNEventEmitter.h"
+
+#define ComponentTypeScreen @"Component"
+#define ComponentTypeTitle @"TopBarTitle"
+#define ComponentTypeButton @"TopBarButton"
+#define ComponentTypeBackground @"TopBarBackground"
 
 typedef void (^RNNReactViewReadyCompletionBlock)(void);
 
-@interface RNNReactView : RCTRootView <RCTRootViewDelegate>
+@interface RNNReactView : RCTRootView
 
-- (instancetype)initWithBridge:(RCTBridge *)bridge moduleName:(NSString *)moduleName initialProperties:(NSDictionary *)initialProperties reactViewReadyBlock:(RNNReactViewReadyCompletionBlock)reactViewReadyBlock;
+- (instancetype)initWithBridge:(RCTBridge *)bridge moduleName:(NSString *)moduleName initialProperties:(NSDictionary *)initialProperties eventEmitter:(RNNEventEmitter *)eventEmitter reactViewReadyBlock:(RNNReactViewReadyCompletionBlock)reactViewReadyBlock;
 
-@property (nonatomic, copy) void (^rootViewDidChangeIntrinsicSize)(CGSize intrinsicSize);
 @property (nonatomic, copy) RNNReactViewReadyCompletionBlock reactViewReadyBlock;
-
-- (void)setAlignment:(NSString *)alignment inFrame:(CGRect)frame;
+@property (nonatomic, strong) RNNEventEmitter* eventEmitter;
 
 - (NSString *)componentId;
 
+- (NSString *)componentType;
+
+- (void)componentDidAppear;
+
+- (void)componentDidDisappear;
+
 @end

lib/ios/RNNReactView.m

@@ -3,14 +3,15 @@
 #import <React/RCTUIManager.h>
 
 @implementation RNNReactView {
-	BOOL _fillParent;
+    BOOL _isAppeared;
 }
 
-- (instancetype)initWithBridge:(RCTBridge *)bridge moduleName:(NSString *)moduleName initialProperties:(NSDictionary *)initialProperties reactViewReadyBlock:(RNNReactViewReadyCompletionBlock)reactViewReadyBlock {
+- (instancetype)initWithBridge:(RCTBridge *)bridge moduleName:(NSString *)moduleName initialProperties:(NSDictionary *)initialProperties eventEmitter:(RNNEventEmitter *)eventEmitter reactViewReadyBlock:(RNNReactViewReadyCompletionBlock)reactViewReadyBlock {
 	self = [super initWithBridge:bridge moduleName:moduleName initialProperties:initialProperties];
 	[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(contentDidAppear:) name:RCTContentDidAppearNotification object:nil];
 	 _reactViewReadyBlock = reactViewReadyBlock;
-	
+    _eventEmitter = eventEmitter;
+    
 	return self;
 }
 
@@ -23,49 +24,42 @@
 
 - (void)contentDidAppear:(NSNotification *)notification {
 	RNNReactView* appearedView = notification.object;
-	
-	 if (_reactViewReadyBlock && [appearedView.appProperties[@"componentId"] isEqual:self.componentId]) {
-	 	_reactViewReadyBlock();
-		 _reactViewReadyBlock = nil;
-		 [[NSNotificationCenter defaultCenter] removeObserver:self];
+	 if ([appearedView.appProperties[@"componentId"] isEqual:self.componentId]) {
+         [self reactViewReady];
 	 }
 }
 
-- (NSString *)componentId {
-	return self.appProperties[@"componentId"];
+- (void)reactViewReady {
+    if (_reactViewReadyBlock) {
+        _reactViewReadyBlock();
+        _reactViewReadyBlock = nil;
+    }
+    [[NSNotificationCenter defaultCenter] removeObserver:self];
 }
 
-- (void)setRootViewDidChangeIntrinsicSize:(void (^)(CGSize))rootViewDidChangeIntrinsicSize {
-		_rootViewDidChangeIntrinsicSize = rootViewDidChangeIntrinsicSize;
-		self.delegate = self;
+
+- (void)componentDidAppear {
+    if (!_isAppeared) {
+        [_eventEmitter sendComponentDidAppear:self.componentId componentName:self.moduleName componentType:self.componentType];
+    }
+    
+    _isAppeared = YES;
 }
 
-- (void)rootViewDidChangeIntrinsicSize:(RCTRootView *)rootView {
-	if (_rootViewDidChangeIntrinsicSize) {
-		_rootViewDidChangeIntrinsicSize(rootView.intrinsicContentSize);
-	}
+- (void)componentDidDisappear {
+    if (_isAppeared) {
+        [_eventEmitter sendComponentDidDisappear:self.componentId componentName:self.moduleName componentType:self.componentType];
+    }
+    
+    _isAppeared = NO;
 }
 
-- (CGSize)intrinsicContentSize {
-	if (_fillParent) {
-		return UILayoutFittingExpandedSize;
-	} else {
-		return [super intrinsicContentSize];
-	}
+- (NSString *)componentId {
+	return self.appProperties[@"componentId"];
 }
 
-- (void)setAlignment:(NSString *)alignment inFrame:(CGRect)frame {
-    if ([alignment isEqualToString:@"fill"]) {
-        _fillParent = YES;
-        self.frame = frame;
-        self.sizeFlexibility = RCTRootViewSizeFlexibilityNone;
-    } else {
-        self.sizeFlexibility = RCTRootViewSizeFlexibilityWidthAndHeight;
-        __weak RNNReactView *weakSelf = self;
-        [self setRootViewDidChangeIntrinsicSize:^(CGSize intrinsicSize) {
-            [weakSelf setFrame:CGRectMake(0, 0, intrinsicSize.width, intrinsicSize.height)];
-        }];
-    }
+- (NSString *)componentType {
+    return ComponentTypeScreen;
 }
 
 @end

lib/ios/RNNStackPresenter.m

@@ -3,12 +3,12 @@
 #import "RNNStackController.h"
 #import "RNNCustomTitleView.h"
 #import "TopBarPresenterCreator.h"
+#import "RNNReactBackgroundView.h"
 
 @interface RNNStackPresenter() {
 	RNNReactComponentRegistry* _componentRegistry;
-	UIView* _customTopBar;
 	UIView* _customTopBarBackground;
-	RNNReactView* _customTopBarBackgroundReactView;
+	RNNReactView* _topBarBackgroundReactView;
     TopBarPresenter* _topBarPresenter;
 }
 
@@ -28,6 +28,14 @@
     _topBarPresenter = [TopBarPresenterCreator createWithBoundedNavigationController:self.stackController];
 }
 
+- (void)componentDidAppear {
+    [_topBarBackgroundReactView componentDidAppear];
+}
+
+- (void)componentDidDisappear {
+    [_topBarBackgroundReactView componentDidDisappear];
+}
+
 - (RNNStackController *)stackController {
     return (RNNStackController *)self.boundViewController;
 }
@@ -115,10 +123,6 @@
 		[stack setBackButtonColor:options.topBar.backButton.color.get];
 	}
 
-	if (options.topBar.component.name.hasValue) {
-		[self setCustomNavigationBarView:options perform:nil];
-	}
-	
 	if (options.topBar.background.component.name.hasValue) {
 		[self setCustomNavigationComponentBackground:options perform:nil];
 	}
@@ -131,13 +135,6 @@
 	dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), ^{
 		dispatch_group_t group = dispatch_group_create();
 		
-		dispatch_group_enter(group);
-		dispatch_async(dispatch_get_main_queue(), ^{
-			[self setCustomNavigationBarView:options perform:^{
-				dispatch_group_leave(group);
-			}];
-		});
-		
 		dispatch_group_enter(group);
 		dispatch_async(dispatch_get_main_queue(), ^{
 			[self setCustomNavigationComponentBackground:options perform:^{
@@ -155,32 +152,6 @@
 	});
 }
 
-- (void)setCustomNavigationBarView:(RNNNavigationOptions *)options perform:(RNNReactViewReadyCompletionBlock)readyBlock {
-	RNNStackController* stack = self.stackController;
-	if (![options.topBar.component.waitForRender getWithDefaultValue:NO] && readyBlock) {
-		readyBlock();
-		readyBlock = nil;
-	}
-	if (options.topBar.component.name.hasValue) {
-		NSString* currentChildComponentId = [stack getCurrentChild].layoutInfo.componentId;
-		RCTRootView *reactView = [_componentRegistry createComponentIfNotExists:options.topBar.component parentComponentId:currentChildComponentId reactViewReadyBlock:readyBlock];
-		
-		if (_customTopBar) {
-			[_customTopBar removeFromSuperview];
-		}
-		_customTopBar = [[RNNCustomTitleView alloc] initWithFrame:stack.navigationBar.bounds subView:reactView alignment:@"fill"];
-		reactView.backgroundColor = UIColor.clearColor;
-		_customTopBar.backgroundColor = UIColor.clearColor;
-		[stack.navigationBar addSubview:_customTopBar];
-	} else {
-		[_customTopBar removeFromSuperview];
-		_customTopBar = nil;
-		if (readyBlock) {
-			readyBlock();
-		}
-	}
-}
-
 - (void)setCustomNavigationComponentBackground:(RNNNavigationOptions *)options perform:(RNNReactViewReadyCompletionBlock)readyBlock {
     RNNNavigationOptions *withDefault = [options withDefault:[self defaultOptions]];
 	RNNStackController* stack = self.stackController;
@@ -188,12 +159,13 @@
 		readyBlock();
 		readyBlock = nil;
 	}
+    
 	if (withDefault.topBar.background.component.name.hasValue) {
 		NSString* currentChildComponentId = [stack getCurrentChild].layoutInfo.componentId;
-		RNNReactView *reactView = [_componentRegistry createComponentIfNotExists:withDefault.topBar.background.component parentComponentId:currentChildComponentId reactViewReadyBlock:readyBlock];
-		_customTopBarBackgroundReactView = reactView;
+		_topBarBackgroundReactView = [_componentRegistry createComponentIfNotExists:withDefault.topBar.background.component parentComponentId:currentChildComponentId componentType:RNNComponentTypeTopBarBackground reactViewReadyBlock:readyBlock];
 		
 	} else {
+        [_topBarBackgroundReactView componentDidDisappear];
 		[_customTopBarBackground removeFromSuperview];
 		_customTopBarBackground = nil;
 		if (readyBlock) {
@@ -207,10 +179,10 @@
 	if (_customTopBarBackground) {
 		[_customTopBarBackground removeFromSuperview];
 	}
-	RNNCustomTitleView* customTopBarBackground = [[RNNCustomTitleView alloc] initWithFrame:stack.navigationBar.bounds subView:_customTopBarBackgroundReactView alignment:@"fill"];
-	_customTopBarBackground = customTopBarBackground;
+	_customTopBarBackground = [[RNNCustomTitleView alloc] initWithFrame:stack.navigationBar.bounds subView:_topBarBackgroundReactView alignment:@"fill"];
 	
 	[stack.navigationBar insertSubview:_customTopBarBackground atIndex:1];
+    [_topBarBackgroundReactView componentDidAppear];
 }
 
 - (void)dealloc {

lib/ios/RNNTopBarOptions.h

@@ -35,7 +35,4 @@
 @property (nonatomic, strong) RNNButtonOptions* leftButtonStyle;
 @property (nonatomic, strong) RNNButtonOptions* rightButtonStyle;
 
-
-@property (nonatomic, strong) RNNComponentOptions* component;
-
 @end

lib/ios/RNNTopBarOptions.m

@@ -36,7 +36,6 @@
 	self.backButton = [[RNNBackButtonOptions alloc] initWithDict:dict[@"backButton"]];
 	self.leftButtonStyle = [[RNNButtonOptions alloc] initWithDict:dict[@"leftButtonStyle"]];
 	self.rightButtonStyle = [[RNNButtonOptions alloc] initWithDict:dict[@"rightButtonStyle"]];
-	self.component = [[RNNComponentOptions alloc] initWithDict:dict[@"component"]];
 	
 	if (self.leftButtonColor.hasValue) {
 		self.leftButtonStyle.color = self.leftButtonColor;

lib/ios/RNNUIBarButtonItem.h

@@ -12,5 +12,8 @@
 -(instancetype)init:(NSString*)buttonId withCustomView:(RCTRootView *)reactView;
 -(instancetype)init:(NSString*)buttonId withSystemItem:(NSString*)systemItemName;
 
+- (void)notifyDidAppear;
+- (void)notifyDidDisappear;
+
 @end
 

lib/ios/RNNUIBarButtonItem.m

@@ -63,6 +63,18 @@
 	return self;
 }
 
+- (void)notifyDidAppear {
+    if ([self.customView isKindOfClass:[RNNReactView class]]) {
+        [((RNNReactView *)self.customView) componentDidAppear];
+    }
+}
+
+- (void)notifyDidDisappear {
+    if ([self.customView isKindOfClass:[RNNReactView class]]) {
+        [((RNNReactView *)self.customView) componentDidDisappear];
+    }
+}
+
 - (void)rootViewDidChangeIntrinsicSize:(RCTRootView *)rootView {
 	self.widthConstraint.constant = rootView.intrinsicContentSize.width;
 	self.heightConstraint.constant = rootView.intrinsicContentSize.height;

lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj

@@ -131,6 +131,12 @@
 		503955982174864E00B0A663 /* NullDouble.m in Sources */ = {isa = PBXBuildFile; fileRef = 503955962174864E00B0A663 /* NullDouble.m */; };
 		5039559B2174867000B0A663 /* DoubleParser.h in Headers */ = {isa = PBXBuildFile; fileRef = 503955992174867000B0A663 /* DoubleParser.h */; };
 		5039559C2174867000B0A663 /* DoubleParser.m in Sources */ = {isa = PBXBuildFile; fileRef = 5039559A2174867000B0A663 /* DoubleParser.m */; };
+		503A8A1923BCB2ED0094D1C4 /* RNNReactButtonView.h in Headers */ = {isa = PBXBuildFile; fileRef = 503A8A1723BCB2ED0094D1C4 /* RNNReactButtonView.h */; };
+		503A8A1A23BCB2ED0094D1C4 /* RNNReactButtonView.m in Sources */ = {isa = PBXBuildFile; fileRef = 503A8A1823BCB2ED0094D1C4 /* RNNReactButtonView.m */; };
+		503A8A1D23BCB3230094D1C4 /* RNNReactTitleView.h in Headers */ = {isa = PBXBuildFile; fileRef = 503A8A1B23BCB3230094D1C4 /* RNNReactTitleView.h */; };
+		503A8A1E23BCB3230094D1C4 /* RNNReactTitleView.m in Sources */ = {isa = PBXBuildFile; fileRef = 503A8A1C23BCB3230094D1C4 /* RNNReactTitleView.m */; };
+		503A8A2123BCE9C60094D1C4 /* RNNReactBackgroundView.h in Headers */ = {isa = PBXBuildFile; fileRef = 503A8A1F23BCE9C60094D1C4 /* RNNReactBackgroundView.h */; };
+		503A8A2223BCE9C60094D1C4 /* RNNReactBackgroundView.m in Sources */ = {isa = PBXBuildFile; fileRef = 503A8A2023BCE9C60094D1C4 /* RNNReactBackgroundView.m */; };
 		50415CBA20553B8E00BB682E /* RNNScreenTransition.h in Headers */ = {isa = PBXBuildFile; fileRef = 50415CB820553B8E00BB682E /* RNNScreenTransition.h */; };
 		50415CBB20553B8E00BB682E /* RNNScreenTransition.m in Sources */ = {isa = PBXBuildFile; fileRef = 50415CB920553B8E00BB682E /* RNNScreenTransition.m */; };
 		50451D052042DAEB00695F00 /* RNNPushAnimation.h in Headers */ = {isa = PBXBuildFile; fileRef = 50451D032042DAEB00695F00 /* RNNPushAnimation.h */; };
@@ -513,6 +519,12 @@
 		503955962174864E00B0A663 /* NullDouble.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = NullDouble.m; sourceTree = "<group>"; };
 		503955992174867000B0A663 /* DoubleParser.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = DoubleParser.h; sourceTree = "<group>"; };
 		5039559A2174867000B0A663 /* DoubleParser.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = DoubleParser.m; sourceTree = "<group>"; };
+		503A8A1723BCB2ED0094D1C4 /* RNNReactButtonView.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNReactButtonView.h; sourceTree = "<group>"; };
+		503A8A1823BCB2ED0094D1C4 /* RNNReactButtonView.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNReactButtonView.m; sourceTree = "<group>"; };
+		503A8A1B23BCB3230094D1C4 /* RNNReactTitleView.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNReactTitleView.h; sourceTree = "<group>"; };
+		503A8A1C23BCB3230094D1C4 /* RNNReactTitleView.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNReactTitleView.m; sourceTree = "<group>"; };
+		503A8A1F23BCE9C60094D1C4 /* RNNReactBackgroundView.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNReactBackgroundView.h; sourceTree = "<group>"; };
+		503A8A2023BCE9C60094D1C4 /* RNNReactBackgroundView.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNReactBackgroundView.m; sourceTree = "<group>"; };
 		50415CB820553B8E00BB682E /* RNNScreenTransition.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNScreenTransition.h; sourceTree = "<group>"; };
 		50415CB920553B8E00BB682E /* RNNScreenTransition.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNScreenTransition.m; sourceTree = "<group>"; };
 		50451D032042DAEB00695F00 /* RNNPushAnimation.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNPushAnimation.h; sourceTree = "<group>"; };
@@ -1138,6 +1150,12 @@
 				50CED450239F9DFC00C42EE2 /* TopBarPresenter.m */,
 				501E0215213E7EA3003365C5 /* RNNReactView.h */,
 				501E0216213E7EA3003365C5 /* RNNReactView.m */,
+				503A8A1723BCB2ED0094D1C4 /* RNNReactButtonView.h */,
+				503A8A1823BCB2ED0094D1C4 /* RNNReactButtonView.m */,
+				503A8A1B23BCB3230094D1C4 /* RNNReactTitleView.h */,
+				503A8A1C23BCB3230094D1C4 /* RNNReactTitleView.m */,
+				503A8A1F23BCE9C60094D1C4 /* RNNReactBackgroundView.h */,
+				503A8A2023BCE9C60094D1C4 /* RNNReactBackgroundView.m */,
 				26916C961E4B9E7700D13680 /* RNNReactRootViewCreator.h */,
 				26916C971E4B9E7700D13680 /* RNNReactRootViewCreator.m */,
 				7BA500761E254908001B9E1B /* RNNSplashScreen.h */,
@@ -1364,9 +1382,11 @@
 				5060DE73219DAD7E00D0C052 /* ReactNativeNavigation.h in Headers */,
 				261F0E6A1E6F028A00989DE2 /* RNNNavigationStackManager.h in Headers */,
 				50EB4ED72068EBE000D6ED34 /* RNNBackgroundOptions.h in Headers */,
+				503A8A2123BCE9C60094D1C4 /* RNNReactBackgroundView.h in Headers */,
 				504AFE761FFFF1E00076E904 /* RNNNavigationOptions.h in Headers */,
 				504AFE771FFFF1E20076E904 /* RNNTopBarOptions.h in Headers */,
 				5038A3CE216E35E0009280BC /* Dictionary.h in Headers */,
+				503A8A1D23BCB3230094D1C4 /* RNNReactTitleView.h in Headers */,
 				509416A323A11C340036092C /* Enum.h in Headers */,
 				26916C981E4B9E7700D13680 /* RNNReactRootViewCreator.h in Headers */,
 				5012241A21736678000F5F98 /* Image.h in Headers */,
@@ -1406,6 +1426,7 @@
 				507F43C51FF4F17C00D9425B /* RNNTopTabsViewController.h in Headers */,
 				501223D72173590F000F5F98 /* RNNStackPresenter.h in Headers */,
 				50495946216F5FB5006D2B81 /* TextParser.h in Headers */,
+				503A8A1923BCB2ED0094D1C4 /* RNNReactButtonView.h in Headers */,
 				505EDD3C214FA8000071C7DE /* RNNComponentPresenter.h in Headers */,
 				502CB46E20CD1DDA0019B2FE /* RNNBackButtonOptions.h in Headers */,
 				50495939216E5750006D2B81 /* Bool.h in Headers */,
@@ -1665,6 +1686,7 @@
 				5016E8F020209690009D4F7C /* RNNCustomTitleView.m in Sources */,
 				503955982174864E00B0A663 /* NullDouble.m in Sources */,
 				E8DA24411F97459B00CD552B /* RNNElementFinder.m in Sources */,
+				503A8A2223BCE9C60094D1C4 /* RNNReactBackgroundView.m in Sources */,
 				50570B272061473D006A1B5C /* RNNTitleOptions.m in Sources */,
 				5047E4F122674AD400908DD3 /* RNNLayoutManager.m in Sources */,
 				5012241F217366D4000F5F98 /* ColorParser.m in Sources */,
@@ -1677,6 +1699,7 @@
 				A7626BFD1FC2FB2C00492FB8 /* RNNTopBarOptions.m in Sources */,
 				5050465521F8F4490035497A /* RNNReactComponentRegistry.m in Sources */,
 				509416AC23A11CB20036092C /* NullEnum.m in Sources */,
+				503A8A1A23BCB2ED0094D1C4 /* RNNReactButtonView.m in Sources */,
 				50570BEB2063E09B006A1B5C /* RNNTitleViewHelper.m in Sources */,
 				263905E71E4CAC950023D7D3 /* RNNSideMenuChildVC.m in Sources */,
 				50495957216F6B3D006D2B81 /* DictionaryParser.m in Sources */,
@@ -1775,6 +1798,7 @@
 				5038A3D3216E364C009280BC /* Text.m in Sources */,
 				5017D9E2239D2C6C00B74047 /* BottomTabsAttachModeFactory.m in Sources */,
 				5012240F21735999000F5F98 /* RNNBasePresenter.m in Sources */,
+				503A8A1E23BCB3230094D1C4 /* RNNReactTitleView.m in Sources */,
 				5038A375216CDDB6009280BC /* UIViewController+SideMenuController.m in Sources */,
 				E8E518331F83B3E0000467AC /* RNNUtils.m in Sources */,
 				50451D062042DAEB00695F00 /* RNNPushAnimation.m in Sources */,

lib/ios/UIViewController+LayoutProtocol.h

@@ -28,6 +28,10 @@ typedef void (^RNNReactViewReadyCompletionBlock)(void);
 
 - (void)readyForPresentation;
 
+- (void)componentDidAppear;
+
+- (void)componentDidDisappear;
+
 @property (nonatomic, retain) RNNBasePresenter* presenter;
 @property (nonatomic, retain) RNNLayoutInfo* layoutInfo;
 @property (nonatomic, strong) RNNNavigationOptions* options;

lib/ios/UIViewController+LayoutProtocol.m

@@ -114,7 +114,17 @@
 
 - (void)onChildWillAppear {
 	[self.presenter applyOptions:self.resolveOptions];
-	[((UISplitViewController *)self.parentViewController) onChildWillAppear];
+	[self.parentViewController onChildWillAppear];
+}
+
+- (void)componentDidAppear {
+    [self.presenter componentDidAppear];
+    [self.parentViewController componentDidAppear];
+}
+
+- (void)componentDidDisappear {
+    [self.presenter componentDidDisappear];
+    [self.parentViewController componentDidDisappear];
 }
 
 - (void)willMoveToParentViewController:(UIViewController *)parent {

lib/src/events/ComponentEventsObserver.test.tsx

@@ -148,7 +148,7 @@ describe('ComponentEventsObserver', () => {
     expect(tree.toJSON()).toBeDefined();
     expect(didAppearFn).not.toHaveBeenCalled();
 
-    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter' });
+    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter', componentType: 'Component' });
     expect(didAppearFn).toHaveBeenCalledTimes(1);
   });
 
@@ -158,11 +158,11 @@ describe('ComponentEventsObserver', () => {
 
     expect(tree.toJSON()).toBeDefined();
     
-    uut.notifyComponentDidAppear({ componentId: 'dontUseThisId', componentName: 'doesnt matter' });
+    uut.notifyComponentDidAppear({ componentId: 'dontUseThisId', componentName: 'doesnt matter', componentType: 'Component' });
     expect(didAppearFn).not.toHaveBeenCalled();
     
 
-    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter' });
+    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter', componentType: 'Component' });
     expect(didAppearFn).toHaveBeenCalledTimes(1);
   });
 
@@ -174,10 +174,10 @@ describe('ComponentEventsObserver', () => {
     expect(didDisappearFn).not.toHaveBeenCalled();
     expect(willUnmountFn).not.toHaveBeenCalled();
 
-    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter' });
+    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter', componentType: 'Component' });
     expect(didAppearFn).toHaveBeenCalledTimes(1);
 
-    uut.notifyComponentDidDisappear({ componentId: 'myCompId', componentName: 'doesnt matter' });
+    uut.notifyComponentDidDisappear({ componentId: 'myCompId', componentName: 'doesnt matter', componentType: 'Component' });
     expect(didDisappearFn).toHaveBeenCalledTimes(1);
 
     uut.notifyNavigationButtonPressed({ componentId: 'myCompId', buttonId: 'myButtonId' });
@@ -211,6 +211,7 @@ describe('ComponentEventsObserver', () => {
   it(`componentDidAppear should receive component props from store`, () => {
     const event = {
       componentId: 'myCompId',
+      componentType: 'Component',
       passProps: {
         propA: 'propA'
       },
@@ -220,14 +221,14 @@ describe('ComponentEventsObserver', () => {
     mockStore.updateProps(event.componentId, event.passProps)
     expect(didAppearFn).not.toHaveBeenCalled();
 
-    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter' });
+    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter', componentType: 'Component' });
     expect(didAppearFn).toHaveBeenCalledTimes(1);
     expect(didAppearFn).toHaveBeenCalledWith(event);
   });
 
   it(`doesnt call other componentIds`, () => {
     renderer.create(<BoundScreen componentId={'myCompId'} />);
-    uut.notifyComponentDidAppear({ componentId: 'other', componentName: 'doesnt matter' });
+    uut.notifyComponentDidAppear({ componentId: 'other', componentName: 'doesnt matter', componentType: 'Component' });
     expect(didAppearFn).not.toHaveBeenCalled();
   });
 
@@ -235,18 +236,18 @@ describe('ComponentEventsObserver', () => {
     const tree = renderer.create(<SimpleScreen componentId={'myCompId'} />);
     expect((tree.getInstance() as any).componentDidAppear).toBeUndefined();
     uut.bindComponent(tree.getInstance() as any);
-    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter' });
+    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter', componentType: 'Component' });
   });
 
   it(`returns unregister fn`, () => {
     renderer.create(<BoundScreen componentId={'123'} />);
 
-    uut.notifyComponentDidAppear({ componentId: '123', componentName: 'doesnt matter' });
+    uut.notifyComponentDidAppear({ componentId: '123', componentName: 'doesnt matter', componentType: 'Component' });
     expect(didAppearFn).toHaveBeenCalledTimes(1);
 
     subscription.remove();
 
-    uut.notifyComponentDidAppear({ componentId: '123', componentName: 'doesnt matter' });
+    uut.notifyComponentDidAppear({ componentId: '123', componentName: 'doesnt matter', componentType: 'Component' });
     expect(didAppearFn).toHaveBeenCalledTimes(1);
   });
 
@@ -256,7 +257,7 @@ describe('ComponentEventsObserver', () => {
 
     uut.unmounted('123');
 
-    uut.notifyComponentDidAppear({ componentId: '123', componentName: 'doesnt matter' });
+    uut.notifyComponentDidAppear({ componentId: '123', componentName: 'doesnt matter', componentType: 'Component' });
     expect(didAppearFn).not.toHaveBeenCalled();
   });
 
@@ -272,20 +273,20 @@ describe('ComponentEventsObserver', () => {
     const result2 = uut.bindComponent(instance2);
     expect(result1).not.toEqual(result2);
 
-    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter' });
+    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter', componentType: 'Component' });
 
     expect(instance1.componentDidAppear).toHaveBeenCalledTimes(1);
     expect(instance2.componentDidAppear).toHaveBeenCalledTimes(1);
 
     result2.remove();
 
-    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter' });
+    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter', componentType: 'Component' });
     expect(instance1.componentDidAppear).toHaveBeenCalledTimes(2);
     expect(instance2.componentDidAppear).toHaveBeenCalledTimes(1);
 
     result1.remove();
 
-    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter' });
+    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter', componentType: 'Component' });
     expect(instance1.componentDidAppear).toHaveBeenCalledTimes(2);
     expect(instance2.componentDidAppear).toHaveBeenCalledTimes(1);
   });

lib/src/interfaces/ComponentEvents.ts

@@ -1,3 +1,5 @@
+export type ComponentType = 'Component' | 'TopBarTitle' | 'TopBarBackground' | 'TopBarButton';
+
 export interface ComponentEvent {
   componentId: string;
 }
@@ -5,10 +7,12 @@ export interface ComponentEvent {
 export interface ComponentDidAppearEvent extends ComponentEvent {
   componentName: string;
   passProps?: object;
+  componentType: ComponentType;
 }
 
 export interface ComponentDidDisappearEvent extends ComponentEvent {
   componentName: string;
+  componentType: ComponentType;
 }
 
 export interface NavigationButtonPressedEvent extends ComponentEvent {

playground/ios/NavigationTests/RNNComponentPresenterTest.m

@@ -170,7 +170,7 @@
 	[[(id)self.componentRegistry expect] createComponentIfNotExists:[OCMArg checkWithBlock:^BOOL(RNNComponentOptions* options) {
 		return [options.name.get isEqual:@"titleComponent"] &&
 		[options.componentId.get isEqual:@"id"];
-	}] parentComponentId:self.uut.boundComponentId reactViewReadyBlock:[OCMArg any]];
+	}] parentComponentId:self.uut.boundComponentId componentType:RNNComponentTypeTopBarTitle reactViewReadyBlock:[OCMArg any]];
 	[self.uut renderComponents:self.options perform:nil];
 	[(id)self.componentRegistry verify];
 	
@@ -189,7 +189,7 @@
 	[[(id)self.componentRegistry expect] createComponentIfNotExists:[OCMArg checkWithBlock:^BOOL(RNNComponentOptions* options) {
 		return [options.name.get isEqual:@"titleComponent"] &&
 		[options.componentId.get isEqual:@"id"];
-	}] parentComponentId:self.uut.boundComponentId reactViewReadyBlock:[OCMArg any]];
+	}] parentComponentId:self.uut.boundComponentId componentType:RNNComponentTypeTopBarTitle reactViewReadyBlock:[OCMArg any]];
 	[self.uut renderComponents:self.options perform:nil];
 	[(id)self.componentRegistry verify];
 	
@@ -198,8 +198,8 @@
 }
 
 - (void)testRemoveTitleComponentIfNeeded_componentIsRemovedIfTitleTextIsDefined {
-	id mockTitle = [OCMockObject niceMockForClass:[RNNReactView class]];
-    OCMStub([self.componentRegistry createComponentIfNotExists:[OCMArg any] parentComponentId:[OCMArg any] reactViewReadyBlock:nil]).andReturn(mockTitle);
+	id mockTitle = [OCMockObject niceMockForClass:[RNNReactTitleView class]];
+    OCMStub([self.componentRegistry createComponentIfNotExists:[OCMArg any] parentComponentId:[OCMArg any] componentType:RNNComponentTypeTopBarTitle reactViewReadyBlock:nil]).andReturn(mockTitle);
 
 	RNNComponentOptions* component = [RNNComponentOptions new];
 	component.name = [[Text alloc] initWithValue:@"componentName"];
@@ -219,8 +219,8 @@
 }
 
 - (void)testRemoveTitleComponentIfNeeded_componentIsNotRemovedIfMergeOptionsIsCalledWithoutTitleText {
-    id mockTitle = [OCMockObject niceMockForClass:[RNNReactView class]];
-    OCMStub([self.componentRegistry createComponentIfNotExists:[OCMArg any] parentComponentId:[OCMArg any] reactViewReadyBlock:nil]).andReturn(mockTitle);
+    id mockTitle = [OCMockObject niceMockForClass:[RNNReactTitleView class]];
+    OCMStub([self.componentRegistry createComponentIfNotExists:[OCMArg any] parentComponentId:[OCMArg any]  componentType:RNNComponentTypeTopBarTitle reactViewReadyBlock:nil]).andReturn(mockTitle);
 
     RNNComponentOptions* component = [RNNComponentOptions new];
     component.name = [[Text alloc] initWithValue:@"componentName"];

playground/ios/NavigationTests/RNNTestRootViewCreator.m

@@ -2,7 +2,7 @@
 
 @implementation RNNTestRootViewCreator
 
-- (UIView*)createRootView:(NSString*)name rootViewId:(NSString*)rootViewId reactViewReadyBlock:(RNNReactViewReadyCompletionBlock)reactViewReadyBlock {
+- (RNNReactView *)createRootView:(NSString *)name rootViewId:(NSString *)rootViewId ofType:(RNNComponentType)componentType reactViewReadyBlock:(RNNReactViewReadyCompletionBlock)reactViewReadyBlock {
 	UIView *view = [[UIView alloc] init];
 	view.tag = [rootViewId intValue];
 	return view;

playground/src/screens/PushedScreen.js

@@ -14,7 +14,8 @@ const {
   POP_TO_ROOT_BTN,
   ADD_BACK_HANDLER,
   REMOVE_BACK_HANDLER,
-  SET_STACK_ROOT_BUTTON
+  SET_STACK_ROOT_BUTTON,
+  PUSH_OPTIONS_BUTTON
 } = require('../testIDs');
 const Screens = require('./Screens');
 
@@ -56,6 +57,7 @@ class PushedScreen extends React.Component {
         <Button label='Add BackHandler' testID={ADD_BACK_HANDLER} onPress={this.addBackHandler} />
         <Button label='Remove BackHandler' testID={REMOVE_BACK_HANDLER} onPress={this.removeBackHandler} />
         <Button label='Set Stack Root' testID={SET_STACK_ROOT_BUTTON} onPress={this.setStackRoot} />
+        <Button label='Push Options Screen' testID={PUSH_OPTIONS_BUTTON} onPress={this.pushOptionsScreen} />
       </Root>
     );
   }
@@ -89,6 +91,12 @@ class PushedScreen extends React.Component {
     }
   });
 
+  pushOptionsScreen = () => Navigation.push(this, {
+    component: {
+      name: Screens.Options
+    }
+  });
+
   popToFirstScreen = () => Navigation.popTo(this.props.previousScreenIds[0]);
 
   popToRoot = () => Navigation.popToRoot(this);

playground/src/screens/StaticLifecycleOverlay.js

@@ -60,7 +60,7 @@ class StaticLifecycleOverlay extends Component {
     } else if (event.commandName) {
       return <Text style={styles.h2}>{`${event.commandName}`}</Text>;
     } else if (event.componentName) {
-      return <Text style={styles.h2}>{`${event.event} | ${event.componentName}`}</Text>;
+      return <Text style={styles.h2}>{`${event.event} | ${event.componentName} | ${event.componentType}`}</Text>;
     } else if (event.buttonId) {
       return <Text style={styles.h2}>{`${event.event} | ${event.buttonId}`}</Text>;
     } else {
@@ -82,6 +82,7 @@ class StaticLifecycleOverlay extends Component {
           {events}
         </View>
         {this.renderDismissButton()}
+        {this.renderClearButton()}
       </View>
     );
   }
@@ -96,6 +97,17 @@ class StaticLifecycleOverlay extends Component {
       </TouchableOpacity>
     );
   }
+
+  renderClearButton = () => {
+    return (
+      <TouchableOpacity
+        style={styles.clearBtn}
+        onPress={() => this.setState({events: []})}
+      >
+        <Text testID={TestIDs.CLEAR_OVERLAY_EVENTS_BTN} style={{ color: 'red', alignSelf: 'center' }}>Clear</Text>
+      </TouchableOpacity>
+    );
+  }
 }
 module.exports = StaticLifecycleOverlay;
 
@@ -116,6 +128,14 @@ const styles = {
     backgroundColor: 'white',
     justifyContent: 'center'
   },
+  clearBtn: {
+    position: 'absolute',
+    right: 0,
+    width: 35,
+    height: 35,
+    backgroundColor: 'white',
+    justifyContent: 'center'
+  },
   events: {
     flexDirection: 'column',
     marginHorizontal: 2

playground/src/testIDs.js

@@ -84,6 +84,7 @@ module.exports = {
   PORTRAIT_ORIENTATION_BTN: 'PORTRAIT_ORIENTATION_BTN',
   LANDSCAPE_ORIENTATION_BTN: 'LANDSCAPE_ORIENTATION_BTN',
   DISMISS_BTN: 'DISMISS_BTN',
+  CLEAR_OVERLAY_EVENTS_BTN: 'CLEAR_OVERLAY_EVENTS_BTN',
   SEARCH_BTN: 'SEARCH_BTN',
   SET_STACK_ROOT_BTN: 'SET_STACK_ROOT_BTN',
   SET_STACK_ROOT_WITH_ID_BTN: 'SET_STACK_ROOT_WITH_ID_BTN',