Implement selected and unselected toTab color (#2429)

* Implement selected and unselected toTab color

* Test options are applied when layout is visible

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

@@ -0,0 +1,12 @@
+package com.reactnativenavigation.parse;
+
+import com.reactnativenavigation.views.style.Color;
+import com.reactnativenavigation.views.style.NullColor;
+
+import org.json.JSONObject;
+
+public class ColorParser {
+    public static Color parse(JSONObject json, String color) {
+        return json.has(color) ? new Color(json.optInt(color)) : new NullColor();
+    }
+}

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

@@ -14,6 +14,7 @@ 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.TopTabsLayoutCreator;
 
 import java.util.ArrayList;
 import java.util.List;
@@ -136,7 +137,8 @@ public class LayoutFactory {
             tabController.setTabIndex(i);
             tabs.add(tabController);
         }
-        return new TopTabsController(activity, node.id, tabs);
+        NavigationOptions navigationOptions = NavigationOptions.parse(typefaceManager, node.getNavigationOptions(), defaultOptions);
+        return new TopTabsController(activity, node.id, tabs, new TopTabsLayoutCreator(activity, tabs), navigationOptions);
     }
 
     private ViewController createTopTab(LayoutNode node) {

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

@@ -44,12 +44,10 @@ public class TopBarOptions implements DEFAULT_VALUES {
 			textFontSize = other.textFontSize;
 		if (other.textFontFamily != null)
 			textFontFamily = other.textFontFamily;
-		if (other.hidden != NavigationOptions.BooleanOptions.NoValue) {
+		if (other.hidden != NavigationOptions.BooleanOptions.NoValue)
 			hidden = other.hidden;
-		}
-		if (other.animateHide != NavigationOptions.BooleanOptions.NoValue) {
+		if (other.animateHide != NavigationOptions.BooleanOptions.NoValue)
 			animateHide = other.animateHide;
-		}
 	}
 
     void mergeWithDefault(TopBarOptions defaultOptions) {

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

@@ -1,22 +1,41 @@
 package com.reactnativenavigation.parse;
 
+import android.support.annotation.NonNull;
 import android.support.annotation.Nullable;
 
+import com.reactnativenavigation.views.style.Color;
+import com.reactnativenavigation.views.style.NullColor;
+
 import org.json.JSONObject;
 
 public class TopTabsOptions implements DEFAULT_VALUES {
 
+    @NonNull public Color selectedTabColor = new NullColor();
+    @NonNull public Color unselectedTabColor = new NullColor();
+
     public static TopTabsOptions parse(@Nullable JSONObject json) {
         TopTabsOptions result = new TopTabsOptions();
         if (json == null) return result;
+        result.selectedTabColor = ColorParser.parse(json, "selectedTabColor");
+        result.unselectedTabColor = ColorParser.parse(json, "unselectedTabColor");
         return result;
     }
 
-    void mergeWith(TopTabsOptions topTabsOptions) {
-
+    void mergeWith(TopTabsOptions other) {
+        if (other.selectedTabColor.hasColor()) {
+            selectedTabColor = other.selectedTabColor;
+        }
+        if (other.unselectedTabColor.hasColor()) {
+            unselectedTabColor = other.unselectedTabColor;
+        }
     }
 
-    void mergeWithDefault(TopTabsOptions topTabsOptions) {
-
+    void mergeWithDefault(TopTabsOptions defaultOptions) {
+        if (!selectedTabColor.hasColor()) {
+            selectedTabColor = defaultOptions.selectedTabColor;
+        }
+        if (!unselectedTabColor.hasColor()) {
+            unselectedTabColor = defaultOptions.unselectedTabColor;
+        }
     }
 }

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

@@ -7,6 +7,7 @@ import com.reactnativenavigation.parse.Button;
 import com.reactnativenavigation.parse.NavigationOptions;
 import com.reactnativenavigation.parse.TopBarOptions;
 import com.reactnativenavigation.parse.TopTabOptions;
+import com.reactnativenavigation.parse.TopTabsOptions;
 import com.reactnativenavigation.views.TopBar;
 
 import java.util.ArrayList;
@@ -26,6 +27,7 @@ public class OptionsPresenter {
     public void applyOptions(NavigationOptions options) {
         applyTopBarOptions(options.topBarOptions);
         applyButtons(options.leftButtons, options.rightButtons);
+        applyTopTabsOptions(options.topTabsOptions);
         applyTopTabOptions(options.topTabOptions);
     }
 
@@ -70,6 +72,10 @@ public class OptionsPresenter {
         topBar.setButtons(leftButtons, rightButtons);
     }
 
+    private void applyTopTabsOptions(TopTabsOptions options) {
+        topBar.applyTopTabsColors(options.selectedTabColor, options.unselectedTabColor);
+    }
+
     private void applyTopTabOptions(TopTabOptions topTabOptions) {
         if (topTabOptions.fontFamily != null) {
             topBar.setTopTabFontFamily(topTabOptions.tabIndex, topTabOptions.fontFamily);

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

@@ -25,7 +25,8 @@ public class NavigationModule extends ReactContextBaseJavaModule {
 	private static final String NAME = "RNNBridgeModule";
 	private final ReactInstanceManager reactInstanceManager;
 
-	public NavigationModule(final ReactApplicationContext reactContext, final ReactInstanceManager reactInstanceManager) {
+	@SuppressWarnings("WeakerAccess")
+    public NavigationModule(final ReactApplicationContext reactContext, final ReactInstanceManager reactInstanceManager) {
 		super(reactContext);
 		this.reactInstanceManager = reactInstanceManager;
 	}
@@ -38,130 +39,78 @@ public class NavigationModule extends ReactContextBaseJavaModule {
 	@ReactMethod
 	public void setRoot(final ReadableMap rawLayoutTree, final Promise promise) {
 		final LayoutNode layoutTree = LayoutNodeParser.parse(JSONParser.parse(rawLayoutTree));
-		handle(new Runnable() {
-			@Override
-			public void run() {
-				final ViewController viewController = newLayoutFactory().create(layoutTree);
-				navigator().setRoot(viewController, promise);
-			}
-		});
+		handle(() -> {
+            final ViewController viewController = newLayoutFactory().create(layoutTree);
+            navigator().setRoot(viewController, promise);
+        });
 	}
 
 	@ReactMethod
 	public void setDefaultOptions(final ReadableMap options) {
         final NavigationOptions defaultOptions = NavigationOptions.parse(new TypefaceLoader(activity()), JSONParser.parse(options));
-        handle(new Runnable() {
-            @Override
-            public void run() {
-                navigator().setDefaultOptions(defaultOptions);
-            }
-        });
+        handle(() -> navigator().setDefaultOptions(defaultOptions));
     }
 
 	@ReactMethod
 	public void setOptions(final String onContainerId, final ReadableMap options) {
 		final NavigationOptions navOptions = NavigationOptions.parse(new TypefaceLoader(activity()), JSONParser.parse(options));
-		handle(new Runnable() {
-			@Override
-			public void run() {
-				navigator().setOptions(onContainerId, navOptions);
-			}
-		});
+		handle(() -> navigator().setOptions(onContainerId, navOptions));
 	}
 
 	@ReactMethod
 	public void push(final String onContainerId, final ReadableMap rawLayoutTree, final Promise promise) {
 		final LayoutNode layoutTree = LayoutNodeParser.parse(JSONParser.parse(rawLayoutTree));
-		handle(new Runnable() {
-			@Override
-			public void run() {
-				final ViewController viewController = newLayoutFactory().create(layoutTree);
-				navigator().push(onContainerId, viewController, promise);
-			}
-		});
+		handle(() -> {
+            final ViewController viewController = newLayoutFactory().create(layoutTree);
+            navigator().push(onContainerId, viewController, promise);
+        });
 	}
 
 	@ReactMethod
 	public void pop(final String onContainerId, final ReadableMap options, final Promise promise) {
-		handle(new Runnable() {
-			@Override
-			public void run() {
-				navigator().popSpecific(onContainerId, promise);
-			}
-		});
+		handle(() -> navigator().popSpecific(onContainerId, promise));
 	}
 
 	@ReactMethod
 	public void popTo(final String containerId, final Promise promise) {
-		handle(new Runnable() {
-			@Override
-			public void run() {
-				navigator().popTo(containerId, promise);
-			}
-		});
+		handle(() -> navigator().popTo(containerId, promise));
 	}
 
 	@ReactMethod
 	public void popToRoot(final String containerId, final Promise promise) {
-		handle(new Runnable() {
-			@Override
-			public void run() {
-				navigator().popToRoot(containerId, promise);
-			}
-		});
+		handle(() -> navigator().popToRoot(containerId, promise));
 	}
 
 	@ReactMethod
 	public void showModal(final ReadableMap rawLayoutTree, final Promise promise) {
 		final LayoutNode layoutTree = LayoutNodeParser.parse(JSONParser.parse(rawLayoutTree));
-		handle(new Runnable() {
-			@Override
-			public void run() {
-				final ViewController viewController = newLayoutFactory().create(layoutTree);
-				navigator().showModal(viewController, promise);
-			}
-		});
+		handle(() -> {
+            final ViewController viewController = newLayoutFactory().create(layoutTree);
+            navigator().showModal(viewController, promise);
+        });
 	}
 
 	@ReactMethod
 	public void dismissModal(final String containerId, final Promise promise) {
-		handle(new Runnable() {
-			@Override
-			public void run() {
-				navigator().dismissModal(containerId, promise);
-			}
-		});
+		handle(() -> navigator().dismissModal(containerId, promise));
 	}
 
 	@ReactMethod
 	public void dismissAllModals(final Promise promise) {
-		handle(new Runnable() {
-			@Override
-			public void run() {
-				navigator().dismissAllModals(promise);
-			}
-		});
+		handle(() -> navigator().dismissAllModals(promise));
 	}
 
 	@ReactMethod
 	public void showOverlay(final String type, final ReadableMap data, final Promise promise) {
 		if (OverlayFactory.Overlay.create(type) == OverlayFactory.Overlay.CustomDialog) {
 			final LayoutNode layoutTree = LayoutNodeParser.parse(JSONParser.parse(data));
-			handle(new Runnable() {
-				@Override
-				public void run() {
-					ViewController viewController = newLayoutFactory().create(layoutTree);
-					navigator().showOverlay(type, OverlayOptions.create(viewController), promise);
-				}
-			});
+			handle(() -> {
+                ViewController viewController = newLayoutFactory().create(layoutTree);
+                navigator().showOverlay(type, OverlayOptions.create(viewController), promise);
+            });
 		} else {
 			final OverlayOptions overlayOptions = OverlayOptions.parse(JSONParser.parse(data));
-			handle(new Runnable() {
-				@Override
-				public void run() {
-					navigator().showOverlay(type, overlayOptions, promise);
-				}
-			});
+			handle(() -> navigator().showOverlay(type, overlayOptions, promise));
 		}
 
 
@@ -169,12 +118,7 @@ public class NavigationModule extends ReactContextBaseJavaModule {
 
 	@ReactMethod
 	public void dismissOverlay() {
-		handle(new Runnable() {
-			@Override
-			public void run() {
-				navigator().dismissOverlay();
-			}
-		});
+		handle(() -> navigator().dismissOverlay());
 	}
 
 	private NavigationActivity activity() {

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

@@ -11,7 +11,7 @@ public class TopTabsAdapter extends PagerAdapter implements ViewPager.OnPageChan
     private List<TopTabController> tabs;
     private int currentPage = 0;
 
-    TopTabsAdapter(List<TopTabController> tabs) {
+    public TopTabsAdapter(List<TopTabController> tabs) {
         this.tabs = tabs;
     }
 

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

@@ -10,6 +10,7 @@ import com.reactnativenavigation.utils.Task;
 import com.reactnativenavigation.viewcontrollers.ParentController;
 import com.reactnativenavigation.viewcontrollers.ViewController;
 import com.reactnativenavigation.views.TopTabsLayout;
+import com.reactnativenavigation.views.TopTabsLayoutCreator;
 
 import java.util.Collection;
 import java.util.List;
@@ -18,12 +19,14 @@ public class TopTabsController extends ParentController implements NavigationOpt
 
     private List<TopTabController> tabs;
     private TopTabsLayout topTabsLayout;
-    private TopTabsAdapter adapter;
+    private TopTabsLayoutCreator viewCreator;
+    private NavigationOptions navigationOptions;
 
-    public TopTabsController(Activity activity, String id, List<TopTabController> tabs) {
+    public TopTabsController(Activity activity, String id, List<TopTabController> tabs, TopTabsLayoutCreator viewCreator, NavigationOptions navigationOptions) {
         super(activity, id);
+        this.viewCreator = viewCreator;
+        this.navigationOptions = navigationOptions;
         this.tabs = tabs;
-        this.adapter = new TopTabsAdapter(tabs);
         for (ViewController tab : tabs) {
             tab.setParentController(this);
         }
@@ -32,7 +35,7 @@ public class TopTabsController extends ParentController implements NavigationOpt
     @NonNull
     @Override
     protected ViewGroup createView() {
-        topTabsLayout = new TopTabsLayout(getActivity(), tabs, adapter);
+        topTabsLayout = viewCreator.create();
         return topTabsLayout;
     }
 
@@ -44,6 +47,7 @@ public class TopTabsController extends ParentController implements NavigationOpt
 
     @Override
     public void onViewAppeared() {
+        applyOptions(navigationOptions);
         performOnCurrentTab(TopTabController::onViewAppeared);
     }
 
@@ -67,6 +71,6 @@ public class TopTabsController extends ParentController implements NavigationOpt
     }
 
     private void performOnCurrentTab(Task<TopTabController> task) {
-        task.run(tabs.get(adapter.getCurrentItem()));
+        task.run(tabs.get(topTabsLayout.getCurrentItem()));
     }
 }

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

@@ -15,6 +15,7 @@ import android.widget.TextView;
 
 import com.reactnativenavigation.parse.Button;
 import com.reactnativenavigation.viewcontrollers.toptabs.TopTabsViewPager;
+import com.reactnativenavigation.views.style.Color;
 
 import java.util.ArrayList;
 
@@ -62,6 +63,10 @@ public class TopBar extends AppBarLayout {
         topTabs.setFontFamily(tabIndex, fontFamily);
     }
 
+    public void applyTopTabsColors(Color selectedTabColor, Color unselectedTabColor) {
+        topTabs.applyTopTabsColors(selectedTabColor, unselectedTabColor);
+    }
+
 	public void setButtons(ArrayList<Button> leftButtons, ArrayList<Button> rightButtons) {
 		setLeftButtons(leftButtons);
 		setRightButtons(rightButtons);

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

@@ -4,6 +4,8 @@ import android.content.Context;
 import android.graphics.Typeface;
 import android.support.design.widget.TabLayout;
 
+import com.reactnativenavigation.views.style.Color;
+
 public class TopTabs extends TabLayout {
     private final TopTabsStyleHelper styleHelper;
 
@@ -15,4 +17,16 @@ public class TopTabs extends TabLayout {
     public void setFontFamily(int tabIndex, Typeface fontFamily) {
         styleHelper.setFontFamily(tabIndex, fontFamily);
     }
+
+    public int[] getSelectedTabColors() {
+        return SELECTED_STATE_SET;
+    }
+
+    public int[] getDefaultTabColors() {
+        return EMPTY_STATE_SET;
+    }
+
+    public void applyTopTabsColors(Color selectedTabColor, Color unselectedTabColor) {
+        styleHelper.applyTopTabsColors(selectedTabColor, unselectedTabColor);
+    }
 }

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

@@ -60,4 +60,8 @@ public class TopTabsLayout extends LinearLayout implements Container {
     public void switchToTab(int index) {
         viewPager.setCurrentItem(index);
     }
+
+    public int getCurrentItem() {
+        return viewPager.getCurrentItem();
+    }
 }

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

@@ -0,0 +1,22 @@
+package com.reactnativenavigation.views;
+
+import android.content.Context;
+
+import com.reactnativenavigation.viewcontrollers.toptabs.TopTabController;
+import com.reactnativenavigation.viewcontrollers.toptabs.TopTabsAdapter;
+
+import java.util.List;
+
+public class TopTabsLayoutCreator {
+    private Context context;
+    private List<TopTabController> tabs;
+
+    public TopTabsLayoutCreator(Context context, List<TopTabController> tabs) {
+        this.context = context;
+        this.tabs = tabs;
+    }
+
+    public TopTabsLayout create() {
+        return new TopTabsLayout(context, tabs, new TopTabsAdapter(tabs));
+    }
+}

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

@@ -1,10 +1,13 @@
 package com.reactnativenavigation.views;
 
+import android.content.res.ColorStateList;
 import android.graphics.Typeface;
 import android.view.ViewGroup;
 import android.widget.TextView;
 
+import com.reactnativenavigation.utils.Task;
 import com.reactnativenavigation.utils.ViewUtils;
+import com.reactnativenavigation.views.style.Color;
 
 class TopTabsStyleHelper {
     private TopTabs topTabs;
@@ -13,10 +16,32 @@ class TopTabsStyleHelper {
         this.topTabs = topTabs;
     }
 
+    void applyTopTabsColors(Color selected, Color unselected) {
+        if (!selected.hasColor() && !unselected.hasColor()) return;
+
+        ColorStateList originalColors = topTabs.getTabTextColors();
+        int selectedTabColor = originalColors != null ? originalColors.getColorForState(topTabs.getSelectedTabColors(), -1) : -1;
+        int tabTextColor = originalColors != null ? originalColors.getColorForState(topTabs.getDefaultTabColors(), -1) : -1;
+
+        if (selected.hasColor()) {
+            tabTextColor = selected.get();
+        }
+
+        if (unselected.hasColor()) {
+            selectedTabColor = unselected.get();
+        }
+
+        topTabs.setTabTextColors(tabTextColor, selectedTabColor);
+    }
+
     void setFontFamily(int tabIndex, Typeface fontFamily) {
+        applyOnTabTitle(tabIndex, (title) -> title.setTypeface(fontFamily));
+    }
+
+    private void applyOnTabTitle(int tabIndex, Task<TextView> action) {
         TextView title = ViewUtils.findChildByClass(getTabView(tabIndex), TextView.class);
         if (title != null) {
-            title.setTypeface(fontFamily);
+            action.run(title);
         }
     }
 

lib/android/app/src/main/java/com/reactnativenavigation/views/style/Color.java

@@ -0,0 +1,30 @@
+package com.reactnativenavigation.views.style;
+
+import android.support.annotation.ColorInt;
+
+public class Color {
+
+    private Integer color;
+
+    public Color(@ColorInt int color) {
+        this.color = color;
+    }
+
+    public boolean hasColor() {
+        return color != null;
+    }
+
+    @ColorInt
+    public int get() {
+        if (hasColor()) {
+            return color;
+        }
+        throw new RuntimeException("Tried to get null color!");
+    }
+
+    @SuppressWarnings("MagicNumber")
+    @Override
+    public String toString() {
+        return String.format("#%06X", (0xFFFFFF & get()));
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/views/style/NullColor.java

@@ -0,0 +1,18 @@
+package com.reactnativenavigation.views.style;
+
+public class NullColor extends Color {
+
+    public NullColor() {
+        super(0);
+    }
+
+    public boolean hasColor() {
+        return false;
+    }
+
+    @SuppressWarnings("MagicNumber")
+    @Override
+    public String toString() {
+        return "Null Color";
+    }
+}

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

@@ -8,10 +8,13 @@ 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.TopTabsAdapter;
 import com.reactnativenavigation.viewcontrollers.toptabs.TopTabsController;
 import com.reactnativenavigation.views.TopTabsLayout;
+import com.reactnativenavigation.views.TopTabsLayoutCreator;
 
 import org.junit.Test;
+import org.mockito.Mockito;
 
 import java.util.ArrayList;
 import java.util.List;
@@ -28,6 +31,8 @@ public class TopTabsViewControllerTest extends BaseTest {
     private List<TopTabLayoutMock> tabs = new ArrayList<>(SIZE);
     private List<TopTabController> tabControllers = new ArrayList<>(SIZE);
     private List<NavigationOptions> tabOptions = new ArrayList<>(SIZE);
+    private NavigationOptions navigationOptions;
+    private TopTabsLayout topTabsLayout;
 
     @Override
     public void beforeEach() {
@@ -36,7 +41,12 @@ public class TopTabsViewControllerTest extends BaseTest {
         tabs.clear();
         Activity activity = newActivity();
         createTabs(activity);
-        uut = new TopTabsController(activity, "containerId", tabControllers);
+        navigationOptions = new NavigationOptions();
+        topTabsLayout = spy(new TopTabsLayout(activity, tabControllers, new TopTabsAdapter(tabControllers)));
+
+        TopTabsLayoutCreator layoutCreator = Mockito.mock(TopTabsLayoutCreator.class);
+        Mockito.when(layoutCreator.create()).thenReturn(topTabsLayout);
+        uut = new TopTabsController(activity, "containerId", tabControllers, layoutCreator, navigationOptions);
     }
 
     private void createTabs(Activity activity) {
@@ -116,6 +126,13 @@ public class TopTabsViewControllerTest extends BaseTest {
         verify(tabControllers.get(0), times(2)).applyOptions(tabOptions.get(0));
     }
 
+    @Test
+    public void appliesOptionsOnLayoutWhenVisible() throws Exception {
+        uut.ensureViewIsCreated();
+        uut.onViewAppeared();
+        verify(topTabsLayout, times(1)).applyOptions(navigationOptions);
+    }
+
     private IReactView tab(TopTabsLayout topTabs, final int index) {
         return (IReactView) ((ViewGroup) topTabs.getViewPager().getChildAt(index)).getChildAt(0);
     }

lib/src/Navigation.js

@@ -10,6 +10,7 @@ const PrivateEventsListener = require('./events/PrivateEventsListener');
 const PublicEventsRegistry = require('./events/PublicEventsRegistry');
 const Element = require('./adapters/Element');
 const Root = require('./params/containers/Root');
+const Container = require('./params/containers/Container');
 const NavigationOptions = require('./params/options/NavigationOptions');
 
 /** @constructor */
@@ -89,10 +90,10 @@ class Navigation {
   /**
    * Push a new screen into this screen's navigation stack.
    * @param {string} containerId The container's id.
-   * @param {*} params
+   * @param {Container} container
    */
-  push(containerId, params) {
-    return this.commands.push(containerId, params);
+  push(containerId, container) {
+    return this.commands.push(containerId, new Container(container));
   }
 
   /**

lib/src/commands/Commands.js

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

lib/src/commands/LayoutTreeParser.js

@@ -13,7 +13,7 @@ class LayoutTreeParser {
       return this._createTabs(simpleJsonApi.bottomTabs);
     }
     if (simpleJsonApi.topTabs) {
-      return this._createTopTabs(simpleJsonApi.topTabs);
+      return this._createTopTabs(simpleJsonApi);
     }
     if (simpleJsonApi.name) {
       return this._createContainer(simpleJsonApi);
@@ -36,10 +36,11 @@ class LayoutTreeParser {
     };
   }
 
-  _createTopTabs(topTabs) {
+  _createTopTabs(node) {
     return {
       type: LayoutTypes.TopTabs,
-      children: _.map(topTabs, (t) => this._createTopTab(t))
+      data: _.pick(node, 'navigationOptions'),
+      children: _.map(node.topTabs, (t) => this._createTopTab(t))
     };
   }
 

lib/src/commands/LayoutTreeParser.test.js

@@ -312,7 +312,8 @@ describe('LayoutTreeParser', () => {
               },
               children: []
             }
-          ]
+          ],
+          data: {}
         });
     });
   });

lib/src/params/containers/Container.js

@@ -1,16 +1,20 @@
+const NavigationOptions = require('./../options/NavigationOptions');
+
 class Container {
   /**
    * @property {string} name The container's registered name
+   * @property {Container[]} [topTabs]
    * @property {object} [passProps] props
    * @property {NavigationOptions} navigationOptions
    */
   constructor(params) {
-    if (!params || !params.name) {
-      throw new Error('Container name is undefined');
-    }
     this.name = params.name;
+    if (params.topTabs) {
+      params.topTabs.map((t) => new Container(t));
+      this.topTabs = params.topTabs;
+    }
     this.passProps = params.passProps;
-    this.navigationOptions = params.navigationOptions;
+    this.navigationOptions = params.navigationOptions && new NavigationOptions(params.navigationOptions);
   }
 }
 

lib/src/params/containers/Container.test.js

@@ -5,7 +5,14 @@ const PASS_PROPS = {
 };
 const CONTAINER = {
   name: 'myScreen',
-  passProps: PASS_PROPS
+  passProps: PASS_PROPS,
+  navigationOptions: {}
+};
+const TOP_TABS_CONTAINER = {
+  topTabs: [
+    CONTAINER,
+    CONTAINER
+  ]
 };
 
 describe('ContainerRegistry', () => {
@@ -13,9 +20,11 @@ describe('ContainerRegistry', () => {
     const uut = new Container(CONTAINER);
     expect(uut.name).toBe('myScreen');
     expect(uut.passProps).toEqual(PASS_PROPS);
+    expect(uut.navigationOptions).toEqual({});
   });
 
-  it('throws if container name is missing', () => {
-    expect(() => new Container()).toThrowError('Container name is undefined');
+  it('parses TopTabs container', () => {
+    const uut = new Container(TOP_TABS_CONTAINER);
+    expect(uut.topTabs).toEqual([CONTAINER, CONTAINER]);
   });
 });

lib/src/params/options/NavigationOptions.js

@@ -2,6 +2,7 @@ const TopBar = require('./TopBar');
 const BottomTabs = require('./BottomTabs');
 const Button = require('./Button');
 const BottomTab = require('./BottomTab');
+const TopTabs = require('./TopTabs');
 
 class NavigationOptions {
   /**
@@ -9,6 +10,7 @@ class NavigationOptions {
    * @property {options:BottomTabs} [bottomTabs]
    * @property {options:BottomTab} [bottomTab]
    * @property {string} [orientation]
+   * @property {options:TopTabs} [topTabs]
    * @property {options:Button[]} [rightButtons]
    * @property {options:Button[]} [leftButtons]
    */
@@ -23,6 +25,7 @@ class NavigationOptions {
     this.backgroundImage = options.backgroundImage;
     this.rootBackgroundImage = options.rootBackgroundImage;
     this.screenBackgroundColor = options.screenBackgroundColor;
+    this.topTabs = options.topTabs && new TopTabs(options.topTabs);
   }
 }
 

lib/src/params/options/NavigationOptions.test.js

@@ -2,6 +2,7 @@ const NavigationOptions = require('./NavigationOptions');
 const BottomTabs = require('./BottomTabs');
 const TopBar = require('./TopBar');
 const BottomTab = require('./BottomTab');
+const TopTabs = require('./TopTabs');
 
 const TAB_BAR = {};
 const TOP_BAR = {};
@@ -22,13 +23,18 @@ const LEFT_BUTTONS = [
     buttonColor: 'red'
   }
 ];
+const TOP_TABS = {
+  selectedTabColor: 'blue',
+  unselectedTabColor: 'red'
+};
 const NAVIGATION_OPTIONS = {
   topBar: TOP_BAR,
   bottomTabs: TAB_BAR,
   bottomTab: TAB_ITEM,
   orientation: 'portrait',
   rightButtons: RIGHT_BUTTONS,
-  leftButtons: LEFT_BUTTONS
+  leftButtons: LEFT_BUTTONS,
+  topTabs: TOP_TABS
 };
 
 describe('NavigationOptions', () => {
@@ -40,5 +46,6 @@ describe('NavigationOptions', () => {
     expect(uut.orientation).toEqual('portrait');
     expect(uut.rightButtons).toEqual(RIGHT_BUTTONS);
     expect(uut.leftButtons).toEqual(LEFT_BUTTONS);
+    expect(uut.topTabs).toBeInstanceOf(TopTabs);
   });
 });

lib/src/params/options/TopTabs.js

@@ -0,0 +1,12 @@
+class TopTabs {
+  /**
+   * @property {string} [selectedTabColor] Selected tab color
+   * @property {string} unselectedTabColor Unselected tab color
+   */
+  constructor(topTabs) {
+    this.selectedTabColor = topTabs.selectedTabColor;
+    this.unselectedTabColor = topTabs.unselectedTabColor;
+  }
+}
+
+module.exports = TopTabs;

lib/src/params/options/TopTabs.test.js

@@ -0,0 +1,14 @@
+const TopTabs = require('./TopTabs');
+
+const TOP_TABS = {
+  selectedTabColor: 'red',
+  unselectedTabColor: 'blue'
+};
+
+describe('TopTabs', () => {
+  it('Parses TopTabs', () => {
+    const uut = new TopTabs(TOP_TABS);
+    expect(uut.selectedTabColor).toEqual('red');
+    expect(uut.unselectedTabColor).toEqual('blue');
+  });
+});

playground/src/containers/WelcomeScreen.js

@@ -199,7 +199,13 @@ class WelcomeScreen extends Component {
             }
           }
         }
-      ]
+      ],
+      navigationOptions: {
+        topTabs: {
+          selectedTabColor: '#12766b',
+          unselectedTabColor: 'red'
+        }
+      }
     });
   }