Further work on TopTabs and some refactoring (#2362)

* Further work on TopTabs and some refactoring

* OptionsPresenter receives views as params
* Remove TopBar and style logic from ViewControllers, these are the OptionsPresenters concern
* StackAnimator isn't coupled to LinearLayout
* Convert Runnable to lambda
* ContainerLayout now implements ReactContainer interface
* Enable desugaring in playground app

* TopTabs unit tests

lib/android/app/build.gradle

@@ -42,6 +42,10 @@ android {
             }
         }
     }
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
 }
 
 allprojects { p ->

lib/android/app/src/main/java/com/reactnativenavigation/anim/StackAnimator.java

@@ -8,10 +8,10 @@ import android.content.Context;
 import android.support.annotation.Nullable;
 import android.util.DisplayMetrics;
 import android.view.View;
+import android.view.ViewGroup;
 import android.view.WindowManager;
 import android.view.animation.AccelerateInterpolator;
 import android.view.animation.DecelerateInterpolator;
-import android.widget.LinearLayout;
 
 import com.reactnativenavigation.views.TopBar;
 
@@ -116,15 +116,12 @@ public class StackAnimator {
 		ValueAnimator containerHeightAnim = ValueAnimator.ofInt(container.getMeasuredHeight(), container.getMeasuredHeight() - topBar.getMeasuredHeight());
 		containerHeightAnim.setInterpolator(DECELERATE_INTERPOLATOR);
 		containerHeightAnim.setDuration(DURATION_TOPBAR);
-		containerHeightAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
-			@Override
-			public void onAnimationUpdate(ValueAnimator valueAnimator) {
-				int val = (Integer) valueAnimator.getAnimatedValue();
-				LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) container.getLayoutParams();
-				layoutParams.height = val;
-				container.setLayoutParams(layoutParams);
-			}
-		});
+		containerHeightAnim.addUpdateListener(valueAnimator -> {
+            int val = (Integer) valueAnimator.getAnimatedValue();
+            ViewGroup.LayoutParams layoutParams = container.getLayoutParams();
+            layoutParams.height = val;
+            container.setLayoutParams(layoutParams);
+        });
 		ObjectAnimator containerTransitionAnim = ObjectAnimator.ofFloat(container, View.TRANSLATION_Y, -1 * topBar.getMeasuredHeight(), 0);
 		containerTransitionAnim.setInterpolator(DECELERATE_INTERPOLATOR);
 		containerTransitionAnim.setDuration(DURATION_TOPBAR);
@@ -142,8 +139,8 @@ public class StackAnimator {
 
 			@Override
 			public void onAnimationEnd(Animator animation) {
-				LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) container.getLayoutParams();
-				layoutParams.height = LinearLayout.LayoutParams.MATCH_PARENT;
+                ViewGroup.LayoutParams layoutParams = container.getLayoutParams();
+				layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT;
 				container.setLayoutParams(layoutParams);
 			}
 
@@ -165,15 +162,12 @@ public class StackAnimator {
 		ValueAnimator containerHeightAnim = ValueAnimator.ofInt(container.getMeasuredHeight(), container.getMeasuredHeight() + topBar.getMeasuredHeight());
 		containerHeightAnim.setInterpolator(ACCELERATE_INTERPOLATOR);
 		containerHeightAnim.setDuration(DURATION_TOPBAR);
-		containerHeightAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
-			@Override
-			public void onAnimationUpdate(ValueAnimator valueAnimator) {
-				int val = (Integer) valueAnimator.getAnimatedValue();
-				LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) container.getLayoutParams();
-				layoutParams.height = val;
-				container.setLayoutParams(layoutParams);
-			}
-		});
+		containerHeightAnim.addUpdateListener(valueAnimator -> {
+            int val = (Integer) valueAnimator.getAnimatedValue();
+            ViewGroup.LayoutParams layoutParams = container.getLayoutParams();
+            layoutParams.height = val;
+            container.setLayoutParams(layoutParams);
+        });
 		ObjectAnimator containerTransitionAnim = ObjectAnimator.ofFloat(container, View.TRANSLATION_Y, 0, -1 * topBar.getMeasuredHeight());
 		containerTransitionAnim.setInterpolator(ACCELERATE_INTERPOLATOR);
 		containerTransitionAnim.setDuration(DURATION_TOPBAR);
