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

+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

 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;
             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

 			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

 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

 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;
     public void applyOptions(NavigationOptions options) {
         applyTopBarOptions(options.topBarOptions);
         applyButtons(options.leftButtons, options.rightButtons);
+        applyTopTabsOptions(options.topTabsOptions);
         applyTopTabOptions(options.topTabOptions);
     }
 
         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

 	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;
 	}
 	@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));
 		}
 
 
 
 	@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

     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

 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;
 
     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);
         }
     @NonNull
     @Override
     protected ViewGroup createView() {
-        topTabsLayout = new TopTabsLayout(getActivity(), tabs, adapter);
+        topTabsLayout = viewCreator.create();
         return topTabsLayout;
     }
 
 
     @Override
     public void onViewAppeared() {
+        applyOptions(navigationOptions);
         performOnCurrentTab(TopTabController::onViewAppeared);
     }
 
     }
 
     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

 
 import com.reactnativenavigation.parse.Button;
 import com.reactnativenavigation.viewcontrollers.toptabs.TopTabsViewPager;
+import com.reactnativenavigation.views.style.Color;
 
 import java.util.ArrayList;
 
         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

 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;
 
     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

     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

+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

 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;
         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

+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

+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

 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;
     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() {
         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) {
         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

 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 */
   /**
    * 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

 
   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

       return this._createTabs(simpleJsonApi.bottomTabs);
     }
     if (simpleJsonApi.topTabs) {
-      return this._createTopTabs(simpleJsonApi.topTabs);
+      return this._createTopTabs(simpleJsonApi);
     }
     if (simpleJsonApi.name) {
       return this._createContainer(simpleJsonApi);
     };
   }
 
-  _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

               },
               children: []
             }
-          ]
+          ],
+          data: {}
         });
     });
   });

lib/src/params/containers/Container.js

+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

 };
 const CONTAINER = {
   name: 'myScreen',
-  passProps: PASS_PROPS
+  passProps: PASS_PROPS,
+  navigationOptions: {}
+};
+const TOP_TABS_CONTAINER = {
+  topTabs: [
+    CONTAINER,
+    CONTAINER
+  ]
 };
 
 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

 const BottomTabs = require('./BottomTabs');
 const Button = require('./Button');
 const BottomTab = require('./BottomTab');
+const TopTabs = require('./TopTabs');
 
 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]
    */
     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

 const BottomTabs = require('./BottomTabs');
 const TopBar = require('./TopBar');
 const BottomTab = require('./BottomTab');
+const TopTabs = require('./TopTabs');
 
 const TAB_BAR = {};
 const TOP_BAR = {};
     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', () => {
     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

+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

+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

             }
           }
         }
-      ]
+      ],
+      navigationOptions: {
+        topTabs: {
+          selectedTabColor: '#12766b',
+          unselectedTabColor: 'red'
+        }
+      }
     });
   }