Initial TopTabs commit on Android (#2332)

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

@@ -4,19 +4,14 @@ import android.animation.Animator;
 import android.animation.AnimatorSet;
 import android.animation.ObjectAnimator;
 import android.animation.ValueAnimator;
-import android.app.Activity;
 import android.content.Context;
 import android.support.annotation.Nullable;
 import android.util.DisplayMetrics;
-import android.util.Log;
 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.FrameLayout;
 import android.widget.LinearLayout;
-import android.widget.RelativeLayout;
 
 import com.reactnativenavigation.views.TopBar;
 

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

@@ -10,7 +10,10 @@ 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;
@@ -45,12 +48,16 @@ public class LayoutFactory {
 				return createSideMenuRight(node);
 			case CustomDialog:
 				return createDialogContainer(node);
+            case TopTabsContainer:
+                return createTopTabsContainer(node);
+            case TopTab:
+                return createTopTabContainer(node);
 			default:
 				throw new IllegalArgumentException("Invalid node type: " + node.type);
 		}
 	}
 
-	private ViewController createSideMenuRoot(LayoutNode node) {
+    private ViewController createSideMenuRoot(LayoutNode node) {
 		SideMenuController sideMenuLayout = new SideMenuController(activity, node.id);
 		for (LayoutNode child : node.children) {
 			ViewController childLayout = create(child);
@@ -114,4 +121,20 @@ public class LayoutFactory {
 		ReactContainerViewCreator creator = new ReactContainerViewCreator(reactInstanceManager);
 		return new DialogViewController(activity, id, name, creator);
 	}
+
+    private ViewController createTopTabsContainer(LayoutNode node) {
+        final List<ViewController> tabs = new ArrayList<>();
+        for (LayoutNode child : node.children) {
+            tabs.add(create(child));
+        }
+        return new TopTabsController(activity, node.id, tabs);
+    }
+
+    private TopTabController createTopTabContainer(LayoutNode node) {
+        String name = node.data.optString("name");
+        return new TopTabController(activity,
+                node.id,
+                name,
+                new TopTabCreator(new ReactContainerViewCreator(reactInstanceManager)));
+    }
 }

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

@@ -14,7 +14,9 @@ public class LayoutNode {
 		SideMenuCenter,
 		SideMenuLeft,
 		SideMenuRight,
-		CustomDialog
+		CustomDialog,
+        TopTabsContainer,
+        TopTab
 	}
 
 	public final String id;

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

@@ -30,21 +30,25 @@ public class NavigationOptions implements DEFAULT_VALUES {
 		if (json == null) return result;
 
 		result.topBarOptions = TopBarOptions.parse(json.optJSONObject("topBar"));
+		result.topTabsOptions = TopTabsOptions.parse(json.optJSONObject("topTabs"));
 		result.bottomTabsOptions = BottomTabsOptions.parse(json.optJSONObject("bottomTabs"));
 
 		return result.withDefaultOptions(defaultOptions);
 	}
 
 	public TopBarOptions topBarOptions = new TopBarOptions();
-	public BottomTabsOptions bottomTabsOptions = new BottomTabsOptions();
+    public TopTabsOptions topTabsOptions = new TopTabsOptions();
+    public BottomTabsOptions bottomTabsOptions = new BottomTabsOptions();
 
 	public void mergeWith(final NavigationOptions other) {
         topBarOptions.mergeWith(other.topBarOptions);
-		bottomTabsOptions.mergeWith(other.bottomTabsOptions);
+        topTabsOptions.mergeWith(other.topTabsOptions);
+        bottomTabsOptions.mergeWith(other.bottomTabsOptions);
 	}
 
     NavigationOptions withDefaultOptions(final NavigationOptions other) {
         topBarOptions.mergeWithDefault(other.topBarOptions);
+        topTabsOptions.mergeWithDefault(other.topTabsOptions);
         bottomTabsOptions.mergeWithDefault(other.bottomTabsOptions);
         return this;
     }

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

@@ -0,0 +1,17 @@
+package com.reactnativenavigation.parse;
+
+import org.json.JSONObject;
+
+public class TopTabsOptions implements DEFAULT_VALUES {
+    public static TopTabsOptions parse(JSONObject topTabs) {
+        return new TopTabsOptions();
+    }
+
+    void mergeWith(TopTabsOptions topTabsOptions) {
+
+    }
+
+    void mergeWithDefault(TopTabsOptions topTabsOptions) {
+
+    }
+}

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

@@ -4,6 +4,8 @@ import android.view.View;
 
 import com.reactnativenavigation.anim.StackAnimator;
 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.ContainerView;
@@ -20,24 +22,25 @@ public class OptionsPresenter {
 
 	public void applyOptions(NavigationOptions options) {
 		if (controller != null && controller.getTopBar() != null) {
-			controller.getTopBar().setTitle(options.topBarOptions.title);
-			controller.getTopBar().setBackgroundColor(options.topBarOptions.backgroundColor);
-			controller.getTopBar().setTitleTextColor(options.topBarOptions.textColor);
-			controller.getTopBar().setTitleFontSize(options.topBarOptions.textFontSize);
-			TypefaceLoader typefaceLoader = new TypefaceLoader();
-			controller.getTopBar().setTitleTypeface(typefaceLoader.getTypeFace(controller.getActivity(), options.topBarOptions.textFontFamily));
-			applyTopBarHiddenOptions(options);
+            applyTopBarOptions(options.topBarOptions);
+            applyTopTabsOptions(options.topTabsOptions);
 		}
 	}
 
-	private void applyTopBarHiddenOptions(NavigationOptions options) {
-		if (options.topBarOptions.hidden == NavigationOptions.BooleanOptions.True) {
-			hideTopBar(options.topBarOptions.animateHide);
-		}
-		if (options.topBarOptions.hidden == NavigationOptions.BooleanOptions.False) {
-			showTopBar(options.topBarOptions.animateHide);
-		}
-	}
+    private void applyTopBarOptions(TopBarOptions options) {
+        controller.setTitle(options.title);
+        controller.setBackgroundColor(options.backgroundColor);
+        controller.setTitleTextColor(options.textColor);
+        controller.setTitleFontSize(options.textFontSize);
+        TypefaceLoader typefaceLoader = new TypefaceLoader();
+        controller.getTopBar().setTitleTypeface(typefaceLoader.getTypeFace(controller.getActivity(), options.textFontFamily));
+        if (options.hidden == NavigationOptions.BooleanOptions.True) {
+            hideTopBar(options.animateHide);
+        }
+        if (options.hidden == NavigationOptions.BooleanOptions.False) {
+            showTopBar(options.animateHide);
+        }
+    }
 
 	private void showTopBar(NavigationOptions.BooleanOptions animated) {
 		if (controller.getTopBar().getVisibility() == View.VISIBLE) {
@@ -62,4 +65,8 @@ public class OptionsPresenter {
 			controller.getTopBar().setVisibility(View.GONE);
 		}
 	}
+
+    private void applyTopTabsOptions(TopTabsOptions topTabsOptions) {
+        // TODO: -guyca
+    }
 }

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

@@ -12,7 +12,7 @@ import com.reactnativenavigation.views.ContainerView;
 
 public class ContainerViewController extends ViewController implements NavigationOptionsListener {
 
-	public interface ReactViewCreator {
+    public interface ReactViewCreator {
 
         IReactView create(Activity activity, String containerId, String containerName);
 	}
@@ -39,6 +39,22 @@ public class ContainerViewController extends ViewController implements Navigatio
 
 	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);
+    }
+
 	public ContainerViewController(final Activity activity,
 								   final String id,
 								   final String containerName,

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

@@ -26,8 +26,7 @@ public class SideMenuController extends ParentController {
 	@NonNull
 	@Override
 	protected ViewGroup createView() {
-		DrawerLayout root = new DrawerLayout(getActivity());
-		return root;
+        return new DrawerLayout(getActivity());
 	}
 
 	@NonNull

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

@@ -5,6 +5,7 @@ import android.support.annotation.NonNull;
 import android.support.annotation.Nullable;
 import android.view.View;
 import android.view.ViewGroup;
+import android.view.ViewManager;
 import android.view.ViewTreeObserver;
 
 import com.reactnativenavigation.utils.CompatUtils;
@@ -24,10 +25,9 @@ public abstract class ViewController implements ViewTreeObserver.OnGlobalLayoutL
 		this.id = id;
 	}
 
-	@NonNull
 	protected abstract View createView();
 
-	public void ensureViewIsCreated() {
+	void ensureViewIsCreated() {
 		getView();
 	}
 
@@ -40,7 +40,7 @@ public abstract class ViewController implements ViewTreeObserver.OnGlobalLayoutL
 	}
 
 	@Nullable
-	public StackController getParentStackController() {
+    StackController getParentStackController() {
 		return parentStackController;
 	}
 
@@ -62,7 +62,7 @@ public abstract class ViewController implements ViewTreeObserver.OnGlobalLayoutL
 		return id;
 	}
 
-	public boolean isSameId(final String id) {
+	boolean isSameId(final String id) {
 		return StringUtils.isEqual(this.id, id);
 	}
 
@@ -87,7 +87,7 @@ public abstract class ViewController implements ViewTreeObserver.OnGlobalLayoutL
 		if (view != null) {
 			view.getViewTreeObserver().removeOnGlobalLayoutListener(this);
 			if (view.getParent() instanceof ViewGroup) {
-				((ViewGroup) view.getParent()).removeView(view);
+				((ViewManager) view.getParent()).removeView(view);
 			}
 			view = null;
 		}

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

@@ -0,0 +1,25 @@
+package com.reactnativenavigation.viewcontrollers.toptabs;
+
+import android.app.Activity;
+import android.support.annotation.NonNull;
+import android.view.ViewGroup;
+
+import com.reactnativenavigation.viewcontrollers.ViewController;
+import com.reactnativenavigation.views.TopTabCreator;
+
+public class TopTabController extends ViewController {
+    private String name;
+    private TopTabCreator topTabCreator;
+
+    public TopTabController(Activity activity, String id, String name, TopTabCreator topTabCreator) {
+        super(activity, id);
+        this.name = name;
+        this.topTabCreator = topTabCreator;
+    }
+
+    @NonNull
+    @Override
+    protected ViewGroup createView() {
+        return (ViewGroup) topTabCreator.create(getActivity(), getId(), name);
+    }
+}

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

@@ -0,0 +1,32 @@
+package com.reactnativenavigation.viewcontrollers.toptabs;
+
+import android.support.v4.view.PagerAdapter;
+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;
+
+    TopTabsAdapter(List<ViewController> tabs) {
+        this.tabs = tabs;
+    }
+
+    @Override
+    public int getCount() {
+        return tabs.size();
+    }
+
+    @Override
+    public boolean isViewFromObject(View view, Object object) {
+        return view == object;
+    }
+
+    @Override
+    public Object instantiateItem(ViewGroup container, int position) {
+        return tabs.get(position).getView();
+    }
+}

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

@@ -0,0 +1,33 @@
+package com.reactnativenavigation.viewcontrollers.toptabs;
+
+import android.app.Activity;
+import android.support.annotation.NonNull;
+import android.view.ViewGroup;
+
+import com.reactnativenavigation.viewcontrollers.ParentController;
+import com.reactnativenavigation.viewcontrollers.ViewController;
+
+import java.util.Collection;
+import java.util.List;
+
+public class TopTabsController extends ParentController {
+
+    private List<ViewController> tabs;
+
+    public TopTabsController(Activity activity, String id, List<ViewController> tabs) {
+        super(activity, id);
+        this.tabs = tabs;
+    }
+
+    @NonNull
+    @Override
+    protected ViewGroup createView() {
+        return new TopTabsViewPager(getActivity(), tabs);
+    }
+
+    @NonNull
+    @Override
+    public Collection<ViewController> getChildControllers() {
+        return tabs;
+    }
+}

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

@@ -0,0 +1,57 @@
+package com.reactnativenavigation.viewcontrollers.toptabs;
+
+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;
+
+import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
+
+public class TopTabsViewPager extends ViewPager implements ContainerViewController.IReactView {
+    private static final int OFFSCREEN_PAGE_LIMIT = 99;
+    private final List<ViewController> tabs;
+
+    public TopTabsViewPager(Context context, List<ViewController> tabs) {
+        super(context);
+        this.tabs = tabs;
+        init(tabs);
+    }
+
+    private void init(List<ViewController> tabs) {
+        setOffscreenPageLimit(OFFSCREEN_PAGE_LIMIT);
+        for (ViewController tab : tabs) {
+            addView(tab.getView(), new ViewGroup.LayoutParams(MATCH_PARENT, MATCH_PARENT));
+        }
+        setAdapter(new TopTabsAdapter(tabs));
+    }
+
+    @Override
+    public boolean isReady() {
+        return false;
+    }
+
+    @Override
+    public View asView() {
+        return null;
+    }
+
+    @Override
+    public void destroy() {
+
+    }
+
+    @Override
+    public void sendContainerStart() {
+
+    }
+
+    @Override
+    public void sendContainerStop() {
+
+    }
+}

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

@@ -12,11 +12,13 @@ import android.widget.TextView;
 
 public class TopBar extends AppBarLayout {
 	private final Toolbar titleBar;
+	private final TopTabs topTabs;
 
 	public TopBar(final Context context) {
 		super(context);
 		titleBar = new Toolbar(context);
-		addView(titleBar);
+        topTabs = new TopTabs(context);
+        addView(titleBar);
 	}
 
 	public void setTitle(String title) {

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

@@ -0,0 +1,55 @@
+package com.reactnativenavigation.views;
+
+import android.content.Context;
+import android.view.View;
+import android.widget.FrameLayout;
+
+import com.reactnativenavigation.viewcontrollers.ContainerViewController.IReactView;
+
+public class TopTab extends FrameLayout implements IReactView {
+
+	private 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);
+	}
+
+	@Override
+	public boolean isReady() {
+		return reactView.isReady();
+	}
+
+	@Override
+	public View asView() {
+		return this;
+	}
+
+	@Override
+	public void destroy() {
+		reactView.destroy();
+	}
+
+	@Override
+	public void sendContainerStart() {
+		reactView.sendContainerStart();
+	}
+
+	@Override
+	public void sendContainerStop() {
+		reactView.sendContainerStop();
+	}
+
+	public IReactView getReactView() {
+		return reactView;
+	}
+}

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

@@ -0,0 +1,19 @@
+package com.reactnativenavigation.views;
+
+import android.app.Activity;
+
+import com.reactnativenavigation.viewcontrollers.ContainerViewController;
+
+public class TopTabCreator implements ContainerViewController.ReactViewCreator {
+
+	private ContainerViewController.ReactViewCreator creator;
+
+	public TopTabCreator(ContainerViewController.ReactViewCreator creator) {
+		this.creator = creator;
+	}
+
+	@Override
+	public ContainerViewController.IReactView create(Activity activity, String containerId, String containerName) {
+        return new TopTab(activity, creator.create(activity, containerId, containerName));
+	}
+}

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

@@ -0,0 +1,11 @@
+package com.reactnativenavigation.views;
+
+import android.content.Context;
+import android.support.design.widget.TabLayout;
+
+public class TopTabs extends TabLayout {
+
+    public TopTabs(Context context) {
+        super(context);
+    }
+}

lib/src/commands/Commands.js

@@ -44,7 +44,7 @@ class Commands {
 
   push(onContainerId, containerData) {
     const input = _.cloneDeep(containerData);
-    const layout = this.layoutTreeParser.createContainer(input);
+    const layout = this.layoutTreeParser.parseFromSimpleJSON(input);
     this.layoutTreeCrawler.crawl(layout);
     return this.nativeCommandsSender.push(onContainerId, layout);
   }

lib/src/commands/LayoutTreeParser.js

@@ -12,17 +12,15 @@ class LayoutTreeParser {
     if (simpleJsonApi.bottomTabs) {
       return this._createTabs(simpleJsonApi.bottomTabs);
     }
+    if (simpleJsonApi.topTabs) {
+      return this._createTopTabsContainer(simpleJsonApi.topTabs);
+    }
+    if (simpleJsonApi.name) {
+      return this._createContainer(simpleJsonApi);
+    }
     return this._createContainerStackWithContainerData(simpleJsonApi.container);
   }
 
-  createContainer(data) {
-    return {
-      type: LayoutTypes.Container,
-      data,
-      children: []
-    };
-  }
-
   createDialogContainer(data) {
     return {
       type: LayoutTypes.CustomDialog,
@@ -38,10 +36,25 @@ class LayoutTreeParser {
     };
   }
 
+  _createTopTabsContainer(topTabs) {
+    return {
+      type: LayoutTypes.TopTabsContainer,
+      children: _.map(topTabs, (t) => this._createTopTab(t.container))
+    };
+  }
+
+  _createTopTab(data) {
+    return {
+      type: LayoutTypes.TopTab,
+      data,
+      children: []
+    };
+  }
+
   _createContainerStackWithContainerData(containerData) {
     return {
       type: LayoutTypes.ContainerStack,
-      children: [this.createContainer(containerData)]
+      children: [this._createContainer(containerData)]
     };
   }
 
@@ -57,7 +70,7 @@ class LayoutTreeParser {
     if (layout.sideMenu.left) {
       children.push({
         type: LayoutTypes.SideMenuLeft,
-        children: [this.createContainer(layout.sideMenu.left.container)]
+        children: [this._createContainer(layout.sideMenu.left.container)]
       });
     }
     children.push({
@@ -69,11 +82,19 @@ class LayoutTreeParser {
     if (layout.sideMenu.right) {
       children.push({
         type: LayoutTypes.SideMenuRight,
-        children: [this.createContainer(layout.sideMenu.right.container)]
+        children: [this._createContainer(layout.sideMenu.right.container)]
       });
     }
     return children;
   }
+
+  _createContainer(data) {
+    return {
+      type: LayoutTypes.Container,
+      data,
+      children: []
+    };
+  }
 }
 
 module.exports = LayoutTreeParser;

lib/src/commands/LayoutTreeParser.test.js

@@ -285,15 +285,45 @@ describe('LayoutTreeParser', () => {
           ]
         });
     });
+
+    it('parses bottomTabs with side menus', () => {
+      expect(uut.parseFromSimpleJSON(SimpleLayouts.singleScreenWithTopTabs))
+        .toEqual({
+          type: 'TopTabsContainer',
+          children: [
+            {
+              type: 'TopTab',
+              data: {
+                name: 'navigation.playground.TextScreen'
+              },
+              children: []
+            },
+            {
+              type: 'TopTab',
+              data: {
+                name: 'navigation.playground.TextScreen'
+              },
+              children: []
+            },
+            {
+              type: 'TopTab',
+              data: {
+                name: 'navigation.playground.TextScreen'
+              },
+              children: []
+            }
+          ]
+        });
+    });
   });
 
   describe('createContainer', () => {
     it('creates container object with passed data', () => {
-      expect(uut.createContainer({ foo: 'bar' })).toEqual({ type: 'Container', data: { foo: 'bar' }, children: [] });
+      expect(uut._createContainer({ foo: 'bar' })).toEqual({ type: 'Container', data: { foo: 'bar' }, children: [] });
     });
   });
 
-  describe('createDialogCOntainer', () => {
+  describe('createDialogContainer', () => {
     it('creates dialog container object with passed data', () => {
       expect(uut.createDialogContainer({ foo: 'bar' })).toEqual({ type: 'CustomDialog', data: { foo: 'bar' }, children: [] });
     });

lib/src/commands/LayoutTypes.js

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

lib/src/commands/SimpleLayouts.js

@@ -111,6 +111,26 @@ const tabBasedWithBothSideMenus = {
   }
 };
 
+const singleScreenWithTopTabs = {
+  topTabs: [
+    {
+      container: {
+        name: 'navigation.playground.TextScreen'
+      }
+    },
+    {
+      container: {
+        name: 'navigation.playground.TextScreen'
+      }
+    },
+    {
+      container: {
+        name: 'navigation.playground.TextScreen'
+      }
+    }
+  ]
+};
+
 module.exports = {
   singleScreenApp,
   passProps,
@@ -119,5 +139,6 @@ module.exports = {
   singleWithSideMenu,
   singleWithRightSideMenu,
   singleWithBothMenus,
-  tabBasedWithBothSideMenus
+  tabBasedWithBothSideMenus,
+  singleScreenWithTopTabs
 };

playground/src/containers/WelcomeScreen.js

@@ -22,6 +22,7 @@ class WelcomeScreen extends Component {
     this.onClickPushOptionsScreen = this.onClickPushOptionsScreen.bind(this);
     this.onClickPushOrientationMenuScreen = this.onClickPushOrientationMenuScreen.bind(this);
     this.onClickBackHandler = this.onClickBackHandler.bind(this);
+    this.onClickPushTopTabsScreen = this.onClickPushTopTabsScreen.bind(this);
   }
 
   render() {
@@ -33,6 +34,7 @@ class WelcomeScreen extends Component {
         <Button title="Push Lifecycle Screen" testID={testIDs.PUSH_LIFECYCLE_BUTTON} onPress={this.onClickLifecycleScreen} />
         <Button title="Push" testID={testIDs.PUSH_BUTTON} onPress={this.onClickPush} />
         <Button title="Push Options Screen" testID={testIDs.PUSH_OPTIONS_BUTTON} onPress={this.onClickPushOptionsScreen} />
+        <Button title="Push TopTabs screen" testID={testIDs.PUSH_TOP_TABS_BUTTON} onPress={this.onClickPushTopTabsScreen} />
         <Button title="Back Handler" testID={testIDs.BACK_HANDLER_BUTTON} onPress={this.onClickBackHandler} />
         <Button title="Show Modal" testID={testIDs.SHOW_MODAL_BUTTON} onPress={this.onClickShowModal} />
         <Button title="Show Redbox" testID={testIDs.SHOW_REDBOX_BUTTON} onPress={this.onClickShowRedbox} />
@@ -145,6 +147,37 @@ class WelcomeScreen extends Component {
     });
   }
 
+  onClickPushTopTabsScreen() {
+    Navigation.push(this.props.containerId, {
+      topTabs: [
+        {
+          container: {
+            name: 'navigation.playground.TextScreen',
+            passProps: {
+              text: 'This is top tab 1'
+            }
+          }
+        },
+        {
+          container: {
+            name: 'navigation.playground.TextScreen',
+            passProps: {
+              text: 'This is top tab 2'
+            }
+          }
+        },
+        {
+          container: {
+            name: 'navigation.playground.TextScreen',
+            passProps: {
+              text: 'This is top tab 3'
+            }
+          }
+        }
+      ]
+    });
+  }
+
   onClickBackHandler() {
     Navigation.push(this.props.containerId, {
       name: 'navigation.playground.BackHandlerScreen'