@@ -190,8 +184,8 @@ public class StackAnimator {
 
 			@Override
 			public void onAnimationEnd(Animator animation) {
-				LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) container.getLayoutParams();
-				layoutParams.height = LinearLayout.LayoutParams.MATCH_PARENT;
+                ViewGroup.LayoutParams layoutParams = container.getLayoutParams();
+				layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT;
 				container.setLayoutParams(layoutParams);
 				container.setTranslationY(0);
 

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

@@ -10,9 +10,9 @@ import com.reactnativenavigation.viewcontrollers.SideMenuController;
 import com.reactnativenavigation.viewcontrollers.StackController;
 import com.reactnativenavigation.viewcontrollers.ViewController;
 import com.reactnativenavigation.viewcontrollers.overlay.DialogViewController;
+import com.reactnativenavigation.viewcontrollers.toptabs.TopTabController;
 import com.reactnativenavigation.viewcontrollers.toptabs.TopTabsController;
 import com.reactnativenavigation.views.ContainerViewCreator;
-import com.reactnativenavigation.views.TopTabCreator;
 
 import java.util.ArrayList;
 import java.util.List;
@@ -32,7 +32,7 @@ public class LayoutFactory {
 	public ViewController create(final LayoutNode node) {
 		switch (node.type) {
 			case Container:
-				return createContainer(node, new ContainerViewCreator(reactInstanceManager));
+				return createContainer(node);
 			case ContainerStack:
 				return createContainerStack(node);
 			case BottomTabs:
@@ -47,10 +47,10 @@ public class LayoutFactory {
 				return createSideMenuRight(node);
 			case CustomDialog:
 				return createDialogContainer(node);
-            case TopTabsContainer:
-                return createTopTabsContainer(node);
+            case TopTabs:
+                return createTopTabs(node);
             case TopTab:
-                return createContainer(node, new TopTabCreator(reactInstanceManager));
+                return createTopTab(node);
 			default:
 				throw new IllegalArgumentException("Invalid node type: " + node.type);
 		}
@@ -89,14 +89,14 @@ public class LayoutFactory {
 		return create(node.children.get(0));
 	}
 
-	private ViewController createContainer(LayoutNode node, ContainerViewController.ReactViewCreator reactViewCreator) {
+	private ViewController createContainer(LayoutNode node) {
 		String id = node.id;
 		String name = node.data.optString("name");
 		NavigationOptions navigationOptions = NavigationOptions.parse(node.data.optJSONObject("navigationOptions"), defaultOptions);
 		return new ContainerViewController(activity,
                 id,
                 name,
-                reactViewCreator,
+                new ContainerViewCreator(reactInstanceManager),
                 navigationOptions
         );
 	}
@@ -126,11 +126,23 @@ public class LayoutFactory {
 		return new DialogViewController(activity, id, name, creator);
 	}
 
-    private ViewController createTopTabsContainer(LayoutNode node) {
-        final List<ViewController> tabs = new ArrayList<>();
+    private ViewController createTopTabs(LayoutNode node) {
+        final List<TopTabController> tabs = new ArrayList<>();
         for (LayoutNode child : node.children) {
-            tabs.add(create(child));
+            tabs.add((TopTabController) create(child));
         }
         return new TopTabsController(activity, node.id, tabs);
     }
+
+    private ViewController createTopTab(LayoutNode node) {
+        String id = node.id;
+        String name = node.data.optString("name");
+        NavigationOptions navigationOptions = NavigationOptions.parse(node.data.optJSONObject("navigationOptions"), defaultOptions);
+        return new TopTabController(activity,
+                id,
+                name,
+                new ReactContainerViewCreator(reactInstanceManager),
+                navigationOptions
+        );
+    }
 }

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

@@ -15,7 +15,7 @@ public class LayoutNode {
 		SideMenuLeft,
 		SideMenuRight,
 		CustomDialog,
-        TopTabsContainer,
+        TopTabs,
         TopTab
 	}
 
@@ -23,13 +23,13 @@ public class LayoutNode {
 	public final Type type;
 	public final JSONObject data;
 
-	public final List<LayoutNode> children;
+	final List<LayoutNode> children;
 
-	public LayoutNode(String id, Type type) {
-		this(id, type, new JSONObject(), new ArrayList<LayoutNode>());
+	LayoutNode(String id, Type type) {
+		this(id, type, new JSONObject(), new ArrayList<>());
 	}
 
-	public LayoutNode(String id, Type type, JSONObject data, List<LayoutNode> children) {
+	LayoutNode(String id, Type type, JSONObject data, List<LayoutNode> children) {
 		this.id = id;
 		this.type = type;
 		this.data = data;

lib/android/app/src/main/java/com/reactnativenavigation/presentation/OptionsPresenter.java

@@ -7,33 +7,33 @@ import com.reactnativenavigation.parse.NavigationOptions;
 import com.reactnativenavigation.parse.TopBarOptions;
 import com.reactnativenavigation.parse.TopTabsOptions;
 import com.reactnativenavigation.utils.TypefaceLoader;
-import com.reactnativenavigation.viewcontrollers.ContainerViewController;
-import com.reactnativenavigation.views.ContainerLayout;
+import com.reactnativenavigation.views.TopBar;
 
 public class OptionsPresenter {
 
-	private ContainerViewController controller;
 	private final StackAnimator animator;
+    private View contentView;
+    private TopBar topBar;
 
-	public OptionsPresenter(ContainerViewController controller) {
-		this.controller = controller;
-		animator = new StackAnimator(controller.getActivity());
-	}
+    public OptionsPresenter(TopBar topBar, View contentView) {
+        this.topBar = topBar;
+        this.contentView = contentView;
+        animator = new StackAnimator(topBar.getContext());
+    }
 
 	public void applyOptions(NavigationOptions options) {
-		if (controller != null && controller.getTopBar() != null) {
-            applyTopBarOptions(options.topBarOptions);
-            applyTopTabsOptions(options.topTabsOptions);
-		}
+        applyTopBarOptions(options.topBarOptions);
+        applyTopTabsOptions(options.topTabsOptions);
 	}
 
     private void applyTopBarOptions(TopBarOptions options) {
-        controller.setTitle(options.title);
-        controller.setBackgroundColor(options.backgroundColor);
-        controller.setTitleTextColor(options.textColor);
-        controller.setTitleFontSize(options.textFontSize);
+        topBar.setTitle(options.title);
+        topBar.setBackgroundColor(options.backgroundColor);
+        topBar.setTitleTextColor(options.textColor);
+        topBar.setTitleFontSize(options.textFontSize);
+
         TypefaceLoader typefaceLoader = new TypefaceLoader();
-        controller.getTopBar().setTitleTypeface(typefaceLoader.getTypeFace(controller.getActivity(), options.textFontFamily));
+        topBar.setTitleTypeface(typefaceLoader.getTypeFace(topBar.getContext(), options.textFontFamily));
         if (options.hidden == NavigationOptions.BooleanOptions.True) {
             hideTopBar(options.animateHide);
         }
@@ -43,26 +43,24 @@ public class OptionsPresenter {
     }
 
 	private void showTopBar(NavigationOptions.BooleanOptions animated) {
-		if (controller.getTopBar().getVisibility() == View.VISIBLE) {
+		if (topBar.getVisibility() == View.VISIBLE) {
 			return;
 		}
 		if (animated == NavigationOptions.BooleanOptions.True) {
-			ContainerLayout topBarContainerView = (ContainerLayout) controller.getContainerView();
-			animator.animateShowTopBar(controller.getTopBar(), topBarContainerView.getReactView().asView());
+			animator.animateShowTopBar(topBar, contentView);
 		} else {
-			controller.getTopBar().setVisibility(View.VISIBLE);
+			topBar.setVisibility(View.VISIBLE);
 		}
 	}
 
 	private void hideTopBar(NavigationOptions.BooleanOptions animated) {
-		if (controller.getTopBar().getVisibility() == View.GONE) {
+		if (topBar.getVisibility() == View.GONE) {
 			return;
 		}
 		if (animated == NavigationOptions.BooleanOptions.True) {
-			ContainerLayout topBarContainerView = (ContainerLayout) controller.getContainerView();
-			animator.animateHideTopBar(controller.getTopBar(), topBarContainerView.getReactView().asView());
+			animator.animateHideTopBar(topBar, contentView);
 		} else {
-			controller.getTopBar().setVisibility(View.GONE);
+			topBar.setVisibility(View.GONE);
 		}
 	}
 

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

@@ -0,0 +1,5 @@
+package com.reactnativenavigation.utils;
+
+public interface Task<T> {
+    void run(T param);
+}

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

@@ -2,12 +2,12 @@ package com.reactnativenavigation.viewcontrollers;
 
 import android.app.Activity;
 import android.support.annotation.NonNull;
+import android.support.annotation.RestrictTo;
 import android.view.View;
 
 import com.reactnativenavigation.parse.NavigationOptions;
 import com.reactnativenavigation.presentation.NavigationOptionsListener;
-import com.reactnativenavigation.presentation.OptionsPresenter;
-import com.reactnativenavigation.views.Container;
+import com.reactnativenavigation.views.ReactContainer;
 import com.reactnativenavigation.views.TopBar;
 
 public class ContainerViewController extends ViewController implements NavigationOptionsListener {
@@ -35,25 +35,7 @@ public class ContainerViewController extends ViewController implements Navigatio
 
 	private final ReactViewCreator viewCreator;
 	private NavigationOptions navigationOptions;
-	private IReactView containerView;
-
-	private TopBar topBar;
-
-    public void setTitle(String title) {
-        topBar.setTitle(title);
-    }
-
-    public void setBackgroundColor(int backgroundColor) {
-        topBar.setBackgroundColor(backgroundColor);
-    }
-
-    public void setTitleTextColor(int textColor) {
-        topBar.setTitleTextColor(textColor);
-    }
-
-    public void setTitleFontSize(float textFontSize) {
-        topBar.setTitleFontSize(textFontSize);
-    }
+	private ReactContainer container;
 
 	public ContainerViewController(final Activity activity,
 								   final String id,
@@ -66,62 +48,51 @@ public class ContainerViewController extends ViewController implements Navigatio
 		this.navigationOptions = initialNavigationOptions;
 	}
 
+    @RestrictTo(RestrictTo.Scope.TESTS)
+    TopBar getTopBar() {
+        return container.getTopBar();
+    }
+
 	@Override
 	public void destroy() {
 		super.destroy();
-		if (containerView != null) containerView.destroy();
-		containerView = null;
+		if (container != null) container.destroy();
+		container = null;
 	}
 
 	@Override
 	public void onViewAppeared() {
 		super.onViewAppeared();
 		ensureViewIsCreated();
-		applyOptions();
-		containerView.sendContainerStart();
+		container.applyOptions(navigationOptions);
+		container.sendContainerStart();
 	}
 
 	@Override
 	public void onViewDisappear() {
 		super.onViewDisappear();
-		containerView.sendContainerStop();
+		container.sendContainerStop();
 	}
 
 	@Override
 	protected boolean isViewShown() {
-		return super.isViewShown() && containerView.isReady();
+		return super.isViewShown() && container.isReady();
 	}
 
 	@NonNull
 	@Override
 	protected View createView() {
-		containerView = viewCreator.create(getActivity(), getId(), containerName);
-		if (containerView instanceof Container) {
-			topBar = ((Container) containerView).getTopBar();
-		}
-		return containerView.asView();
+		container = (ReactContainer) viewCreator.create(getActivity(), getId(), containerName);
+        return container.asView();
 	}
 
 	@Override
 	public void mergeNavigationOptions(NavigationOptions options) {
 		navigationOptions.mergeWith(options);
-		applyOptions();
+        container.applyOptions(options);
 	}
 
 	NavigationOptions getNavigationOptions() {
 		return navigationOptions;
 	}
-
-	private void applyOptions() {
-		OptionsPresenter presenter = new OptionsPresenter(this);
-		presenter.applyOptions(navigationOptions);
-	}
-
-	public TopBar getTopBar() {
-		return topBar;
-	}
-
-	public IReactView getContainerView() {
-		return containerView;
-	}
 }

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

@@ -53,7 +53,7 @@ public class Navigator extends ParentController {
 	 * Navigation methods
 	 */
 
-	public void setRoot(final ViewController viewController) {
+	void setRoot(final ViewController viewController) {
 		setRoot(viewController, null);
 	}
 
@@ -94,72 +94,53 @@ public class Navigator extends ParentController {
 	public void push(final String fromId, final ViewController viewController, Promise promise) {
 		ViewController from = findControllerById(fromId);
 		if (from != null) {
-			StackController parentStackController = from.getParentStackController();
-			if (parentStackController != null) {
-				parentStackController.push(viewController, promise);
-			}
+		    from.performOnParentStack(stack -> stack.push(viewController, promise));
 		}
 	}
 
-	public void pop(final String fromId) {
+	void pop(final String fromId) {
 		pop(fromId, null);
 	}
 
-	public void pop(final String fromId, Promise promise) {
+	void pop(final String fromId, Promise promise) {
 		ViewController from = findControllerById(fromId);
 		if (from != null) {
-			StackController parentStackController = from.getParentStackController();
-			if (parentStackController != null) {
-				parentStackController.pop(promise);
-			}
+		    from.performOnParentStack(stack -> stack.pop(promise));
 		}
 	}
 
-	public void popSpecific(final String id) {
+	void popSpecific(final String id) {
 		popSpecific(id, null);
 	}
 
 	public void popSpecific(final String id, Promise promise) {
 		ViewController from = findControllerById(id);
 		if (from != null) {
-			StackController parentStackController = from.getParentStackController();
-			if (parentStackController != null) {
-				parentStackController.popSpecific(from, promise);
-			} else {
-				rejectPromise(promise);
-			}
+		    from.performOnParentStack(stack -> stack.popSpecific(from, promise), () -> rejectPromise(promise));
 		} else {
 			rejectPromise(promise);
 		}
 	}
 
-	public void popToRoot(final String id) {
+	void popToRoot(final String id) {
 		popToRoot(id, null);
 	}
 
 	public void popToRoot(final String id, Promise promise) {
 		ViewController from = findControllerById(id);
 		if (from != null) {
-			StackController parentStackController = from.getParentStackController();
-			if (parentStackController != null) {
-				parentStackController.popToRoot(promise);
-			}
+		    from.performOnParentStack(stack -> stack.popToRoot(promise));
 		}
 	}
 
-	public void popTo(final String containerId) {
+	void popTo(final String containerId) {
 		popTo(containerId, null);
 	}
 
 	public void popTo(final String containerId, Promise promise) {
 		ViewController target = findControllerById(containerId);
 		if (target != null) {
-			StackController parentStackController = target.getParentStackController();
-			if (parentStackController != null) {
-				parentStackController.popTo(target, promise);
-			} else {
-				rejectPromise(promise);
-			}
+		    target.performOnParentStack(stack -> stack.popTo(target, promise), () -> rejectPromise(promise));
 		} else {
 			rejectPromise(promise);
 		}

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

@@ -24,7 +24,7 @@ public abstract class ParentController extends ViewController {
 	protected abstract ViewGroup createView();
 
 	@NonNull
-	public abstract Collection<ViewController> getChildControllers();
+	public abstract Collection<? extends ViewController> getChildControllers();
 
 	@Nullable
 	@Override

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

@@ -33,7 +33,7 @@ public class StackController extends ParentController {
 	public void push(final ViewController child, final Promise promise) {
 		final ViewController previousTop = peek();
 
-		child.setParentStackController(this);
+		child.setParentController(this);
 		stack.push(child.getId(), child);
 		View enteringView = child.getView();
 		getView().addView(enteringView);

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

@@ -3,13 +3,16 @@ package com.reactnativenavigation.viewcontrollers;
 import android.app.Activity;
 import android.support.annotation.NonNull;
 import android.support.annotation.Nullable;
+import android.support.annotation.VisibleForTesting;
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.ViewManager;
 import android.view.ViewTreeObserver;
 
+import com.reactnativenavigation.parse.NavigationOptions;
 import com.reactnativenavigation.utils.CompatUtils;
 import com.reactnativenavigation.utils.StringUtils;
+import com.reactnativenavigation.utils.Task;
 
 public abstract class ViewController implements ViewTreeObserver.OnGlobalLayoutListener {
 
@@ -17,7 +20,7 @@ public abstract class ViewController implements ViewTreeObserver.OnGlobalLayoutL
 	private final String id;
 
 	private View view;
-	private StackController parentStackController;
+	private ParentController parentController;
 	private boolean isShown = false;
 
 	public ViewController(Activity activity, String id) {
@@ -27,7 +30,8 @@ public abstract class ViewController implements ViewTreeObserver.OnGlobalLayoutL
 
 	protected abstract View createView();
 
-	void ensureViewIsCreated() {
+	@VisibleForTesting(otherwise = VisibleForTesting.PACKAGE_PRIVATE)
+	public void ensureViewIsCreated() {
 		getView();
 	}
 
@@ -39,15 +43,33 @@ public abstract class ViewController implements ViewTreeObserver.OnGlobalLayoutL
 		return activity;
 	}
 
+    protected ViewController getParentController() {
+	    return parentController;
+    }
+
 	@Nullable
-    StackController getParentStackController() {
-		return parentStackController;
+    ParentController getParentStackController() {
+		return parentController;
 	}
 
-	void setParentStackController(final StackController parentStackController) {
-		this.parentStackController = parentStackController;
+	public void setParentController(final ParentController parentController) {
+		this.parentController = parentController;
 	}
 
+    void performOnParentStack(Task<StackController> task) {
+	    if (parentController instanceof StackController) {
+            task.run((StackController) parentController);
+        }
+    }
+
+    void performOnParentStack(Task<StackController> accept, Runnable  reject) {
+        if (parentController instanceof StackController) {
+            accept.run((StackController) parentController);
+        } else {
+            reject.run();
+        }
+    }
+
 	@NonNull
 	public View getView() {
 		if (view == null) {
@@ -72,12 +94,16 @@ public abstract class ViewController implements ViewTreeObserver.OnGlobalLayoutL
 	}
 
 	public void onViewAppeared() {
-		//
-	}
+        isShown = true;
+    }
 
 	public void onViewDisappear() {
-		//
-	}
+        isShown = false;
+    }
+
+    public void applyOptions(NavigationOptions options) {
+
+    }
 
 	public void destroy() {
 		if (isShown) {

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/toptabs/TopTabController.java

@@ -0,0 +1,72 @@
+package com.reactnativenavigation.viewcontrollers.toptabs;
+
+import android.app.Activity;
+import android.view.View;
+
+import com.reactnativenavigation.parse.NavigationOptions;
+import com.reactnativenavigation.presentation.NavigationOptionsListener;
+import com.reactnativenavigation.viewcontrollers.ContainerViewController;
+import com.reactnativenavigation.viewcontrollers.ViewController;
+import com.reactnativenavigation.views.TopTab;
+
+public class TopTabController extends ViewController implements NavigationOptionsListener {
+
+    private final String containerName;
+    private ContainerViewController.ReactViewCreator viewCreator;
+    private final NavigationOptions options;
+    private TopTab topTab;
+    private boolean isSelectedTab;
+
+    public TopTabController(Activity activity, String id, String name, ContainerViewController.ReactViewCreator viewCreator, NavigationOptions initialOptions) {
+        super(activity, id);
+        this.containerName = name;
+        this.viewCreator = viewCreator;
+        this.options = initialOptions;
+    }
+
+    @Override
+    public void onViewAppeared() {
+        super.onViewAppeared();
+        isSelectedTab = true;
+        applyOptions(options);
+        topTab.sendContainerStart();
+    }
+
+    @Override
+    public void applyOptions(NavigationOptions options) {
+        getParentController().applyOptions(options);
+    }
+
+    @Override
+    public void onViewDisappear() {
+        super.onViewDisappear();
+        isSelectedTab = false;
+        topTab.sendContainerStop();
+    }
+
+    @Override
+    protected boolean isViewShown() {
+        return super.isViewShown() && isSelectedTab;
+    }
+
+    @Override
+    public View createView() {
+        topTab = new TopTab(
+                getActivity(),
+                viewCreator.create(getActivity(), getId(), containerName)
+        );
+        return topTab;
+    }
+
+    @Override
+    public void destroy() {
+        super.destroy();
+        if (topTab != null) topTab.destroy();
+        topTab = null;
+    }
+
+    @Override
+    public void mergeNavigationOptions(NavigationOptions options) {
+        this.options.mergeWith(options);
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/toptabs/TopTabsAdapter.java

@@ -1,17 +1,17 @@
 package com.reactnativenavigation.viewcontrollers.toptabs;
 
 import android.support.v4.view.PagerAdapter;
+import android.support.v4.view.ViewPager;
 import android.view.View;
 import android.view.ViewGroup;
 
-import com.reactnativenavigation.viewcontrollers.ViewController;
-
 import java.util.List;
 
-public class TopTabsAdapter extends PagerAdapter {
-    private List<ViewController> tabs;
+public class TopTabsAdapter extends PagerAdapter implements ViewPager.OnPageChangeListener {
+    private List<TopTabController> tabs;
+    private int currentPage = 0;
 
-    TopTabsAdapter(List<ViewController> tabs) {
+    TopTabsAdapter(List<TopTabController> tabs) {
         this.tabs = tabs;
     }
 
@@ -29,4 +29,21 @@ public class TopTabsAdapter extends PagerAdapter {
     public Object instantiateItem(ViewGroup container, int position) {
         return tabs.get(position).getView();
     }
+
+    @Override
+    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
+
+    }
+
+    @Override
+    public void onPageSelected(int position) {
+        tabs.get(currentPage).onViewDisappear();
+        tabs.get(position).onViewAppeared();
+        currentPage = position;
+    }
+
+    @Override
+    public void onPageScrollStateChanged(int state) {
+
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/toptabs/TopTabsController.java

@@ -4,6 +4,8 @@ import android.app.Activity;
 import android.support.annotation.NonNull;
 import android.view.ViewGroup;
 
+import com.reactnativenavigation.parse.NavigationOptions;
+import com.reactnativenavigation.presentation.NavigationOptionsListener;
 import com.reactnativenavigation.viewcontrollers.ParentController;
 import com.reactnativenavigation.viewcontrollers.ViewController;
 import com.reactnativenavigation.views.TopTabsLayout;
@@ -11,29 +13,53 @@ import com.reactnativenavigation.views.TopTabsLayout;
 import java.util.Collection;
 import java.util.List;
 
-public class TopTabsController extends ParentController {
+public class TopTabsController extends ParentController implements NavigationOptionsListener {
 
-    private List<ViewController> tabs;
+    private List<TopTabController> tabs;
+    private TopTabsLayout topTabsLayout;
 
-    public TopTabsController(Activity activity, String id, List<ViewController> tabs) {
+    public TopTabsController(Activity activity, String id, List<TopTabController> tabs) {
         super(activity, id);
         this.tabs = tabs;
+        for (ViewController tab : tabs) {
+            tab.setParentController(this);
+        }
     }
 
     @NonNull
     @Override
     protected ViewGroup createView() {
-        return new TopTabsLayout(getActivity(), tabs);
+        topTabsLayout = new TopTabsLayout(getActivity(), tabs);
+        return topTabsLayout;
     }
 
     @NonNull
     @Override
-    public Collection<ViewController> getChildControllers() {
+    public Collection<? extends ViewController> getChildControllers() {
         return tabs;
     }
 
     @Override
-    protected boolean isViewShown() {
-        return super.isViewShown();
+    public void onViewAppeared() {
+        topTabsLayout.performOnCurrentTab(TopTabController::onViewAppeared);
+    }
+
+    @Override
+    public void onViewDisappear() {
+        topTabsLayout.performOnCurrentTab(TopTabController::onViewDisappear);
+    }
+
+    @Override
+    public void applyOptions(NavigationOptions options) {
+        topTabsLayout.applyOptions(options);
+    }
+
+    @Override
+    public void mergeNavigationOptions(NavigationOptions options) {
+
+    }
+
+    public void switchToTab(int index) {
+        topTabsLayout.switchToTab(index);
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/toptabs/TopTabsViewPager.java

@@ -3,10 +3,8 @@ package com.reactnativenavigation.viewcontrollers.toptabs;
 import android.annotation.SuppressLint;
 import android.content.Context;
 import android.support.v4.view.ViewPager;
-import android.view.View;
 import android.view.ViewGroup;
 
-import com.reactnativenavigation.viewcontrollers.ContainerViewController;
 import com.reactnativenavigation.viewcontrollers.ViewController;
 
 import java.util.List;
@@ -14,46 +12,29 @@ import java.util.List;
 import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
 
 @SuppressLint("ViewConstructor")
-public class TopTabsViewPager extends ViewPager implements ContainerViewController.IReactView {
+public class TopTabsViewPager extends ViewPager {
     private static final int OFFSCREEN_PAGE_LIMIT = 99;
-    private final List<ViewController> tabs;
+    private List<TopTabController> tabs;
 
-    public TopTabsViewPager(Context context, List<ViewController> tabs) {
+    public TopTabsViewPager(Context context, List<TopTabController> tabs) {
         super(context);
         this.tabs = tabs;
-        init(tabs);
+        init();
     }
 
-    private void init(List<ViewController> tabs) {
+    private void init() {
         setOffscreenPageLimit(OFFSCREEN_PAGE_LIMIT);
         for (ViewController tab : tabs) {
             addView(tab.getView(), new ViewGroup.LayoutParams(MATCH_PARENT, MATCH_PARENT));
         }
-        setAdapter(new TopTabsAdapter(tabs));
+        TopTabsAdapter adapter = new TopTabsAdapter(tabs);
+        setAdapter(adapter);
+        addOnPageChangeListener(adapter);
     }
 
-    @Override
-    public boolean isReady() {
-        return false;
-    }
-
-    @Override
-    public View asView() {
-        return null;
-    }
-
-    @Override
     public void destroy() {
-
-    }
-
-    @Override
-    public void sendContainerStart() {
-
-    }
-
-    @Override
-    public void sendContainerStop() {
-
+        for (ViewController tab : tabs) {
+            tab.destroy();
+        }
     }
-}
+}

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

@@ -1,7 +1,12 @@
 package com.reactnativenavigation.views;
 
-import com.reactnativenavigation.viewcontrollers.ContainerViewController;
+import android.support.annotation.RestrictTo;
 
-public interface Container extends ContainerViewController.IReactView {
+import com.reactnativenavigation.parse.NavigationOptions;
+
+public interface Container {
+    void applyOptions(NavigationOptions options);
+
+    @RestrictTo(RestrictTo.Scope.TESTS)
     TopBar getTopBar();
 }

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

@@ -1,21 +1,28 @@
 package com.reactnativenavigation.views;
 
+import android.annotation.SuppressLint;
 import android.content.Context;
+import android.support.annotation.RestrictTo;
 import android.view.View;
 import android.widget.LinearLayout;
 
+import com.reactnativenavigation.parse.NavigationOptions;
+import com.reactnativenavigation.presentation.OptionsPresenter;
 import com.reactnativenavigation.viewcontrollers.ContainerViewController.IReactView;
 
-public class ContainerLayout extends LinearLayout implements Container {
+@SuppressLint("ViewConstructor")
+public class ContainerLayout extends LinearLayout implements ReactContainer {
 
 	private TopBar topBar;
 	private IReactView reactView;
+	private final OptionsPresenter optionsPresenter;
 
 	public ContainerLayout(Context context, IReactView reactView) {
 		super(context);
 		this.topBar = new TopBar(context);
 		this.reactView = reactView;
-		initViews();
+        optionsPresenter = new OptionsPresenter(topBar, this);
+        initViews();
 	}
 
 	private void initViews() {
@@ -24,10 +31,6 @@ public class ContainerLayout extends LinearLayout implements Container {
 		addView(reactView.asView());
 	}
 
-	public ContainerLayout(Context context) {
-		super(context);
-	}
-
 	@Override
 	public boolean isReady() {
 		return reactView.isReady();
@@ -54,11 +57,13 @@ public class ContainerLayout extends LinearLayout implements Container {
 	}
 
     @Override
-	public TopBar getTopBar() {
-		return topBar;
-	}
+    public void applyOptions(NavigationOptions options) {
+        optionsPresenter.applyOptions(options);
+    }
 
-	public IReactView getReactView() {
-		return reactView;
-	}
+    @Override
+    @RestrictTo(RestrictTo.Scope.TESTS)
+    public TopBar getTopBar() {
+        return topBar;
+    }
 }

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

@@ -0,0 +1,6 @@
+package com.reactnativenavigation.views;
+
+import com.reactnativenavigation.viewcontrollers.ContainerViewController;
+
+public interface ReactContainer extends Container, ContainerViewController.IReactView {
+}

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

@@ -1,27 +1,21 @@
 package com.reactnativenavigation.views;
 
+import android.annotation.SuppressLint;
 import android.content.Context;
 import android.view.View;
 import android.widget.FrameLayout;
 
 import com.reactnativenavigation.viewcontrollers.ContainerViewController.IReactView;
 
+@SuppressLint("ViewConstructor")
 public class TopTab extends FrameLayout implements IReactView {
 
-	private IReactView reactView;
+	private final IReactView reactView;
 
 	public TopTab(Context context, IReactView reactView) {
 		super(context);
 		this.reactView = reactView;
-		initViews();
-	}
-
-	private void initViews() {
-		addView(reactView.asView());
-	}
-
-	public TopTab(Context context) {
-		super(context);
+        addView(reactView.asView());
 	}
 
 	@Override

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

@@ -2,23 +2,32 @@ package com.reactnativenavigation.views;
 
 import android.annotation.SuppressLint;
 import android.content.Context;
+import android.support.annotation.RestrictTo;
+import android.support.v4.view.ViewPager;
 import android.widget.LinearLayout;
 
-import com.reactnativenavigation.viewcontrollers.ViewController;
+import com.reactnativenavigation.parse.NavigationOptions;
+import com.reactnativenavigation.presentation.OptionsPresenter;
+import com.reactnativenavigation.utils.Task;
+import com.reactnativenavigation.viewcontrollers.toptabs.TopTabController;
 import com.reactnativenavigation.viewcontrollers.toptabs.TopTabsViewPager;
 
 import java.util.List;
 
 @SuppressLint("ViewConstructor")
-public class TopTabsLayout extends LinearLayout {
+public class TopTabsLayout extends LinearLayout implements Container {
 
     private TopBar topBar;
+    private List<TopTabController> tabs;
     private TopTabsViewPager viewPager;
+    private final OptionsPresenter optionsPresenter;
 
-    public TopTabsLayout(Context context, List<ViewController> tabs) {
+    public TopTabsLayout(Context context, List<TopTabController> tabs) {
         super(context);
         topBar = new TopBar(context);
+        this.tabs = tabs;
         viewPager = new TopTabsViewPager(context, tabs);
+        optionsPresenter = new OptionsPresenter(topBar, this);
         initViews();
     }
 
@@ -27,4 +36,29 @@ public class TopTabsLayout extends LinearLayout {
         addView(topBar);
         addView(viewPager);
     }
+
+    @Override
+    public void applyOptions(NavigationOptions options) {
+        optionsPresenter.applyOptions(options);
+    }
+
+    @Override
+    @RestrictTo(RestrictTo.Scope.TESTS)
+    public TopBar getTopBar() {
+        return topBar;
+    }
+
+    @RestrictTo(RestrictTo.Scope.TESTS)
+    public ViewPager getViewPager() {
+        return viewPager;
+    }
+
+
+    public void performOnCurrentTab(Task<TopTabController> task) {
+        task.run(tabs.get(viewPager.getCurrentItem()));
+    }
+
+    public void switchToTab(int index) {
+        viewPager.setCurrentItem(index);
+    }
 }

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

@@ -3,18 +3,25 @@ package com.reactnativenavigation.mocks;
 import android.content.Context;
 import android.view.View;
 
-import com.reactnativenavigation.viewcontrollers.ContainerViewController;
-import com.reactnativenavigation.views.Container;
+import com.reactnativenavigation.parse.NavigationOptions;
+import com.reactnativenavigation.presentation.OptionsPresenter;
+import com.reactnativenavigation.views.ReactContainer;
 import com.reactnativenavigation.views.TopBar;
 
-public class TestContainerLayout extends View implements ContainerViewController.IReactView, Container {
+public class TestContainerLayout extends View implements ReactContainer {
 
-	private TopBar topBar;
+    private final TopBar topBar;
+    private final OptionsPresenter optionsPresenter;
 
-	public TestContainerLayout(final Context context) {
+    public TestContainerLayout(final Context context) {
 		super(context);
-		topBar = new TopBar(context);
-	}
+        topBar = new TopBar(context);
+        optionsPresenter = new OptionsPresenter(topBar, this);
+    }
+
+    public TopBar getTopBar() {
+        return topBar;
+    }
 
     @Override
 	public boolean isReady() {
@@ -39,7 +46,7 @@ public class TestContainerLayout extends View implements ContainerViewController
 	}
 
     @Override
-    public TopBar getTopBar() {
-        return topBar;
+    public void applyOptions(NavigationOptions options) {
+        optionsPresenter.applyOptions(options);
     }
 }

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

@@ -0,0 +1,38 @@
+package com.reactnativenavigation.mocks;
+
+import android.content.Context;
+import android.view.View;
+
+import com.reactnativenavigation.viewcontrollers.ContainerViewController;
+
+public class TopTabLayoutMock extends View implements ContainerViewController.IReactView {
+
+    public TopTabLayoutMock(Context context) {
+        super(context);
+    }
+
+    @Override
+    public boolean isReady() {
+        return false;
+    }
+
+    @Override
+    public View asView() {
+        return this;
+    }
+
+    @Override
+    public void destroy() {
+
+    }
+
+    @Override
+    public void sendContainerStart() {
+
+    }
+
+    @Override
+    public void sendContainerStop() {
+
+    }
+}

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

@@ -26,13 +26,13 @@ public class OptionsApplyingTest extends BaseTest {
 		activity = newActivity();
 		initialNavigationOptions = new NavigationOptions();
 		view = spy(new TestContainerLayout(activity));
-		uut = new ContainerViewController(activity, "containerId1", "containerName",
-                new ContainerViewController.ReactViewCreator() {
-                    @Override
-                    public ContainerViewController.IReactView create(final Activity activity1, final String containerId, final String containerName) {
-                        return view;
-                    }
-                }, initialNavigationOptions);
+		uut = new ContainerViewController(activity,
+                "containerId1",
+                "containerName",
+                (activity1, containerId, containerName) -> view,
+                initialNavigationOptions
+        );
+		uut.ensureViewIsCreated();
 	}
 
 	@Test

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

@@ -0,0 +1,122 @@
+package com.reactnativenavigation.viewcontrollers;
+
+import android.app.Activity;
+import android.view.ViewGroup;
+
+import com.reactnativenavigation.BaseTest;
+import com.reactnativenavigation.mocks.TopTabLayoutMock;
+import com.reactnativenavigation.parse.NavigationOptions;
+import com.reactnativenavigation.viewcontrollers.ContainerViewController.IReactView;
+import com.reactnativenavigation.viewcontrollers.toptabs.TopTabController;
+import com.reactnativenavigation.viewcontrollers.toptabs.TopTabsController;
+import com.reactnativenavigation.views.TopTabsLayout;
+
+import org.junit.Test;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import static org.mockito.Mockito.spy;
+import static org.mockito.Mockito.times;
+import static org.mockito.Mockito.verify;
+
+public class TopTabsViewControllerTest extends BaseTest {
+
+    private static final int SIZE = 2;
+
+    private TopTabsController uut;
+    private List<TopTabLayoutMock> tabs = new ArrayList<>(SIZE);
+    private List<TopTabController> tabControllers = new ArrayList<>(SIZE);
+    private List<NavigationOptions> tabOptions = new ArrayList<>(SIZE);
+
+    @Override
+    public void beforeEach() {
+        super.beforeEach();
+        tabControllers.clear();
+        tabs.clear();
+        Activity activity = newActivity();
+        createTabs(activity);
+        uut = new TopTabsController(activity, "containerId", tabControllers);
+    }
+
+    private void createTabs(Activity activity) {
+        for (int i = 0; i < SIZE; i++) {
+            TopTabLayoutMock reactView = spy(new TopTabLayoutMock(activity));
+            tabs.add(reactView);
+            tabOptions.add(new NavigationOptions());
+            tabControllers.add(spy(new TopTabController(activity,
+                    "idTab" + i,
+                    "tab" + i,
+                    (activity1, containerId, containerName) -> reactView,
+                    tabOptions.get(i))
+            ));
+        }
+    }
+
+    @Test
+    public void createsViewFromContainerViewCreator() throws Exception {
+        uut.ensureViewIsCreated();
+        for (int i = 0; i < SIZE; i++) {
+            verify(tabControllers.get(i), times(1)).createView();
+        }
+    }
+
+    @Test
+    public void containerViewDestroyedOnDestroy() throws Exception {
+        uut.ensureViewIsCreated();
+        TopTabsLayout topTabs = (TopTabsLayout) uut.getView();
+        for (int i = 0; i < SIZE; i++) {
+            verify(tab(topTabs, i), times(0)).destroy();
+        }
+        uut.destroy();
+        for (ViewController tabController : tabControllers) {
+            verify(tabController, times(1)).destroy();
+        }
+    }
+
+    @Test
+    public void lifecycleMethodsSentWhenSelectedTabChanges() throws Exception {
+        uut.ensureViewIsCreated();
+        TopTabLayoutMock initialTab = tabs.get(0);
+        TopTabLayoutMock selectedTab = tabs.get(1);
+        uut.onViewAppeared();
+        uut.switchToTab(1);
+        verify(initialTab, times(1)).sendContainerStop();
+        verify(selectedTab, times(1)).sendContainerStart();
+        verify(selectedTab, times(0)).sendContainerStop();
+    }
+
+    @Test
+    public void lifecycleMethodsSentWhenSelectedPreviouslySelectedTab() throws Exception {
+        uut.ensureViewIsCreated();
+        uut.onViewAppeared();
+        uut.switchToTab(1);
+        uut.switchToTab(0);
+        verify(tabs.get(0), times(1)).sendContainerStop();
+        verify(tabs.get(0), times(2)).sendContainerStart();
+        verify(tabs.get(1), times(1)).sendContainerStart();
+        verify(tabs.get(1), times(1)).sendContainerStop();
+    }
+
+    @Test
+    public void setOptionsOfInitialTab() throws Exception {
+        uut.ensureViewIsCreated();
+        uut.onViewAppeared();
+        verify(tabControllers.get(0), times(1)).applyOptions(tabOptions.get(0));
+    }
+
+    @Test
+    public void setOptionsWhenTabChanges() throws Exception {
+        uut.ensureViewIsCreated();
+        uut.onViewAppeared();
+        verify(tabControllers.get(0), times(1)).applyOptions(tabOptions.get(0));
+        uut.switchToTab(1);
+        verify(tabControllers.get(1), times(1)).applyOptions(tabOptions.get(1));
+        uut.switchToTab(0);
+        verify(tabControllers.get(0), times(2)).applyOptions(tabOptions.get(0));
+    }
+
+    private IReactView tab(TopTabsLayout topTabs, final int index) {
+        return (IReactView) ((ViewGroup) topTabs.getViewPager().getChildAt(index)).getChildAt(0);
+    }
+}

lib/src/commands/LayoutTreeParser.js

@@ -13,7 +13,7 @@ class LayoutTreeParser {
       return this._createTabs(simpleJsonApi.bottomTabs);
     }
     if (simpleJsonApi.topTabs) {
-      return this._createTopTabsContainer(simpleJsonApi.topTabs);
+      return this._createTopTabs(simpleJsonApi.topTabs);
     }
     if (simpleJsonApi.name) {
       return this._createContainer(simpleJsonApi);
@@ -36,9 +36,9 @@ class LayoutTreeParser {
     };
   }
 
-  _createTopTabsContainer(topTabs) {
+  _createTopTabs(topTabs) {
     return {
-      type: LayoutTypes.TopTabsContainer,
+      type: LayoutTypes.TopTabs,
       children: _.map(topTabs, (t) => this._createTopTab(t.container))
     };
   }

lib/src/commands/LayoutTreeParser.test.js

@@ -289,7 +289,7 @@ describe('LayoutTreeParser', () => {
     it('parses bottomTabs with side menus', () => {
       expect(uut.parseFromSimpleJSON(SimpleLayouts.singleScreenWithTopTabs))
         .toEqual({
-          type: 'TopTabsContainer',
+          type: 'TopTabs',
           children: [
             {
               type: 'TopTab',

lib/src/commands/LayoutTypes.js

@@ -7,6 +7,6 @@ module.exports = {
   SideMenuLeft: 'SideMenuLeft',
   SideMenuRight: 'SideMenuRight',
   CustomDialog: 'CustomDialog',
-  TopTabsContainer: 'TopTabsContainer',
+  TopTabs: 'TopTabs',
   TopTab: 'TopTab'
 };

playground/android/app/build.gradle

@@ -11,6 +11,11 @@ android {
     compileSdkVersion 25
     buildToolsVersion "27.0.1"
 
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+
     defaultConfig {
         applicationId "com.reactnativenavigation.playground"
         minSdkVersion 19

playground/src/containers/TopTabOptionsScreen.js

@@ -0,0 +1,52 @@
+const React = require('react');
+const { PureComponent } = require('react');
+
+const { View, Text } = require('react-native');
+
+class TopTabOptionsScreen extends PureComponent {
+  static get navigationOptions() {
+    return {
+      topBar: {
+        title: 'Tab 1',
+        textColor: 'black',
+        textFontSize: 16,
+        textFontFamily: 'HelveticaNeue-Italic'
+      }
+    };
+  }
+
+  render() {
+    return (
+      <View style={styles.root}>
+        <Text style={styles.h1}>{this.props.text || 'Top Tab Screen'}</Text>
+        <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
+      </View>
+    );
+  }
+}
+
+const styles = {
+  root: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5fcff'
+  },
+  h1: {
+    fontSize: 24,
+    textAlign: 'center',
+    margin: 10
+  },
+  h2: {
+    fontSize: 12,
+    textAlign: 'center',
+    margin: 10
+  },
+  footer: {
+    fontSize: 10,
+    color: '#888',
+    marginTop: 10
+  }
+};
+
+module.exports = TopTabOptionsScreen;

playground/src/containers/TopTabScreen.js

@@ -1,8 +1,28 @@
 const React = require('react');
 const { PureComponent } = require('react');
 const { View, Text } = require('react-native');
+const Navigation = require('react-native-navigation');
 
 class TopTabScreen extends PureComponent {
+  static get navigationOptions() {
+    return {
+      topBar: {
+        textColor: 'black',
+        textFontSize: 16,
+        textFontFamily: 'HelveticaNeue-Italic'
+      }
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    Navigation.setOptions(this.props.containerId, {
+      topBar: {
+        title: this.props.title
+      }
+    });
+  }
+
   render() {
     return (
       <View style={styles.root}>

playground/src/containers/WelcomeScreen.js

@@ -152,8 +152,9 @@ class WelcomeScreen extends Component {
       topTabs: [
         {
           container: {
-            name: 'navigation.playground.TopTabScreen',
+            name: 'navigation.playground.TopTabOptionsScreen',
             passProps: {
+              title: 'Tab 1',
               text: 'This is top tab 1'
             }
           }
@@ -162,6 +163,7 @@ class WelcomeScreen extends Component {
           container: {
             name: 'navigation.playground.TopTabScreen',
             passProps: {
+              title: 'Tab 2',
               text: 'This is top tab 2'
             }
           }
@@ -170,6 +172,7 @@ class WelcomeScreen extends Component {
           container: {
             name: 'navigation.playground.TopTabScreen',
             passProps: {
+              title: 'Tab 3',
               text: 'This is top tab 3'
             }
           }

playground/src/containers/index.js

@@ -14,6 +14,7 @@ const CustomDialog = require('./CustomDialog');
 const BandHandlerScreen = require('./BackHandlerScreen');
 const SideMenuScreen = require('./SideMenuScreen');
 const TopTabScreen = require('./TopTabScreen');
+const TopTabOptionsScreen = require('./TopTabOptionsScreen');
 
 function registerContainers() {
   Navigation.registerContainer(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
@@ -31,6 +32,7 @@ function registerContainers() {
   Navigation.registerContainer('navigation.playground.BackHandlerScreen', () => BandHandlerScreen);
   Navigation.registerContainer('navigation.playground.SideMenuScreen', () => SideMenuScreen);
   Navigation.registerContainer('navigation.playground.TopTabScreen', () => TopTabScreen);
+  Navigation.registerContainer('navigation.playground.TopTabOptionsScreen', () => TopTabOptionsScreen);
 }
 
 module.exports = {