Merge branch 'v2' of https://github.com/wix/react-native-navigation into v2

Jenkinsfile

       }
     }
   }
-}
+}
+

docs/_sidebar.md

  - [Top Level](/docs/Navigation)
 - Params
  - [Root](/docs/Root)
- - [Container](/docs/Container)
+ - [Component](/docs/Component)
  - [SideMenu](/docs/SideMenu)
 - Options
  - [NavigationOptions](/docs/options/NavigationOptions)

docs/docs/Container.md → docs/docs/Component.md

-<h1>Container</h1>
+<h1>Component</h1>
 
 **Properties**
 
 | Name | Type | Description |
 | --- | --- | --- |
-| name | <code>string</code> | The container's registered name |
-| topTabs | [<code>Array.&lt;Container&gt;</code>](#Container) |  |
+| name | <code>string</code> | The components registered name |
+| topTabs | [<code>Array.&lt;Component&gt;</code>](#Component) |  |
 | passProps | <code>object</code> | props |
 | options | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Options">Options</a> |  |
 

docs/docs/Navigation.md

 # Navigation
 
 * [Navigation](#Navigation)
-    * [.registerContainer(containerName, getContainerFunc)](#Navigation+registerContainer)
+    * [.registerComponent(componentName, getComponentFunc)](#Navigation+registerComponent)
     * [.setRoot(root)](#Navigation+setRoot)
     * [.setDefaultOptions(options)](#Navigation+setDefaultOptions)
-    * [.setOptions(containerId, options)](#Navigation+setOptions)
+    * [.setOptions(componentId, options)](#Navigation+setOptions)
     * [.showModal(params)](#Navigation+showModal)
-    * [.dismissModal(containerId)](#Navigation+dismissModal)
+    * [.dismissModal(componentId)](#Navigation+dismissModal)
     * [.dismissAllModals()](#Navigation+dismissAllModals)
-    * [.push(containerId, container)](#Navigation+push)
-    * [.pop(containerId, params)](#Navigation+pop)
-    * [.popTo(containerId)](#Navigation+popTo)
-    * [.popToRoot(containerId)](#Navigation+popToRoot)
+    * [.push(componentId, component)](#Navigation+push)
+    * [.pop(componentId, params)](#Navigation+pop)
+    * [.popTo(componentId)](#Navigation+popTo)
+    * [.popToRoot(componentId)](#Navigation+popToRoot)
     * [.events()](#Navigation+events)
 
 
 * * *
 
-<a name="Navigation+registerContainer"></a>
+<a name="Navigation+registerComponent"></a>
 
-## navigation.registerContainer(containerName, getContainerFunc)
+## navigation.registerComponent(componentName, getComponentFunc)
 Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component.
 
 
 | Param | Type | Description |
 | --- | --- | --- |
-| containerName | <code>string</code> | Unique container name |
-| getContainerFunc | <code>function</code> | generator function, typically `() => require('./myContainer')` |
+| componentName | <code>string</code> | Unique component name |
+| getComponentFunc | <code>function</code> | generator function, typically `() => require('./myComponent')` |
 
 
 * * *
 
 | Param | Type |
 | --- | --- |
-| root | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Root">Root</a> | 
+| root | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Root">Root</a> |
 
 
 * * *
 
 | Param | Type |
 | --- | --- |
-| options | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/NavigationOptions">NavigationOptions</a> | 
+| options | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/NavigationOptions">NavigationOptions</a> |
 
 
 * * *
 
 <a name="Navigation+setOptions"></a>
 
-## navigation.setOptions(containerId, options)
-Change a containers navigation options
+## navigation.setOptions(componentId, options)
+Change a components navigation options
 
 
 | Param | Type | Description |
 | --- | --- | --- |
-| containerId | <code>string</code> | The container's id. |
+| componentId | <code>string</code> | The component's id. |
 | options | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/NavigationOptions">NavigationOptions</a> |  |
 
 
 
 | Param | Type |
 | --- | --- |
-| params | <code>object</code> | 
+| params | <code>object</code> |
 
 
 * * *
 
 <a name="Navigation+dismissModal"></a>
 
-## navigation.dismissModal(containerId)
-Dismiss a modal by containerId. The dismissed modal can be anywhere in the stack.
+## navigation.dismissModal(componentId)
+Dismiss a modal by componentId. The dismissed modal can be anywhere in the stack.
 
 
 | Param | Type | Description |
 | --- | --- | --- |
-| containerId | <code>string</code> | The container's id. |
+| componentId | <code>string</code> | The component's id. |
 
 
 * * *
 
 <a name="Navigation+push"></a>
 
-## navigation.push(containerId, container)
+## navigation.push(componentId, component)
 Push a new screen into this screen's navigation stack.
 
 
 | Param | Type | Description |
 | --- | --- | --- |
-| containerId | <code>string</code> | The container's id. |
-| container | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container</a> |  |
+| componentId | <code>string</code> | The component's id. |
+| component | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Component">Component</a> |  |
 
 
 * * *
 
 <a name="Navigation+pop"></a>
 
-## navigation.pop(containerId, params)
-Pop a container from the stack, regardless of it's position.
+## navigation.pop(componentId, params)
+Pop a component from the stack, regardless of it's position.
 
 
 | Param | Type | Description |
 | --- | --- | --- |
-| containerId | <code>string</code> | The container's id. |
+| componentId | <code>string</code> | The component's id. |
 | params | <code>*</code> |  |
 
 
 
 <a name="Navigation+popTo"></a>
 
-## navigation.popTo(containerId)
-Pop the stack to a given container
+## navigation.popTo(componentId)
+Pop the stack to a given component
 
 
 | Param | Type | Description |
 | --- | --- | --- |
-| containerId | <code>string</code> | The container's id. |
+| componentId | <code>string</code> | The component's id. |
 
 
 * * *
 
 <a name="Navigation+popToRoot"></a>
 
-## navigation.popToRoot(containerId)
-Pop the container's stack to root.
+## navigation.popToRoot(componentId)
+Pop the component's stack to root.
 
 
 | Param | Type |
 | --- | --- |
-| containerId | <code>*</code> | 
+| componentId | <code>*</code> |
 
 
 * * *
 
 ## navigation.events()
 Obtain the events registery instance
-

docs/docs/Root.md

 
 | Name | Type |
 | --- | --- |
-| container | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container</a> | 
+| component | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Component">Component</a> | 
 | sideMenu | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/SideMenu">SideMenu</a> | 
-| bottomTabs | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container[]</a> | 
+| bottomTabs | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Component">Component[]</a> | 
 

docs/docs/SideMenu.md

 
 | Name | Type |
 | --- | --- |
-| left | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container</a> | 
-| right | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container</a> | 
+| left | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Component">Component</a> | 
+| right | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Component">Component</a> | 
 

docs/docs/usage.md

 
 ### Navigation
 ```js
-import Navigation from 'react-native-navigation';
+import { Navigation } from 'react-native-navigation';
 ```
 ### Events - On App Launched
 How to initiate your app.
   },
 });
 ```
+
+Start a stack based app (with options):
+
+```js
+Navigation.setRoot({
+  stack: {
+    options: {
+      topBar: {
+        hidden: true,
+      },
+    },
+    children: [
+      {
+        component: {
+          name: 'navigation.playground.TextScreen',
+          passProps: {
+            text: 'This is tab 1',
+            myFunction: () => 'Hello from a function!',
+          },
+        },
+      },
+      {
+        component: {
+          name: 'navigation.playground.TextScreen',
+          passProps: {
+            text: 'This is tab 2',
+          },
+        },
+      },
+    ],
+  },
+});
+```
 ## Screen API
 
 ### push(params)
 Push a new screen into this screen's navigation stack.
 
 ```js
-Navigation.push(this.props.containerId, {
+Navigation.push(this.props.componentId, {
   name: 'navigation.playground.PushedScreen',
   passProps: {}
 });
 ```
-### pop(containerId)
+### pop(componentId)
 Pop the top screen from this screen's navigation stack.
 
 ```js
-Navigation.pop(this.props.containerId);
+Navigation.pop(this.props.componentId);
 ```
-### popTo(containerId)
+### popTo(componentId)
 ```js
 Navigation.popTo(previousScreenId);
 ```
 Pop all the screens until the root from this screen's navigation stack
 
 ```js
-Navigation.popToRoot(this.props.containerId);
+Navigation.popToRoot(this.props.componentId);
 ```
 ### showModal(params = {})
 Show a screen as a modal.
 
 ```js
 Navigation.showModal({
-  container: {
+  component: {
     name: 'navigation.playground.ModalScreen',
     passProps: {
         key: 'value'
   }
 });
 ```
-### dismissModal(containerId)
+### dismissModal(componentId)
 Dismiss modal.
 
 ```js
-Navigation.dismissModal(this.props.containerId);
+Navigation.dismissModal(this.props.componentId);
 ```
 ### dismissAllModals()
 Dismiss all the current modals at the same time.

docs/docs/v1tov2diff.md

 There are ways to solve some of these problems in v1 but they are not straightforward. We want to change that.
 
 #### New API
-To solve this problem in v2, every screen receives as a prop it’s containerId. Whenever you want to perform an action from that screen you need to pass the containerId to the function:
+To solve this problem in v2, every screen receives as a prop it’s componentId. Whenever you want to perform an action from that screen you need to pass the componentId to the function:
 ```js
-Navigator.pop(this.props.containerId)
+Navigator.pop(this.props.componentId)
 ```
 ### Built for Contributors
 Currently, it requires a lot of work to accept pull requests. We need to manually make sure that everything works before we approve them because v1 is not thoroughly tested. <br>
 ```js
 Navigation.events().onAppLaunched(() => {
     Navigation.setRoot({
-      container: {
+      component: {
         name: 'navigation.playground.WelcomeScreen'
       }
     });
   });
 ```
 
-#### registerContainer(screenID, generator)
+#### registerComponent(screenID, generator)
 Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component.
 
 ```js
-Navigation.registerContainer(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
+Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
 ```
 
 #### setRoot({params})
 
 ```js
 Navigation.setRoot({
-      container: {
+      component: {
         name: 'navigation.playground.WelcomeScreen'
       },
       sideMenu: {
         left: {
-          container: {
+          component: {
             name: 'navigation.playground.TextScreen',
             passProps: {
               text: 'This is a left side menu screen'
           }
         },
         right: {
-          container: {
+          component: {
             name: 'navigation.playground.TextScreen',
             passProps: {
               text: 'This is a right side menu screen'
 Navigation.setRoot({
       tabs: [
         {
-          container: {
+          component: {
             name: 'navigation.playground.TextScreen',
             passProps: {
               text: 'This is tab 1',
           }
         },
         {
-          container: {
+          component: {
             name: 'navigation.playground.TextScreen',
             passProps: {
               text: 'This is tab 2'
 Push a new screen into this screen's navigation stack.
 
 ```js
-Navigation.push(this.props.containerId, {
+Navigation.push(this.props.componentId, {
       name: 'navigation.playground.PushedScreen',
       passProps: {}
     });
 ```
-#### pop(containerId)
+#### pop(componentId)
 Pop the top screen from this screen's navigation stack.
 
 ```js
-Navigation.pop(this.props.containerId);
+Navigation.pop(this.props.componentId);
 ```
 #### popTo(params)
 
 ```js
-Navigation.popTo(this.props.containerId, this.props.previousScreenIds[0]);
+Navigation.popTo(this.props.componentId, this.props.previousScreenIds[0]);
 ```
 #### popToRoot()
 Pop all the screens until the root from this screen's navigation stack
 
 ```js
-Navigation.popToRoot(this.props.containerId);
+Navigation.popToRoot(this.props.componentId);
 ```
 #### showModal(params = {})
 Show a screen as a modal.
 
 ```js
 Navigation.showModal({
-      container: {
+      component: {
         name: 'navigation.playground.ModalScreen',
         passProps: {
             key: 'value'
       }
     });
 ```
-#### dismissModal(containerId)
+#### dismissModal(componentId)
 Dismiss modal.
 
 ```js
-Navigation.dismissModal(this.props.containerId);
+Navigation.dismissModal(this.props.componentId);
 ```
 #### dismissAllModals()
 Dismiss all the current modals at the same time.

e2e/CustomTransition.js

 
 const Utils = require('./Utils');
+const testIDs = require('../playground/src/testIDs');
 
-const elementByLabel = Utils.elementByLabel;
+const elementById = Utils.elementById;
 
 describe('custom transition', () => {
   beforeEach(async () => {
   });
 
   it('sanity', async () => {
-    await elementByLabel('Push Options Screen').tap();
-    await elementByLabel('Custom Transition').tap();
+    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
+    await elementById(testIDs.CUSTOM_TRANSITION_BUTTON).tap();
     await expect(element(by.id('shared_image1'))).toExist();
     await element(by.id('shared_image1')).tap();
     await expect(element(by.id('shared_image2'))).toExist();

e2e/Orientations.test.js

     await device.relaunchApp();
   });
 
-  afterEach(async () => {
-    await device.setOrientation('landscape');
-    await device.setOrientation('portrait');
-  });
-
   it('default allows all', async () => {
     await elementById(testIDs.ORIENTATION_BUTTON).tap();
     await elementById(testIDs.DEFAULT_ORIENTATION_BUTTON).tap();
-    await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
+    await expect(elementById(testIDs.PORTRAIT_ELEMENT)).toBeVisible();
     await device.setOrientation('landscape');
-    await expect(element(by.id('currentOrientation'))).toHaveText('Landscape');
+    await expect(elementById(testIDs.LANDSCAPE_ELEMENT)).toBeVisible();
     await device.setOrientation('portrait');
-    await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
+    await expect(elementById(testIDs.PORTRAIT_ELEMENT)).toBeVisible();
     await elementById(testIDs.DISMISS_BUTTON).tap();
   });
 
   it('landscape and portrait array', async () => {
     await elementById(testIDs.ORIENTATION_BUTTON).tap();
     await elementById(testIDs.LANDSCAPE_PORTRAIT_ORIENTATION_BUTTON).tap();
-    await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
+    await expect(element(by.id(testIDs.PORTRAIT_ELEMENT))).toBeVisible();
     await device.setOrientation('landscape');
-    await expect(element(by.id('currentOrientation'))).toHaveText('Landscape');
+    await expect(element(by.id(testIDs.LANDSCAPE_ELEMENT))).toBeVisible();
     await device.setOrientation('portrait');
-    await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
+    await expect(element(by.id(testIDs.PORTRAIT_ELEMENT))).toBeVisible();
     await elementById(testIDs.DISMISS_BUTTON).tap();
   });
 
   it('portrait only', async () => {
     await elementById(testIDs.ORIENTATION_BUTTON).tap();
     await elementById(testIDs.PORTRAIT_ORIENTATION_BUTTON).tap();
-    await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
+    await expect(elementById(testIDs.PORTRAIT_ELEMENT)).toBeVisible();
     await device.setOrientation('landscape');
-    await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
+    await expect(elementById(testIDs.PORTRAIT_ELEMENT)).toBeVisible();
     await device.setOrientation('portrait');
-    await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
+    await expect(elementById(testIDs.PORTRAIT_ELEMENT)).toBeVisible();
     await elementById(testIDs.DISMISS_BUTTON).tap();
   });
 
     await elementById(testIDs.ORIENTATION_BUTTON).tap();
     await elementById(testIDs.LANDSCAPE_ORIENTATION_BUTTON).tap();
     await device.setOrientation('landscape');
-    await expect(element(by.id('currentOrientation'))).toHaveText('Landscape');
+    await expect(element(by.id(testIDs.LANDSCAPE_ELEMENT))).toBeVisible();
     await device.setOrientation('portrait');
-    await expect(element(by.id('currentOrientation'))).toHaveText('Landscape');
+    await expect(element(by.id(testIDs.LANDSCAPE_ELEMENT))).toBeVisible();
     await elementById(testIDs.DISMISS_BUTTON).tap();
   });
 });

e2e/ScreenStack.test.js

     await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
     await elementById(testIDs.MODAL_WITH_STACK_BUTTON).tap();
     await expect(elementByLabel('Screen 2')).toBeVisible();
-    await Utils.tapBackIos();
+    await elementById(testIDs.POP_BUTTON).tap();
     await expect(elementByLabel('Screen 1')).toBeVisible();
   });
 });

e2e/ScreenStyle.test.js

 
   it('declare a options on component component', async () => {
     await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await expect(element(by.label('Static Title'))).toBeVisible();
+    await expect(elementByLabel('Static Title')).toBeVisible();
   });
 
   it('change title on component component', async () => {
     await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await expect(element(by.label('Static Title'))).toBeVisible();
+    await expect(elementByLabel('Static Title')).toBeVisible();
     await elementById(testIDs.DYNAMIC_OPTIONS_BUTTON).tap();
-    await expect(element(by.label('Dynamic Title'))).toBeVisible();
+    await expect(elementByLabel('Dynamic Title')).toBeVisible();
   });
 
   it('set dynamic options with valid options will do something and not crash', async () => {
     await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
   });
 
-  it('makes topBar transparent and opaque', async () => {
-    await elementByLabel('Push Options Screen').tap();
-    await elementByLabel('Top Bar Transparent').tap();
-    await expect(element(by.type('_UIVisualEffectBackdropView'))).toBeNotVisible();
-    await elementByLabel('Top Bar Opaque').tap();
-    await expect(element(by.type('_UIVisualEffectBackdropView')).atIndex(1)).toBeVisible();
-  });
-
   it('set Tab Bar badge on a current Tab', async () => {
     await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
     await elementById(testIDs.SET_TAB_BADGE_BUTTON).tap();

e2e/TopLevelApi.test.js

   it('unmount is called on pop', async () => {
     await elementById(testIDs.PUSH_LIFECYCLE_BUTTON).tap();
     await expect(elementByLabel('didAppear')).toBeVisible();
-    await Utils.tapBackIos();
+    await elementById(testIDs.POP_BUTTON).tap();
     await expect(elementByLabel('componentWillUnmount')).toBeVisible();
-    await element(by.traits(['button']).and(by.label('OK'))).atIndex(0).tap();
+    await elementByLabel('OK').atIndex(0).tap();
     await expect(elementByLabel('didDisappear')).toBeVisible();
   });
 });

lib/android/app/build.gradle

     implementation fileTree(include: ['*.jar'], dir: 'libs')
     implementation 'com.android.support:design:25.4.0'
     implementation 'com.android.support:appcompat-v7:25.4.0'
-    implementation "com.android.support:support-v4:25.4.0"
+    implementation 'com.android.support:support-v4:25.4.0'
+    implementation 'com.aurelhubert:ahbottomnavigation:2.1.0'
 
     // node_modules
     //noinspection GradleDynamicVersion

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

+package com.reactnativenavigation.parse;
+
+import org.json.JSONObject;
+
+public class BottomTabOptions implements DEFAULT_VALUES {
+
+    public static BottomTabOptions parse(JSONObject json) {
+        BottomTabOptions options = new BottomTabOptions();
+        if (json == null) return options;
+
+        options.title = TextParser.parse(json, "title");
+        if (json.has("icon")) {
+            options.icon = TextParser.parse(json.optJSONObject("icon"), "uri");
+        }
+        options.badge = TextParser.parse(json, "badge");
+        options.testId = TextParser.parse(json, "testID");
+        return options;
+    }
+
+    public Text title = new NullText();
+    public Text icon = new NullText();
+    public Text testId = new NullText();
+    public Text badge = new NullText();
+
+    void mergeWith(final BottomTabOptions other) {
+        if (other.title.hasValue()) {
+            title = other.title;
+        }
+        if (other.icon.hasValue()) {
+            icon = other.icon;
+        }
+        if (other.badge.hasValue()) {
+            badge = other.badge;
+        }
+    }
+
+    void mergeWithDefault(final BottomTabOptions defaultOptions) {
+        if (!title.hasValue()) {
+            title = defaultOptions.title;
+        }
+        if (!icon.hasValue()) {
+            icon = defaultOptions.icon;
+        }
+        if (!badge.hasValue()) {
+            badge = defaultOptions.badge;
+        }
+    }
+}

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

 		BottomTabsOptions options = new BottomTabsOptions();
 		if (json == null) return options;
 
-		options.currentTabId = TextParser.parse(json, "currentTabId");
+        options.color = ColorParser.parse(json, "tabColor");
+        options.selectedColor = ColorParser.parse(json, "selectedTabColor");
+        options.currentTabId = TextParser.parse(json, "currentTabId");
 		options.currentTabIndex = json.optInt("currentTabIndex", NO_INT_VALUE);
-		options.tabBadge = json.optInt("tabBadge", NO_INT_VALUE);
-		options.hidden = BooleanOptions.parse(json.optString("hidden"));
+		options.visible = BooleanOptions.parse(json.optString("visible"));
 		options.animateHide = BooleanOptions.parse(json.optString("animateHide"));
+        options.testId = TextParser.parse(json, "testID");
 
 		return options;
 	}
 
-	int tabBadge = NO_INT_VALUE;
-	BooleanOptions hidden = BooleanOptions.False;
+    public Color color = new NullColor();
+    public Color selectedColor = new NullColor();
+	BooleanOptions visible = BooleanOptions.False;
 	BooleanOptions animateHide = BooleanOptions.False;
 	public int currentTabIndex = NO_INT_VALUE;
 	public Text currentTabId = new NullText();
+    public Text testId = new NullText();
 
 	void mergeWith(final BottomTabsOptions other) {
 		if (other.currentTabId.hasValue()) {
 		if (NO_INT_VALUE != other.currentTabIndex) {
             currentTabIndex = other.currentTabIndex;
 		}
-		if (NO_INT_VALUE != other.tabBadge) {
-			tabBadge = other.tabBadge;
-		}
-		if (other.hidden != BooleanOptions.NoValue) {
-			hidden = other.hidden;
+		if (other.visible != BooleanOptions.NoValue) {
+			visible = other.visible;
 		}
 		if (other.animateHide != BooleanOptions.NoValue) {
 			animateHide = other.animateHide;
 		}
-	}
+        if (other.color.hasValue()) {
+            color = other.color;
+        }
+        if (other.selectedColor.hasValue()) {
+            selectedColor = other.selectedColor;
+        }
+    }
 
     void mergeWithDefault(final BottomTabsOptions defaultOptions) {
         if (!currentTabId.hasValue()) {
         if (NO_INT_VALUE == currentTabIndex) {
             currentTabIndex = defaultOptions.currentTabIndex;
         }
-        if (NO_INT_VALUE == tabBadge) {
-            tabBadge = defaultOptions.tabBadge;
-        }
-        if (hidden == BooleanOptions.NoValue) {
-            hidden = defaultOptions.hidden;
+        if (visible == BooleanOptions.NoValue) {
+            visible = defaultOptions.visible;
         }
         if (animateHide == BooleanOptions.NoValue) {
             animateHide = defaultOptions.animateHide;
         }
+        if (!color.hasValue()) {
+            color = defaultOptions.color;
+        }
+        if (!selectedColor.hasValue()) {
+            selectedColor = defaultOptions.selectedColor;
+        }
     }
 }

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

 	@ColorInt public int buttonColor;
 	public int buttonFontSize;
 	public Text buttonFontWeight;
-	public Text icon;
+	public Text icon = new NullText();
+	public Text testId;
 
 	private static Button parseJson(JSONObject json)  {
 		Button button = new Button();
 		button.buttonColor = json.optInt("buttonColor", NO_INT_VALUE);
 		button.buttonFontSize = json.optInt("buttonFontSize", NO_INT_VALUE);
 		button.buttonFontWeight = TextParser.parse(json, "buttonFontWeight");
+        button.testId = TextParser.parse(json, "testID");
 
 		if (json.has("icon")) {
 			button.icon = TextParser.parse(json.optJSONObject("icon"), "uri");

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

 import android.app.Activity;
 
 import com.facebook.react.ReactInstanceManager;
+import com.reactnativenavigation.utils.ImageLoader;
 import com.reactnativenavigation.utils.NoOpPromise;
 import com.reactnativenavigation.utils.TypefaceLoader;
 import com.reactnativenavigation.viewcontrollers.BottomTabsController;
 	}
 
     private ViewController createSideMenuRoot(LayoutNode node) {
-		SideMenuController sideMenuLayout = new SideMenuController(activity, node.id);
+        final Options options = Options.parse(typefaceManager, node.getNavigationOptions(), defaultOptions);
+		SideMenuController sideMenuLayout = new SideMenuController(activity, node.id, options);
 		for (LayoutNode child : node.children) {
 			ViewController childLayout = create(child);
 			switch (child.type) {
 	}
 
 	private ViewController createStack(LayoutNode node) {
-		StackController stackController = new StackController(activity, node.id);
+        final Options options = Options.parse(typefaceManager, node.getNavigationOptions(), defaultOptions);
+		StackController stackController = new StackController(activity, node.id, options);
         for (int i = 0; i < node.children.size(); i++) {
             if (i < node.children.size() - 1) {
                 stackController.push(create(node.children.get(i)), new NoOpPromise());
 	}
 
 	private ViewController createBottomTabs(LayoutNode node) {
-		final BottomTabsController tabsComponent = new BottomTabsController(activity, node.id);
+        final Options options = Options.parse(typefaceManager, node.getNavigationOptions(), defaultOptions);
+		final BottomTabsController tabsComponent = new BottomTabsController(activity, new ImageLoader(), node.id, options);
 		List<ViewController> tabs = new ArrayList<>();
 		for (int i = 0; i < node.children.size(); i++) {
-			tabs.add(create(node.children.get(i)));
+            tabs.add(create(node.children.get(i)));
 		}
 		tabsComponent.setTabs(tabs);
 		return tabsComponent;

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

 		result.topBarOptions = TopBarOptions.parse(typefaceManager, json.optJSONObject("topBar"));
 		result.topTabsOptions = TopTabsOptions.parse(json.optJSONObject("topTabs"));
         result.topTabOptions = TopTabOptions.parse(typefaceManager, json.optJSONObject("topTab"));
-		result.bottomTabsOptions = BottomTabsOptions.parse(json.optJSONObject("bottomTabs"));
+        result.bottomTabOptions = BottomTabOptions.parse(json.optJSONObject("bottomTab"));
+        result.bottomTabsOptions = BottomTabsOptions.parse(json.optJSONObject("bottomTabs"));
         result.overlayOptions = OverlayOptions.parse(json.optJSONObject("overlay"));
 
 		return result.withDefaultOptions(defaultOptions);
     @NonNull public TopBarOptions topBarOptions = new TopBarOptions();
     @NonNull public TopTabsOptions topTabsOptions = new TopTabsOptions();
     @NonNull public TopTabOptions topTabOptions = new TopTabOptions();
+    @NonNull public BottomTabOptions bottomTabOptions = new BottomTabOptions();
     @NonNull public BottomTabsOptions bottomTabsOptions = new BottomTabsOptions();
     @NonNull public OverlayOptions overlayOptions = new OverlayOptions();
 
 	public void mergeWith(final Options other) {
         topBarOptions.mergeWith(other.topBarOptions);
         topTabsOptions.mergeWith(other.topTabsOptions);
+        bottomTabOptions.mergeWith(other.bottomTabOptions);
         bottomTabsOptions.mergeWith(other.bottomTabsOptions);
     }
 
     Options withDefaultOptions(final Options other) {
         topBarOptions.mergeWithDefault(other.topBarOptions);
         topTabsOptions.mergeWithDefault(other.topTabsOptions);
+        bottomTabOptions.mergeWithDefault(other.bottomTabOptions);
         bottomTabsOptions.mergeWithDefault(other.bottomTabsOptions);
         return this;
     }

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

         options.drawBehind = Options.BooleanOptions.parse(json.optString("drawBehind"));
         options.rightButtons = Button.parseJsonArray(json.optJSONArray("rightButtons"));
         options.leftButtons = Button.parseJsonArray(json.optJSONArray("leftButtons"));
+        options.testId = TextParser.parse(json, "testID");
 
         return options;
     }
 
     public Text title = new NullText();
+    public Text testId = new NullText();
     public Color backgroundColor = new NullColor();
     public Color textColor = new NullColor();
     public Fraction textFontSize = new NullFraction();

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

     public static TopTabsOptions parse(@Nullable JSONObject json) {
         TopTabsOptions result = new TopTabsOptions();
         if (json == null) return result;
-        result.selectedTabColor = ColorParser.parse(json, "selectedTabColor");
+        result.selectedTabColor = ColorParser.parse(json, "selectedColor");
         result.unselectedTabColor = ColorParser.parse(json, "unselectedTabColor");
         result.fontSize = NumberParser.parse(json, "fontSize");
         return result;

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

+package com.reactnativenavigation.presentation;
+
+import android.support.annotation.IntRange;
+
+import com.reactnativenavigation.parse.BottomTabOptions;
+import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.views.BottomTabs;
+
+public class BottomTabOptionsPresenter {
+    private BottomTabs bottomTabs;
+
+    public BottomTabOptionsPresenter(BottomTabs bottomTabs) {
+        this.bottomTabs = bottomTabs;
+    }
+
+    public void present(Options options, @IntRange(from = 0) int bottomTabIndex) {
+        applyBottomTabOptions(options.bottomTabOptions, bottomTabIndex);
+    }
+
+    private void applyBottomTabOptions(BottomTabOptions options, int bottomTabIndex) {
+        if (options.badge.hasValue()) {
+            bottomTabs.setBadge(bottomTabIndex, options.badge);
+        }
+    }
+}

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

         topBar.setBackgroundColor(options.backgroundColor);
         topBar.setTitleTextColor(options.textColor);
         topBar.setTitleFontSize(options.textFontSize);
+        if (options.testId.hasValue()) topBar.setTestId(options.testId.get());
 
         topBar.setTitleTypeface(options.textFontFamily);
         if (options.hidden == True) {

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

+package com.reactnativenavigation.utils;
+
+public class ArrayUtils {
+    public static boolean contains(Object[] array, Object item) {
+        if (isNullOrEmpty(array)) return false;
+        for (Object o : array) {
+            if (o == item) return true;
+        }
+        return false;
+    }
+
+    private static boolean isNullOrEmpty(Object[] array) {
+        return array == null || array.length == 0;
+    }
+}

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

 	private static final AtomicInteger viewId = new AtomicInteger(1);
 
 	public static int generateViewId() {
-		if (Build.VERSION.SDK_INT >= 17) {
+		if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
 			return View.generateViewId();
 		} else {
 			while (true) {

lib/android/app/src/main/java/com/reactnativenavigation/utils/ImageUtils.java → lib/android/app/src/main/java/com/reactnativenavigation/utils/ImageLoader.java

 import java.io.InputStream;
 import java.net.URL;
 
-public class ImageUtils {
+public class ImageLoader {
 
 	public interface ImageLoadingListener {
 		void onComplete(@NonNull Drawable drawable);
 		void onError(Throwable error);
 	}
 
-	public static void loadIcon(final Context context, final String uri, final ImageLoadingListener listener) {
+	public void loadIcon(final Context context, final String uri, final ImageLoadingListener listener) {
         try {
             StrictMode.ThreadPolicy threadPolicy = adjustThreadPolicyDebug();
             
         }
     }
 
-    private static StrictMode.ThreadPolicy adjustThreadPolicyDebug() {
+    private StrictMode.ThreadPolicy adjustThreadPolicyDebug() {
         StrictMode.ThreadPolicy threadPolicy = null;
         if (NavigationApplication.instance.isDebug()) {
             threadPolicy = StrictMode.getThreadPolicy();
         return threadPolicy;
     }
 
-    private static void restoreThreadPolicyDebug(@Nullable StrictMode.ThreadPolicy threadPolicy) {
+    private void restoreThreadPolicyDebug(@Nullable StrictMode.ThreadPolicy threadPolicy) {
         if (NavigationApplication.instance.isDebug() && threadPolicy != null) {
             StrictMode.setThreadPolicy(threadPolicy);
         }

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

 import android.view.View;
 import android.view.ViewGroup;
 
+import java.util.ArrayList;
+import java.util.List;
+
 public class ViewUtils {
     @Nullable
     public static <T> T findChildByClass(ViewGroup root, Class clazz) {
         }
         return null;
     }
+
+    public static <T> List<T> findChildrenByClass(ViewGroup root, Class clazz) {
+        List<T> ret = new ArrayList<>();
+        for (int i = 0; i < root.getChildCount(); i++) {
+            View view = root.getChildAt(i);
+            if (clazz.isAssignableFrom(view.getClass())) {
+                ret.add((T) view);
+            }
+        }
+        return ret;
+    }
 }

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

 
 import android.app.Activity;
 import android.graphics.Color;
+import android.graphics.drawable.Drawable;
+import android.support.annotation.IntRange;
 import android.support.annotation.NonNull;
-import android.support.design.widget.BottomNavigationView;
-import android.view.Menu;
-import android.view.MenuItem;
-import android.view.View;
 import android.view.ViewGroup;
 import android.widget.RelativeLayout;
 
+import com.aurelhubert.ahbottomnavigation.AHBottomNavigation;
+import com.aurelhubert.ahbottomnavigation.AHBottomNavigationItem;
+import com.reactnativenavigation.parse.BottomTabOptions;
+import com.reactnativenavigation.parse.BottomTabsOptions;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.Text;
+import com.reactnativenavigation.presentation.BottomTabOptionsPresenter;
 import com.reactnativenavigation.presentation.NavigationOptionsListener;
-import com.reactnativenavigation.utils.CompatUtils;
+import com.reactnativenavigation.utils.ImageLoader;
+import com.reactnativenavigation.utils.UiUtils;
+import com.reactnativenavigation.views.BottomTabs;
+import com.reactnativenavigation.views.ReactComponent;
 
 import java.util.ArrayList;
 import java.util.Collection;
 import static android.widget.RelativeLayout.ALIGN_PARENT_BOTTOM;
 import static com.reactnativenavigation.parse.DEFAULT_VALUES.NO_INT_VALUE;
 
-public class BottomTabsController extends ParentController
-		implements BottomNavigationView.OnNavigationItemSelectedListener, NavigationOptionsListener {
-	private BottomNavigationView bottomNavigationView;
+public class BottomTabsController extends ParentController implements AHBottomNavigation.OnTabSelectedListener, NavigationOptionsListener {
+	private BottomTabs bottomTabs;
 	private List<ViewController> tabs = new ArrayList<>();
-	private int selectedIndex = 0;
+    private ImageLoader imageLoader;
 
-	public BottomTabsController(final Activity activity, final String id) {
-		super(activity, id);
-	}
+    public BottomTabsController(final Activity activity, ImageLoader imageLoader, final String id, Options initialOptions) {
+		super(activity, id, initialOptions);
+        this.imageLoader = imageLoader;
+    }
 
 	@NonNull
 	@Override
 	protected ViewGroup createView() {
 		RelativeLayout root = new RelativeLayout(getActivity());
-		bottomNavigationView = new BottomNavigationView(getActivity());
-		bottomNavigationView.setId(CompatUtils.generateViewId());
-		bottomNavigationView.setBackgroundColor(Color.DKGRAY);
-		bottomNavigationView.setOnNavigationItemSelectedListener(this);
+		bottomTabs = new BottomTabs(getActivity(), options.bottomTabsOptions);
+        bottomTabs.setOnTabSelectedListener(this);
 		RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT);
 		lp.addRule(ALIGN_PARENT_BOTTOM);
-		root.addView(bottomNavigationView, lp);
+		root.addView(bottomTabs, lp);
 		return root;
 	}
 
-	@Override
-	public boolean handleBack() {
-		return !tabs.isEmpty() && tabs.get(selectedIndex).handleBack();
-	}
+    @Override
+    public void applyOptions(Options options, ReactComponent childComponent) {
+        int tabIndex = findTabContainingComponent(childComponent);
+        if (tabIndex >= 0) new BottomTabOptionsPresenter(bottomTabs).present(options, tabIndex);
+    }
 
-	@Override
-	public boolean onNavigationItemSelected(@NonNull final MenuItem item) {
-		selectTabAtIndex(item.getItemId());
-		return true;
+    @Override
+	public boolean handleBack() {
+		return !tabs.isEmpty() && tabs.get(bottomTabs.getCurrentItem()).handleBack();
 	}
 
-	void selectTabAtIndex(final int newIndex) {
-		tabs.get(selectedIndex).getView().setVisibility(View.GONE);
-		selectedIndex = newIndex;
-		tabs.get(selectedIndex).getView().setVisibility(View.VISIBLE);
+    @Override
+    public boolean onTabSelected(int index, boolean wasSelected) {
+        if (wasSelected) return false;
+        selectTabAtIndex(index);
+        return true;
 	}
-
+	
 	public void setTabs(final List<ViewController> tabs) {
 		if (tabs.size() > 5) {
 			throw new RuntimeException("Too many tabs!");
 		this.tabs = tabs;
 		getView();
 		for (int i = 0; i < tabs.size(); i++) {
-			String title = String.valueOf(i);
-			createTab(tabs.get(i), i, title);
+		    tabs.get(i).setParentController(this);
+			createTab(i, tabs.get(i).options.bottomTabOptions, tabs.get(i).options.bottomTabsOptions);
 		}
 		selectTabAtIndex(0);
 	}
 
-	private void createTab(ViewController tab, final int index, final String title) {
-		bottomNavigationView.getMenu().add(0, index, Menu.NONE, title);
-		RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT);
-		params.addRule(ABOVE, bottomNavigationView.getId());
-		tab.getView().setVisibility(View.GONE);
-		getView().addView(tab.getView(), params);
+	private void createTab(int index, final BottomTabOptions tabOptions, final BottomTabsOptions bottomTabsOptions) {
+	    if (!tabOptions.icon.hasValue()) {
+            throw new RuntimeException("BottomTab must have an icon");
+        }
+        imageLoader.loadIcon(getActivity(), tabOptions.icon.get(), new ImageLoader.ImageLoadingListener() {
+            @Override
+            public void onComplete(@NonNull Drawable drawable) {
+                setIconColor(drawable, bottomTabsOptions);
+                AHBottomNavigationItem item = new AHBottomNavigationItem(tabOptions.title.get(""), drawable);
+                bottomTabs.addItem(item);
+                bottomTabs.post(() -> bottomTabs.setTabTag(index, tabOptions.testId));
+            }
+
+            @Override
+            public void onError(Throwable error) {
+                error.printStackTrace();
+            }
+        });
+
+        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT);
+        params.addRule(ABOVE, bottomTabs.getId());
 	}
 
-	int getSelectedIndex() {
-		return selectedIndex;
+    private void setIconColor(Drawable drawable, BottomTabsOptions options) {
+        UiUtils.tintDrawable(drawable, Color.RED);
+    }
+
+    int getSelectedIndex() {
+		return bottomTabs.getCurrentItem();
 	}
 
 	@NonNull
 
 	@Override
 	public void mergeOptions(Options options) {
+        this.options.mergeWith(options);
         if (options.bottomTabsOptions.currentTabIndex != NO_INT_VALUE) {
             selectTabAtIndex(options.bottomTabsOptions.currentTabIndex);
         }
         }
     }
 
-	private boolean hasControlWithId(StackController controller, String id) {
+    void selectTabAtIndex(final int newIndex) {
+        getView().removeView(getCurrentView());
+        bottomTabs.setCurrentItem(newIndex, false);
+        getView().addView(getCurrentView());
+    }
+
+    @NonNull
+    private ViewGroup getCurrentView() {
+        return tabs.get(bottomTabs.getCurrentItem()).getView();
+    }
+
+    private boolean hasControlWithId(StackController controller, String id) {
 		for (ViewController child : controller.getChildControllers()) {
 			if (id.equals(child.getId())) {
 				return true;
 		}
 		return false;
 	}
+
+	@IntRange(from = -1)
+    private int findTabContainingComponent(ReactComponent component) {
+        for (int i = 0; i < tabs.size(); i++) {
+            if (tabs.get(i).containsComponent(component)) {
+                return i;
+            }
+        }
+        return -1;
+    }
 }

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

                                    final String id,
                                    final String componentName,
                                    final ReactViewCreator viewCreator,
-                                   final Options initialNavigationOptions) {
-        super(activity, id);
+                                   final Options initialOptions) {
+        super(activity, id, initialOptions);
         this.componentName = componentName;
         this.viewCreator = viewCreator;
-        options = initialNavigationOptions;
     }
 
     @Override

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

 package com.reactnativenavigation.viewcontrollers;
 
-import android.app.Dialog;
-import android.content.DialogInterface;
 import android.support.annotation.Nullable;
-import android.view.KeyEvent;
-import android.view.View;
 
 import com.facebook.react.bridge.Promise;
-import com.reactnativenavigation.R;
+import com.reactnativenavigation.viewcontrollers.modal.Modal;
+import com.reactnativenavigation.viewcontrollers.modal.ModalCreator;
 
 import java.util.ArrayList;
 import java.util.List;
 
-import static android.view.View.MeasureSpec.EXACTLY;
-import static android.view.View.MeasureSpec.makeMeasureSpec;
-
 public class ModalStack {
 
 	private List<Modal> modals = new ArrayList<>();
+    private ModalCreator creator;
+
+    public ModalStack(ModalCreator creator) {
+        this.creator = creator;
+    }
 
-	public void showModal(final ViewController viewController, Promise promise) {
-		Modal modal = new Modal(viewController);
-		modals.add(modal);
+    public void showModal(final ViewController viewController, Promise promise) {
+        Modal modal = creator.create(viewController);
+        modals.add(modal);
 		modal.show();
 		if (promise != null) {
 			promise.resolve(viewController.getId());
 	}
 
 	@Nullable
-	private Modal findModalByComponentId(String componentId) {
+	public Modal findModalByComponentId(String componentId) {
 		for (Modal modal : modals) {
 			if (modal.containsDeepComponentId(componentId)) {
 				return modal;
 	@Nullable
     ViewController findControllerById(String id) {
         Modal modal = findModalByComponentId(id);
-        return modal != null ? modal.viewController : null;
-    }
-
-    private static class Modal implements DialogInterface.OnKeyListener {
-		public final ViewController viewController;
-		private final Dialog dialog;
-
-		Modal(final ViewController viewController) {
-			this.viewController = viewController;
-			dialog = new Dialog(viewController.getActivity(), R.style.Modal);
-			dialog.setOnKeyListener(this);
-		}
-
-		void show() {
-			preMeasureView();
-			dialog.setContentView(viewController.getView());
-			dialog.show();
-		}
-
-		void dismiss() {
-			dialog.dismiss();
-		}
-
-		boolean containsDeepComponentId(String componentId) {
-			return viewController.findControllerById(componentId) != null;
-		}
-
-		private void preMeasureView() {
-			View decorView = viewController.getActivity().getWindow().getDecorView();
-			viewController.getView().measure(makeMeasureSpec(decorView.getMeasuredWidth(), EXACTLY), makeMeasureSpec(decorView.getMeasuredHeight(), EXACTLY));
-		}
-
-        @Override
-        public boolean onKey(DialogInterface dialog, int keyCode, KeyEvent event) {
-            if (keyCode == KeyEvent.KEYCODE_BACK) {
-                if (event.getAction() == KeyEvent.ACTION_UP) {
-                    if (viewController.handleBack()) {
-                        return true;
-                    }
-                    dialog.dismiss();
-                }
-            }
-            return false;
-        }
+        return modal != null ? modal.viewController.findControllerById(id) : null;
     }
 }

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

 import com.reactnativenavigation.presentation.OverlayManager;
 import com.reactnativenavigation.utils.CompatUtils;
 import com.reactnativenavigation.utils.NoOpPromise;
+import com.reactnativenavigation.viewcontrollers.modal.ModalCreator;
 
 import java.util.Collection;
 import java.util.Collections;
 public class Navigator extends ParentController {
 
     private static final NoOpPromise NO_OP = new NoOpPromise();
-    private final ModalStack modalStack = new ModalStack();
-	private ViewController root;
+    private final ModalStack modalStack = new ModalStack(new ModalCreator());
+    private ViewController root;
     private OverlayManager overlayManager = new OverlayManager();
     private Options defaultOptions = new Options();
 
     public Navigator(final Activity activity) {
-		super(activity, "navigator" + CompatUtils.generateViewId());
-	}
+        super(activity, "navigator" + CompatUtils.generateViewId(), new Options());
+    }
+
+    @NonNull
+    @Override
+    protected ViewGroup createView() {
+        return new FrameLayout(getActivity());
+    }
 
     @NonNull
-	@Override
-	protected ViewGroup createView() {
-		return new FrameLayout(getActivity());
-	}
-
-	@NonNull
-	@Override
-	public Collection<ViewController> getChildControllers() {
-		return root == null ? Collections.emptyList() : Collections.singletonList(root);
-	}
-
-	@Override
-	public boolean handleBack() {
-		return root != null && root.handleBack();
-	}
-
-	@Override
-	public void destroy() {
-		modalStack.dismissAll(NO_OP);
-		super.destroy();
-	}
-
-	public void setRoot(final ViewController viewController, Promise promise) {
-		if (root != null) {
-			root.destroy();
-		}
-
-		root = viewController;
-		getView().addView(viewController.getView());
+    @Override
+    public Collection<ViewController> getChildControllers() {
+        return root == null ? Collections.emptyList() : Collections.singletonList(root);
+    }
+
+    @Override
+    public boolean handleBack() {
+        return root != null && root.handleBack();
+    }
+
+    @Override
+    public void destroy() {
+        modalStack.dismissAll(NO_OP);
+        super.destroy();
+    }
+
+    public void setRoot(final ViewController viewController, Promise promise) {
+        if (root != null) {
+            root.destroy();
+        }
+
+        root = viewController;
+        getView().addView(viewController.getView());
         promise.resolve(viewController.getId());
-	}
+    }
 
     public void setDefaultOptions(Options defaultOptions) {
         this.defaultOptions = defaultOptions;
         return defaultOptions;
     }
 
-	public void setOptions(final String componentId, Options options) {
-		ViewController target = findControllerById(componentId);
-		if (target instanceof NavigationOptionsListener) {
-			((NavigationOptionsListener) target).mergeOptions(options);
-		}
-		if (root instanceof NavigationOptionsListener) {
-			((NavigationOptionsListener) root).mergeOptions(options);
-		}
-	}
-
-	public void push(final String fromId, final ViewController viewController, Promise promise) {
-		ViewController from = findControllerById(fromId);
-		if (from != null) {
-		    from.performOnParentStack(stack -> ((StackController) stack).animatePush(viewController, promise));
-		}
-	}
-
-	void pop(final String fromId, Promise promise) {
-		ViewController from = findControllerById(fromId);
-		if (from != null) {
-		    from.performOnParentStack(stack -> ((StackController) stack).pop(promise));
-		}
-	}
-
-	public void popSpecific(final String id, Promise promise) {
-		ViewController from = findControllerById(id);
-		if (from != null) {
-		    from.performOnParentStack(stack -> ((StackController) stack).popSpecific(from, promise), () -> rejectPromise(promise));
-		} else {
-			rejectPromise(promise);
-		}
-	}
-
-	public void popToRoot(final String id, Promise promise) {
-		ViewController from = findControllerById(id);
-		if (from != null) {
-		    from.performOnParentStack(stack -> ((StackController) stack).popToRoot(promise));
-		}
-	}
-
-	public void popTo(final String componentId, Promise promise) {
-		ViewController target = findControllerById(componentId);
-		if (target != null) {
-		    target.performOnParentStack(stack -> ((StackController) stack).popTo(target, promise), () -> rejectPromise(promise));
-		} else {
-			rejectPromise(promise);
-		}
-	}
-
-	public void showModal(final ViewController viewController, Promise promise) {
-		modalStack.showModal(viewController, promise);
-	}
-
-	public void dismissModal(final String componentId, Promise promise) {
-		modalStack.dismissModal(componentId, promise);
-	}
-
-	public void dismissAllModals(Promise promise) {
-		modalStack.dismissAll(promise);
-	}
-
-	public void showOverlay(ViewController overlay) {
+    public void setOptions(final String componentId, Options options) {
+        ViewController target = findControllerById(componentId);
+        if (target instanceof NavigationOptionsListener) {
+            ((NavigationOptionsListener) target).mergeOptions(options);
+        }
+        if (root instanceof NavigationOptionsListener) {
+            ((NavigationOptionsListener) root).mergeOptions(options);
+        }
+    }
+
+    public void push(final String fromId, final ViewController viewController, Promise promise) {
+        ViewController from = findControllerById(fromId);
+        if (from != null) {
+            from.performOnParentStack(stack -> ((StackController) stack).animatePush(viewController, promise));
+        }
+    }
+
+    void pop(final String fromId, Promise promise) {
+        ViewController from = findControllerById(fromId);
+        if (from != null) {
+            from.performOnParentStack(stack -> ((StackController) stack).pop(promise));
+        }
+    }
+
+    public void popSpecific(final String id, Promise promise) {
+        ViewController from = findControllerById(id);
+        if (from != null) {
+            from.performOnParentStack(stack -> ((StackController) stack).popSpecific(from, promise), () -> rejectPromise(promise));
+        } else {
+            rejectPromise(promise);
+        }
+    }
+
+    public void popToRoot(final String id, Promise promise) {
+        ViewController from = findControllerById(id);
+        if (from != null) {
+            from.performOnParentStack(stack -> ((StackController) stack).popToRoot(promise));
+        }
+    }
+
+    public void popTo(final String componentId, Promise promise) {
+        ViewController target = findControllerById(componentId);
+        if (target != null) {
+            target.performOnParentStack(stack -> ((StackController) stack).popTo(target, promise), () -> rejectPromise(promise));
+        } else {
+            rejectPromise(promise);
+        }
+    }
+
+    public void showModal(final ViewController viewController, Promise promise) {
+        modalStack.showModal(viewController, promise);
+    }
+
+    public void dismissModal(final String componentId, Promise promise) {
+        modalStack.dismissModal(componentId, promise);
+    }
+
+    public void dismissAllModals(Promise promise) {
+        modalStack.dismissAll(promise);
+    }
+
+    public void showOverlay(ViewController overlay) {
         overlayManager.show(getView(), overlay);
-	}
+    }
 
-	public void dismissOverlay(final String componentId) {
-		overlayManager.dismiss(getView(), componentId);
-	}
+    public void dismissOverlay(final String componentId) {
+        overlayManager.dismiss(getView(), componentId);
+    }
 
-	static void rejectPromise(Promise promise) {
+    static void rejectPromise(Promise promise) {
         promise.reject(new Throwable("Nothing to pop"));
-	}
+    }
 
     @Nullable
     @Override

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

 
 public abstract class ParentController<T extends ViewGroup> extends ViewController {
 
-	public ParentController(final Activity activity, final String id) {
-		super(activity, id);
+	public ParentController(final Activity activity, final String id, Options initialOptions) {
+		super(activity, id, initialOptions);
 	}
 
 	@NonNull
 		return null;
 	}
 
+	@Override
+    public boolean containsComponent(ReactComponent component) {
+        if (super.containsComponent(component)) {
+            return true;
+        }
+        for (ViewController child : getChildControllers()) {
+            if (child.containsComponent(component)) return true;
+        }
+        return false;
+    }
+
     public void applyOptions(Options options, ReactComponent childComponent) {
 
     }

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

 import android.view.View;
 import android.view.ViewGroup;
 
+import com.reactnativenavigation.parse.Options;
+
 import java.util.ArrayList;
 import java.util.Collection;
 
 	private ViewController leftController;
 	private ViewController rightController;
 
-	public SideMenuController(final Activity activity, final String id) {
-		super(activity, id);
+	public SideMenuController(final Activity activity, final String id, Options initialOptions) {
+		super(activity, id, initialOptions);
 	}
 
 	@NonNull

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

     private final NavigationAnimator animator;
     private StackLayout stackLayout;
 
-    public StackController(final Activity activity, String id) {
-		super(activity, id);
+    public StackController(final Activity activity, String id, Options initialOptions) {
+		super(activity, id, initialOptions);
         animator = new NavigationAnimator(activity);
     }
 
     @Override
     public void applyOptions(Options options, ReactComponent component) {
         stackLayout.applyOptions(options, component);
+        applyOnParentController(parentController -> ((ParentController) parentController).applyOptions(options, component));
     }
 
     @Override

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

     private boolean isDestroyed;
     private ViewVisibilityListener viewVisibilityListener = new ViewVisibilityListenerAdapter();
 
-    public ViewController(Activity activity, String id) {
+    public ViewController(Activity activity, String id, Options initialOptions) {
         this.activity = activity;
         this.id = id;
+        options = initialOptions;
     }
 
     protected abstract T createView();
         return isSameId(id) ? this : null;
     }
 
+    public boolean containsComponent(ReactComponent component) {
+        return getView().equals(component);
+    }
+
     public void onViewAppeared() {
         isShown = true;
         applyOnParentController(parentController -> {
             parentController.clearOptions();
-            parentController.applyOptions(options, (ReactComponent) getView());
+            if (getView() instanceof ReactComponent) parentController.applyOptions(options, (ReactComponent) getView());
         });
     }
 

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

+package com.reactnativenavigation.viewcontrollers.modal;
+
+import android.app.Dialog;
+import android.content.DialogInterface;
+import android.view.KeyEvent;
+import android.view.View;
+
+import com.reactnativenavigation.R;
+import com.reactnativenavigation.viewcontrollers.ViewController;
+
+import static android.view.View.MeasureSpec.EXACTLY;
+import static android.view.View.MeasureSpec.makeMeasureSpec;
+
+public class Modal implements DialogInterface.OnKeyListener {
+    public final ViewController viewController;
+    private final Dialog dialog;
+
+    public Modal(final ViewController viewController) {
+        this.viewController = viewController;
+        dialog = new Dialog(viewController.getActivity(), R.style.Modal);
+        dialog.setOnKeyListener(this);
+    }
+
+    public void show() {
+        preMeasureView();
+        dialog.setContentView(viewController.getView());
+        dialog.show();
+    }
+
+    public void dismiss() {
+        dialog.dismiss();
+    }
+
+    public boolean containsDeepComponentId(String componentId) {
+        return viewController.findControllerById(componentId) != null;
+    }
+
+    private void preMeasureView() {
+        View decorView = viewController.getActivity().getWindow().getDecorView();
+        viewController.getView().measure(makeMeasureSpec(decorView.getMeasuredWidth(), EXACTLY), makeMeasureSpec(decorView.getMeasuredHeight(), EXACTLY));
+    }
+
+    @Override
+    public boolean onKey(DialogInterface dialog, int keyCode, KeyEvent event) {
+        if (keyCode == KeyEvent.KEYCODE_BACK) {
+            if (event.getAction() == KeyEvent.ACTION_UP) {
+                if (viewController.handleBack()) {
+                    return true;
+                }
+                dialog.dismiss();
+            }
+        }
+        return false;
+    }
+}

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

+package com.reactnativenavigation.viewcontrollers.modal;
+
+import com.reactnativenavigation.viewcontrollers.ViewController;
+
+public class ModalCreator {
+    public Modal create(ViewController viewController) {
+        return new Modal(viewController);
+    }
+}

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

 
     private List<ViewController> tabs;
     private TopTabsLayoutCreator viewCreator;
-    private Options options;
 
     public TopTabsController(Activity activity, String id, List<ViewController> tabs, TopTabsLayoutCreator viewCreator, Options options) {
-        super(activity, id);
+        super(activity, id, options);
         this.viewCreator = viewCreator;
-        this.options = options;
         this.tabs = tabs;
         for (ViewController tab : tabs) {
             tab.setParentController(this);

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

+package com.reactnativenavigation.views;
+
+import android.annotation.SuppressLint;
+import android.content.Context;
+
+import com.aurelhubert.ahbottomnavigation.AHBottomNavigation;
+import com.reactnativenavigation.parse.BottomTabsOptions;
+import com.reactnativenavigation.parse.Text;
+import com.reactnativenavigation.utils.CompatUtils;
+
+@SuppressLint("ViewConstructor")
+public class BottomTabs extends AHBottomNavigation {
+    public BottomTabs(Context context, BottomTabsOptions bottomTabsOptions) {
+        super(context);
+        setId(CompatUtils.generateViewId());
+        setTestId(bottomTabsOptions.testId);
+    }
+
+    private void setTestId(Text testId) {
+        if (testId.hasValue()) setTag(testId.get());
+    }
+
+    public void setTabTag(int index, Text testId) {
+        if (!testId.hasValue()) return;
+        if (testId.hasValue()) getViewAtPosition(index).setTag(testId.get());
+        if (testId.hasValue()) getViewAtPosition(index).setContentDescription(testId.get());
+    }
+
+    public void setBadge(int bottomTabIndex, Text badge) {
+        setNotification(badge.get(), bottomTabIndex);
+    }
+}

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

 import android.graphics.Color;
 import android.graphics.drawable.Drawable;
 import android.support.annotation.NonNull;
+import android.support.v7.widget.ActionMenuView;
 import android.support.v7.widget.Toolbar;
 import android.text.Spannable;
 import android.text.SpannableString;
 import android.view.Menu;
 import android.view.MenuItem;
 import android.view.View;
+import android.widget.ImageButton;
 import android.widget.TextView;
 
 import com.reactnativenavigation.parse.Button;
 import com.reactnativenavigation.parse.Options;
-import com.reactnativenavigation.utils.ImageUtils;
+import com.reactnativenavigation.parse.Text;
+import com.reactnativenavigation.utils.ArrayUtils;
+import com.reactnativenavigation.utils.ImageLoader;
 import com.reactnativenavigation.utils.UiUtils;
+import com.reactnativenavigation.utils.ViewUtils;
 
 import java.util.ArrayList;
+import java.util.List;
 
 public class TitleBarButton implements MenuItem.OnMenuItemClickListener {
     public interface OnClickListener {
 			setTextColor();
 			setFontSize(menuItem);
 		}
-	}
 
-	void applyNavigationIcon(Context context) {
+        setTestId(button.testId);
+    }
+
+    void applyNavigationIcon(Context context) {
 		if (!hasIcon()) {
 			Log.w("RNN", "Left button needs to have an icon");
 			return;
 		}
 
-		ImageUtils.loadIcon(context, button.icon.get(), new ImageUtils.ImageLoadingListener() {
+		new ImageLoader().loadIcon(context, button.icon.get(), new ImageLoader.ImageLoadingListener() {
 			@Override
 			public void onComplete(@NonNull Drawable drawable) {
 				icon = drawable;
                 setIconColor();
                 setNavigationClickListener();
                 toolbar.setNavigationIcon(icon);
-			}
+                setLeftButtonTestId();
+            }
 
 			@Override
 			public void onError(Throwable error) {
 		});
 	}
 
-	private void applyIcon(Context context, final MenuItem menuItem) {
-		ImageUtils.loadIcon(context, button.icon.get(), new ImageUtils.ImageLoadingListener() {
+    private void setLeftButtonTestId() {
+        if (!button.testId.hasValue()) return;
+        toolbar.post(() -> {
+            ImageButton leftButton = ViewUtils.findChildByClass(toolbar, ImageButton.class);
+            if (leftButton != null) {
+                leftButton.setTag(button.testId.get());
+            }
+        });
+    }
+
+    private void applyIcon(Context context, final MenuItem menuItem) {
+        new ImageLoader().loadIcon(context, button.icon.get(), new ImageLoader.ImageLoadingListener() {
 			@Override
 			public void onComplete(@NonNull Drawable drawable) {
 				icon = drawable;
 
 	private void setTextColor() {
 		UiUtils.runOnPreDrawOnce(this.toolbar, () -> {
-            ArrayList<View> outViews = findActualTextViewInMenuByLabel();
+            ArrayList<View> outViews = findActualTextViewInMenuByText();
             setTextColorForFoundButtonViews(outViews);
         });
 	}
 		return true;
 	}
 
-	@NonNull
-	private ArrayList<View> findActualTextViewInMenuByLabel() {
-		ArrayList<View> outViews = new ArrayList<>();
-		this.toolbar.findViewsWithText(outViews, button.title.get(), View.FIND_VIEWS_WITH_TEXT);
-		return outViews;
-	}
-
 	private void setTextColorForFoundButtonViews(ArrayList<View> buttons) {
 		for (View button : buttons) {
 			((TextView) button).setTextColor(this.button.buttonColor);
 	}
 
 	private boolean hasIcon() {
-		return button.icon != null;
+		return button.icon.hasValue();
 	}
+
+    private void setTestId(Text testId) {
+        if (!testId.hasValue()) return;
+        UiUtils.runOnPreDrawOnce(this.toolbar, () -> {
+            ActionMenuView buttonsLayout = ViewUtils.findChildByClass(toolbar, ActionMenuView.class);
+            List<TextView> buttons = ViewUtils.findChildrenByClass(buttonsLayout, TextView.class);
+            for (TextView view : buttons) {
+                if (button.title.hasValue() && button.title.get().equals(view.getText())) {
+                    view.setTag(testId.get());
+                } else if (button.icon.hasValue() && ArrayUtils.contains(view.getCompoundDrawables(), icon)) {
+                    view.setTag(testId.get());
+                }
+            }
+        });
+    }
+
+    @NonNull
+    private ArrayList<View> findActualTextViewInMenuByText() {
+        ArrayList<View> outViews = new ArrayList<>();
+        this.toolbar.findViewsWithText(outViews, button.title.get(), View.FIND_VIEWS_WITH_TEXT);
+        return outViews;
+    }
 }

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

         return titleBar.getTitle() != null ? titleBar.getTitle().toString() : "";
     }
 
+    public void setTestId(String testId) {
+        setTag(testId);
+    }
+
     public void setTitleTextColor(Color color) {
         if (color.hasValue()) titleBar.setTitleTextColor(color.get());
     }

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

+package com.reactnativenavigation.mocks;
+
+import android.graphics.Canvas;
+import android.graphics.ColorFilter;
+import android.graphics.drawable.Drawable;
+import android.support.annotation.NonNull;
+
+import com.reactnativenavigation.utils.ImageLoader;
+
+import org.mockito.Mockito;
+
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.ArgumentMatchers.anyString;
+import static org.mockito.Mockito.doAnswer;
+
+public class ImageLoaderMock {
+    private static Drawable mockDrawable = new Drawable() {
+        @Override
+        public void draw(@NonNull Canvas canvas) {
+
+        }
+
+        @Override
+        public void setAlpha(int alpha) {
+
+        }
+
+        @Override
+        public void setColorFilter(@android.support.annotation.Nullable ColorFilter colorFilter) {
+
+        }
+
+        @Override
+        public int getOpacity() {
+            return 0;
+        }
+    };
+
+    public static ImageLoader mock() {
+        ImageLoader imageLoader = Mockito.mock(ImageLoader.class);
+        doAnswer(
+                invocation -> {
+                    ((ImageLoader.ImageLoadingListener) invocation.getArguments()[2]).onComplete(mockDrawable);
+                    return null;
+                }
+        ).when(imageLoader).loadIcon(any(), anyString(), any());
+        return imageLoader;
+    }
+}

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

+package com.reactnativenavigation.mocks;
+
+import com.reactnativenavigation.viewcontrollers.ViewController;
+import com.reactnativenavigation.viewcontrollers.modal.Modal;
+import com.reactnativenavigation.viewcontrollers.modal.ModalCreator;
+
+import static org.mockito.Mockito.spy;
+
+public class ModalCreatorMock extends ModalCreator {
+    @Override
+    public Modal create(ViewController viewController) {
+        return spy(new Modal(viewController));
+    }
+}

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

 
 public class SimpleViewController extends ViewController<FrameLayout> {
 
-    public SimpleViewController(final Activity activity, String id) {
-        super(activity, id);
-        options = new Options();
+    public SimpleViewController(final Activity activity, String id, Options options) {
+        super(activity, id, options);
     }
 
     @Override

lib/android/app/src/test/java/com/reactnativenavigation/parse/NavigationOptionsTest.java

     private static final Options.BooleanOptions TOP_BAR_HIDE_ON_SCROLL = True;
     private static final Options.BooleanOptions BOTTOM_TABS_ANIMATE_HIDE = True;
     private static final Options.BooleanOptions BOTTOM_TABS_HIDDEN = True;
-    private static final int BOTTOM_TABS_BADGE = 3;
+    private static final String BOTTOM_TABS_BADGE = "3";
     private static final String BOTTOM_TABS_CURRENT_TAB_ID = "ComponentId";
     private static final int BOTTOM_TABS_CURRENT_TAB_INDEX = 1;
     private TypefaceLoader mockLoader;
     public void parsesJson() throws Exception {
         JSONObject json = new JSONObject()
                 .put("topBar", createTopBar())
-                .put("bottomTabs", createTabBar());
+                .put("bottomTabs", createBottomTabs());
         Options result = Options.parse(mockLoader, json);
         assertResult(result);
     }
         assertThat(result.topBarOptions.drawBehind).isEqualTo(TOP_BAR_DRAW_BEHIND);
         assertThat(result.topBarOptions.hideOnScroll).isEqualTo(TOP_BAR_HIDE_ON_SCROLL);
         assertThat(result.bottomTabsOptions.animateHide).isEqualTo(BOTTOM_TABS_ANIMATE_HIDE);
-        assertThat(result.bottomTabsOptions.hidden).isEqualTo(BOTTOM_TABS_HIDDEN);
-        assertThat(result.bottomTabsOptions.tabBadge).isEqualTo(BOTTOM_TABS_BADGE);
+        assertThat(result.bottomTabsOptions.visible).isEqualTo(BOTTOM_TABS_HIDDEN);
         assertThat(result.bottomTabsOptions.currentTabId.get()).isEqualTo(BOTTOM_TABS_CURRENT_TAB_ID);
         assertThat(result.bottomTabsOptions.currentTabIndex).isEqualTo(BOTTOM_TABS_CURRENT_TAB_INDEX);
     }
 
     @NonNull
-    private JSONObject createTabBar() throws JSONException {
+    private JSONObject createBottomTabs() throws JSONException {
         return new JSONObject()
                 .put("currentTabId", BOTTOM_TABS_CURRENT_TAB_ID)
                 .put("currentTabIndex", BOTTOM_TABS_CURRENT_TAB_INDEX)
-                .put("hidden", BOTTOM_TABS_HIDDEN)
-                .put("animateHide", BOTTOM_TABS_ANIMATE_HIDE)
-                .put("tabBadge", BOTTOM_TABS_BADGE);
+                .put("visible", BOTTOM_TABS_HIDDEN)
+                .put("animateHide", BOTTOM_TABS_ANIMATE_HIDE);
     }
 
     @NonNull
                 .put("textColor", TOP_BAR_TEXT_COLOR)
                 .put("textFontSize", TOP_BAR_FONT_SIZE)
                 .put("textFontFamily", TOP_BAR_FONT_FAMILY)
-                .put("hidden", TOP_BAR_HIDDEN);
+                .put("visible", TOP_BAR_HIDDEN);
     }
 
     @NonNull
         return new JSONObject()
                 .put("currentTabId", BOTTOM_TABS_CURRENT_TAB_ID)
                 .put("currentTabIndex", BOTTOM_TABS_CURRENT_TAB_INDEX)
-                .put("hidden", BOTTOM_TABS_HIDDEN)
+                .put("visible", BOTTOM_TABS_HIDDEN)
                 .put("animateHide", BOTTOM_TABS_ANIMATE_HIDE)
                 .put("tabBadge", BOTTOM_TABS_BADGE);
     }
     public void mergeDefaultOptions() throws Exception {
         JSONObject json = new JSONObject();
         json.put("topBar", createTopBar());
-        json.put("bottomTabs", createTabBar());
+        json.put("bottomTabs", createBottomTabs());
         Options defaultOptions = Options.parse(mockLoader, json);
         Options options = new Options();
 
 
         JSONObject json = new JSONObject()
                 .put("topBar", createTopBar())
-                .put("bottomTabs", createTabBar());
+                .put("bottomTabs", createBottomTabs());
         Options options = Options.parse(mockLoader, json);
         options.withDefaultOptions(defaultOptions);
         assertResult(options);

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

+package com.reactnativenavigation.utils;
+
+import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.parse.Text;
+
+public class OptionHelper {
+    public static Options createBottomTabOptions() {
+        Options options = new Options();
+        options.bottomTabOptions.title = new Text("Tab");
+        options.bottomTabOptions.icon = new Text("http://127.0.0.1/icon.png");
+        return options;
+    }
+}

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

 package com.reactnativenavigation.viewcontrollers;
 
-import android.app.*;
-import android.support.annotation.*;
-import android.support.design.widget.*;
-import android.view.*;
-import android.widget.*;
-
-import com.reactnativenavigation.*;
-import com.reactnativenavigation.mocks.*;
-
-import org.assertj.core.api.iterable.*;
-import org.junit.*;
-
-import java.util.*;
-
-import static org.assertj.core.api.Java6Assertions.*;
-import static org.mockito.Mockito.*;
+import android.app.Activity;
+import android.support.annotation.NonNull;
+import android.widget.RelativeLayout;
+
+import com.reactnativenavigation.BaseTest;
+import com.reactnativenavigation.mocks.ImageLoaderMock;
+import com.reactnativenavigation.mocks.MockPromise;
+import com.reactnativenavigation.mocks.SimpleViewController;
+import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.utils.ImageLoader;
+import com.reactnativenavigation.utils.OptionHelper;
+import com.reactnativenavigation.views.BottomTabs;
+
+import org.junit.Test;
+
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.List;
+
+import static org.assertj.core.api.Java6Assertions.assertThat;
+import static org.mockito.Mockito.spy;
+import static org.mockito.Mockito.times;
+import static org.mockito.Mockito.verify;
+import static org.mockito.Mockito.when;
 
 public class BottomTabsControllerTest extends BaseTest {
 
     private ViewController child3;
     private ViewController child4;
     private ViewController child5;
+    private Options tabOptions = OptionHelper.createBottomTabOptions();
+    private ImageLoader imageLoaderMock = ImageLoaderMock.mock();
 
     @Override
     public void beforeEach() {
         super.beforeEach();
         activity = newActivity();
-        uut = new BottomTabsController(activity, "uut");
-        child1 = new SimpleViewController(activity, "child1");
-        child2 = new SimpleViewController(activity, "child2");
-        child3 = new SimpleViewController(activity, "child3");
-        child4 = new SimpleViewController(activity, "child4");
-        child5 = new SimpleViewController(activity, "child5");
+        uut = new BottomTabsController(activity, imageLoaderMock, "uut", new Options());
+        child1 = new SimpleViewController(activity, "child1", tabOptions);
+        child2 = new SimpleViewController(activity, "child2", tabOptions);
+        child3 = new SimpleViewController(activity, "child3", tabOptions);
+        child4 = new SimpleViewController(activity, "child4", tabOptions);
+        child5 = new SimpleViewController(activity, "child5", tabOptions);
     }
 
     @Test
     public void containsRelativeLayoutView() throws Exception {
         assertThat(uut.getView()).isInstanceOf(RelativeLayout.class);
-        assertThat(uut.getView().getChildAt(0)).isInstanceOf(BottomNavigationView.class);
+        assertThat(uut.getView().getChildAt(0)).isInstanceOf(BottomTabs.class);
     }
 
     @Test(expected = RuntimeException.class)
     public void setTabs_ThrowWhenMoreThan5() throws Exception {
         List<ViewController> tabs = createTabs();
-        tabs.add(new SimpleViewController(activity, "6"));
+        tabs.add(new SimpleViewController(activity, "6", tabOptions));
+        uut.setTabs(tabs);
+    }
+
+    @Test
+    public void setTab_controllerIsSetAsParent() throws Exception {
+        List<ViewController> tabs = createTabs();
         uut.setTabs(tabs);
+        for (ViewController tab : tabs) {
+            assertThat(tab.getParentController()).isEqualTo(uut);
+        }
     }
 
     @Test
-    public void setTabs_AddAllViewsAsGoneExceptFirst() throws Exception {
+    public void setTabs_AddAllViews() throws Exception {
         List<ViewController> tabs = createTabs();
         uut.setTabs(tabs);
-        assertThat(uut.getView().getChildCount()).isEqualTo(6);
-        assertThat(uut.getChildControllers()).extracting((Extractor<ViewController, Integer>) input -> input.getView().getVisibility()).containsExactly(View.VISIBLE, View.GONE, View.GONE, View.GONE, View.GONE);
+        assertThat(uut.getView().getChildCount()).isEqualTo(2);
+        assertThat(((ViewController) ((List) uut.getChildControllers()).get(0)).getView().getParent()).isNotNull();
     }
 
     @Test
         uut.selectTabAtIndex(3);
 
         assertThat(uut.getSelectedIndex()).isEqualTo(3);
-        assertThat(uut.getChildControllers()).extracting((Extractor<ViewController, Integer>) input -> input.getView().getVisibility()).containsExactly(View.GONE, View.GONE, View.GONE, View.VISIBLE, View.GONE);
+        assertThat(((ViewController) ((List) uut.getChildControllers()).get(0)).getView().getParent()).isNull();
     }
 
     @Test
     public void findControllerById_ReturnsSelfOrChildren() throws Exception {
         assertThat(uut.findControllerById("123")).isNull();
         assertThat(uut.findControllerById(uut.getId())).isEqualTo(uut);
-        StackController inner = new StackController(activity, "inner");
+        StackController inner = new StackController(activity, "inner", tabOptions);
         inner.animatePush(child1, new MockPromise());
         assertThat(uut.findControllerById(child1.getId())).isNull();
         uut.setTabs(Collections.singletonList(inner));

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

         super.beforeEach();
         Activity activity = newActivity();
         view = spy(new TestComponentLayout(activity, new TestReactView(activity)));
-        ParentController<StackLayout> parentController = new StackController(activity, "stack");
+        ParentController<StackLayout> parentController = new StackController(activity, "stack", new Options());
         uut = new ComponentViewController(activity, "componentId1", "componentName", (activity1, componentId, componentName) -> view, new Options());
         uut.setParentController(parentController);
         parentController.ensureViewIsCreated();

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

+package com.reactnativenavigation.viewcontrollers;
+
+import com.reactnativenavigation.BaseTest;
+import com.reactnativenavigation.mocks.MockPromise;
+import com.reactnativenavigation.mocks.ModalCreatorMock;
+import com.reactnativenavigation.mocks.SimpleViewController;
+import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.viewcontrollers.modal.Modal;
+
+import org.junit.Test;
+
+import javax.annotation.Nullable;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.mockito.Mockito.spy;
+import static org.mockito.Mockito.times;
+import static org.mockito.Mockito.verify;
+
+public class ModalStackTest extends BaseTest {
+    private static final String CONTROLLER_ID = "simpleController";
+    private ModalStack uut;
+    private SimpleViewController viewController;
+
+    @Override
+    public void beforeEach() {
+        uut = spy(new ModalStack(new ModalCreatorMock()));
+        viewController = new SimpleViewController(newActivity(), CONTROLLER_ID, new Options());
+    }
+
+    @Test
+    public void modalRefIsSaved() throws Exception {
+        uut.showModal(viewController, new MockPromise());
+        assertThat(findModal()).isNotNull();
+    }
+
+    @Test
+    public void modalIsShown() throws Exception {
+        uut.showModal(viewController, new MockPromise() {
+            @Override
+            public void resolve(@Nullable Object value) {
+                verify(findModal(), times(1)).show();
+            }
+        });
+    }
+
+    @Test
+    public void modalIsDismissed() throws Exception {
+        uut.showModal(viewController, new MockPromise());
+        assertThat(findModal()).isNotNull();
+        uut.dismissModal(CONTROLLER_ID, new MockPromise());
+        assertThat(findModal()).isNull();
+    }
+
+    private Modal findModal() {
+        return uut.findModalByComponentId("simpleController");
+    }
+}

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

 package com.reactnativenavigation.viewcontrollers;
 
-import android.app.*;
-import android.support.annotation.*;
+import android.app.Activity;
+import android.support.annotation.NonNull;
 
-import com.reactnativenavigation.*;
-import com.reactnativenavigation.mocks.*;
-import com.reactnativenavigation.parse.*;
-import com.reactnativenavigation.utils.*;
+import com.reactnativenavigation.BaseTest;
+import com.reactnativenavigation.mocks.ImageLoaderMock;
+import com.reactnativenavigation.mocks.MockPromise;
+import com.reactnativenavigation.mocks.SimpleComponentViewController;
+import com.reactnativenavigation.mocks.SimpleViewController;
+import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.parse.Text;
+import com.reactnativenavigation.utils.CompatUtils;
+import com.reactnativenavigation.utils.ImageLoader;
+import com.reactnativenavigation.utils.OptionHelper;
 
-import org.junit.*;
+import org.junit.Test;
 
-import java.util.*;
+import java.util.Arrays;
 
 import javax.annotation.Nullable;
 
-import static org.assertj.core.api.Java6Assertions.*;
-import static org.mockito.Mockito.*;
+import static org.assertj.core.api.Java6Assertions.assertThat;
+import static org.mockito.Mockito.spy;
+import static org.mockito.Mockito.times;
+import static org.mockito.Mockito.verify;
+import static org.mockito.Mockito.when;
 
 public class NavigatorTest extends BaseTest {
     private Activity activity;
     private Navigator uut;
-    private ParentController parentController;
+    private StackController parentController;
     private SimpleViewController child1;
     private ViewController child2;
     private ViewController child3;
     private ViewController child4;
     private ViewController child5;
-
+    private Options tabOptions = OptionHelper.createBottomTabOptions();
+    private ImageLoader imageLoaderMock;
 
     @Override
     public void beforeEach() {
         super.beforeEach();
+        imageLoaderMock = ImageLoaderMock.mock();
         activity = newActivity();
         uut = new Navigator(activity);
-        parentController = new StackController(activity, "stack");
+        parentController = spy(new StackController(activity, "stack", new Options()));
         parentController.ensureViewIsCreated();
-        child1 = new SimpleViewController(activity, "child1");
-        child2 = new SimpleViewController(activity, "child2");
-        child3 = new SimpleViewController(activity, "child3");
-        child4 = new SimpleViewController(activity, "child4");
-        child5 = new SimpleViewController(activity, "child5");
+        child1 = new SimpleViewController(activity, "child1", tabOptions);
+        child2 = new SimpleViewController(activity, "child2", tabOptions);
+        child3 = new SimpleViewController(activity, "child3", tabOptions);
+        child4 = new SimpleViewController(activity, "child4", tabOptions);
+        child5 = new SimpleViewController(activity, "child5", tabOptions);
     }
 
     @Test
         bottomTabsController.setTabs(Arrays.asList(stack1, stack2));
         uut.setRoot(bottomTabsController, new MockPromise());
 
-        SimpleViewController newChild = new SimpleViewController(activity, "new child");
+        SimpleViewController newChild = new SimpleViewController(activity, "new child", tabOptions);
         uut.push(child2.getId(), newChild, new MockPromise());
 
         assertThat(stack1.getChildControllers()).doesNotContain(newChild);
 
     @NonNull
     private BottomTabsController newTabs() {
-        return new BottomTabsController(activity, "tabsController");
+        return new BottomTabsController(activity, imageLoaderMock, "tabsController", new Options());
     }
 
     @NonNull
     private StackController newStack() {
-        return new StackController(activity, "stack" + CompatUtils.generateViewId());
+        return new StackController(activity, "stack" + CompatUtils.generateViewId(), tabOptions);
     }
 
     @Test
         uut.push(stackController.getId(), child2, new MockPromise());
         assertIsChildById(stackController.getView(), child2.getView());
     }
+
+    @Test
+    public void pushedStackCanBePopped() throws Exception {
+        StackController parent = new StackController(activity, "someStack", new Options());
+        parent.ensureViewIsCreated();
+        uut.setRoot(parent, new MockPromise());
+        parent.push(parentController, new MockPromise());
+
+        parentController.push(child1, new MockPromise());
+        parentController.push(child2, new MockPromise());
+        assertThat(parentController.getChildControllers().size()).isEqualTo(2);
+        child1.ensureViewIsCreated();
+        child2.ensureViewIsCreated();
+
+        MockPromise promise = new MockPromise() {
+            @Override
+            public void resolve(@Nullable Object value) {
+                assertThat(parentController.getChildControllers().size()).isEqualTo(1);
+            }
+        };
+        uut.popSpecific("child2", promise);
+        verify(parentController, times(1)).popSpecific(child2, promise);
+    }
 }

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

                 (activity1, componentId, componentName) -> view,
                 initialNavigationOptions
         );
-        stackController = new StackController(activity, "stack");
+        stackController = new StackController(activity, "stack", new Options());
         stackController.ensureViewIsCreated();
         uut.setParentController(stackController);
     }
     public void initialOptionsAppliedOnAppear() throws Exception {
         assertThat(uut.getOptions()).isSameAs(initialNavigationOptions);
         initialNavigationOptions.topBarOptions.title = new Text("the title");
-        StackController stackController = new StackController(activity, "stackId");
+        StackController stackController = new StackController(activity, "stackId", new Options());
         stackController.animatePush(uut, new MockPromise() {});
         assertThat(stackController.getTopBar().getTitle()).isEmpty();
 

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

 
 import com.reactnativenavigation.*;
 import com.reactnativenavigation.mocks.*;
+import com.reactnativenavigation.parse.Options;
 
 import org.junit.*;
 
         super.beforeEach();
         activity = newActivity();
         children = new ArrayList<>();
-        uut = new ParentController(activity, "uut") {
+        uut = new ParentController(activity, "uut", new Options()) {
 
             @NonNull
             @Override
 
     @Test
     public void findControllerById_ChildById() throws Exception {
-        SimpleViewController child1 = new SimpleViewController(activity, "child1");
-        SimpleViewController child2 = new SimpleViewController(activity, "child2");
+        SimpleViewController child1 = new SimpleViewController(activity, "child1", new Options());
+        SimpleViewController child2 = new SimpleViewController(activity, "child2", new Options());
         children.add(child1);
         children.add(child2);
 
 
     @Test
     public void findControllerById_Recursive() throws Exception {
-        StackController stackController = new StackController(activity, "stack");
-        SimpleViewController child1 = new SimpleViewController(activity, "child1");
-        SimpleViewController child2 = new SimpleViewController(activity, "child2");
+        StackController stackController = new StackController(activity, "stack", new Options());
+        SimpleViewController child1 = new SimpleViewController(activity, "child1", new Options());
+        SimpleViewController child2 = new SimpleViewController(activity, "child2", new Options());
         stackController.animatePush(child1, new MockPromise());
         stackController.animatePush(child2, new MockPromise());
         children.add(stackController);
 
     @Test
     public void destroy_DestroysChildren() throws Exception {
-        ViewController child1 = spy(new SimpleViewController(activity, "child1"));
+        ViewController child1 = spy(new SimpleViewController(activity, "child1", new Options()));
         children.add(child1);
 
         verify(child1, times(0)).destroy();
 
     @Test
     public void optionsAreClearedWhenChildIsAppeared() throws Exception {
-        StackController stackController = spy(new StackController(activity, "stack"));
-        SimpleViewController child1 = new SimpleViewController(activity, "child1");
+        StackController stackController = spy(new StackController(activity, "stack", new Options()));
+        SimpleViewController child1 = new SimpleViewController(activity, "child1", new Options());
         stackController.animatePush(child1, new MockPromise());
 
         child1.onViewAppeared();

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

 package com.reactnativenavigation.viewcontrollers;
 
-import android.app.*;
+import android.app.Activity;
 import android.view.View;
 
-import com.reactnativenavigation.*;
-import com.reactnativenavigation.mocks.*;
+import com.reactnativenavigation.BaseTest;
+import com.reactnativenavigation.mocks.MockPromise;
+import com.reactnativenavigation.mocks.SimpleViewController;
+import com.reactnativenavigation.parse.Options;
 
-import org.assertj.core.api.iterable.*;
-import org.junit.*;
+import org.assertj.core.api.iterable.Extractor;
+import org.junit.Test;
 
 import javax.annotation.Nullable;
 
-import static org.assertj.core.api.Java6Assertions.*;
-import static org.mockito.Mockito.*;
+import static org.assertj.core.api.Java6Assertions.assertThat;
+import static org.mockito.Mockito.spy;
+import static org.mockito.Mockito.times;
+import static org.mockito.Mockito.verify;
 
 public class StackControllerTest extends BaseTest {
 
     public void beforeEach() {
         super.beforeEach();
         activity = newActivity();
-        uut = new StackController(activity, "uut");
-        child1 = new SimpleViewController(activity, "child1");
-        child2 = new SimpleViewController(activity, "child2");
-        child3 = new SimpleViewController(activity, "child3");
+        uut = new StackController(activity, "uut", new Options());
+        child1 = new SimpleViewController(activity, "child1", new Options());
+        child2 = new SimpleViewController(activity, "child2", new Options());
+        child3 = new SimpleViewController(activity, "child3", new Options());
     }
 
     @Test
         uut.animatePush(child1, new MockPromise());
         assertThat(child1.getParentController()).isEqualTo(uut);
 
-        StackController anotherNavController = new StackController(activity, "another");
+        StackController anotherNavController = new StackController(activity, "another", new Options());
         anotherNavController.animatePush(child2, new MockPromise());
         assertThat(child2.getParentController()).isEqualTo(anotherNavController);
     }
 
     @Test
     public void findControllerById_Deeply() throws Exception {
-        StackController stack = new StackController(activity, "stack2");
+        StackController stack = new StackController(activity, "stack2", new Options());
         stack.animatePush(child2, new MockPromise());
         uut.animatePush(stack, new MockPromise());
         assertThat(uut.findControllerById(child2.getId())).isEqualTo(child2);
         });
     }
 
+    @Test
+    public void stackCanBePushed() throws Exception {
+        StackController parent = new StackController(activity, "someStack", new Options());
+        parent.ensureViewIsCreated();
+        parent.push(uut, new MockPromise());
+        uut.onViewAppeared();
+        assertThat(parent.getView().getChildAt(1)).isEqualTo(uut.getView());
+    }
+
     private void assertContainsOnlyId(String... ids) {
         assertThat(uut.size()).isEqualTo(ids.length);
         assertThat(uut.getChildControllers()).extracting((Extractor<ViewController, String>) ViewController::getId).containsOnly(ids);

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

-package com.reactnativenavigation.viewcontrollers;
-
-import android.app.*;
-import android.support.annotation.*;
-import android.view.*;
-
-import java.util.*;
-
-public class TopTabsControllerMock extends ParentController {
-    TopTabsControllerMock(Activity activity, String id) {
-        super(activity, id);
-    }
-
-    @NonNull
-    @Override
-    protected ViewGroup createView() {
-        return null;
-    }
-
-    @NonNull
-    @Override
-    public Collection<? extends ViewController> getChildControllers() {
-        return null;
-    }
-}

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

         uut = spy(new TopTabsController(activity, "componentId", tabControllers, layoutCreator, options));
         tabControllers.forEach(viewController -> viewController.setParentController(uut));
 
-        parentController = spy(new StackController(activity, "stackId"));
+        parentController = spy(new StackController(activity, "stackId", new Options()));
         uut.setParentController(parentController);
     }
 

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

 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.MockPromise;
 import com.reactnativenavigation.mocks.SimpleViewController;
+import com.reactnativenavigation.parse.Options;
 
 import org.assertj.android.api.Assertions;
 import org.junit.Test;
     public void beforeEach() {
         super.beforeEach();
         activity = newActivity();
-        uut = new SimpleViewController(activity, "uut");
+        uut = new SimpleViewController(activity, "uut", new Options());
     }
 
     @Test
     @Test
     public void canOverrideViewCreation() throws Exception {
         final FrameLayout otherView = new FrameLayout(activity);
-        ViewController myController = new ViewController(activity, "vc") {
+        ViewController myController = new ViewController(activity, "vc", new Options()) {
             @Override
             protected FrameLayout createView() {
                 return otherView;
     @Test
     public void holdsAReferenceToStackControllerOrNull() throws Exception {
         assertThat(uut.getParentController()).isNull();
-        StackController nav = new StackController(activity, "stack");
+        StackController nav = new StackController(activity, "stack", new Options());
         nav.animatePush(uut, new MockPromise());
         assertThat(uut.getParentController()).isEqualTo(nav);
     }
 
     @Test
     public void onDestroy_RemovesGlobalLayoutListener() throws Exception {
-        new SimpleViewController(activity, "ensureNotNull").destroy();
+        new SimpleViewController(activity, "ensureNotNull", new Options()).destroy();
 
         ViewController spy = spy(uut);
         View view = spy.getView();

lib/ios/RNNBottomTabsOptions.h

 @property (nonatomic, strong) NSNumber* hideShadow;
 @property (nonatomic, strong) NSNumber* backgroundColor;
 @property (nonatomic, strong) NSNumber* textColor;
+@property (nonatomic, strong) NSNumber* tabColor;
+@property (nonatomic, strong) NSNumber* selectedTabColor;
 @property (nonatomic, strong) NSNumber* selectedTextColor;
 @property (nonatomic, strong) NSString* fontFamily;
 @property (nonatomic, strong) NSNumber* fontSize;

lib/ios/RNNControllerFactory.m

 
 - (UIViewController<RNNRootViewProtocol> *)createStack:(RNNLayoutNode*)node {
 	RNNNavigationController* vc = [[RNNNavigationController alloc] init];
-	
+	RNNNavigationOptions* options = [[RNNNavigationOptions alloc] initWithDict:node.data[@"options"]];
 	NSMutableArray* controllers = [NSMutableArray new];
 	for (NSDictionary* child in node.children) {
 		[controllers addObject:[self fromTree:child]];
 	}
 	[vc setViewControllers:controllers];
+	[vc setOptions:options];
 	
 	return vc;
 }
 
 -(UIViewController<RNNRootViewProtocol> *)createTabs:(RNNLayoutNode*)node {
 	RNNTabBarController* vc = [[RNNTabBarController alloc] init];
+	RNNNavigationOptions* options = [[RNNNavigationOptions alloc] initWithDict:node.data[@"options"]];
 	
 	NSMutableArray* controllers = [NSMutableArray new];
 	for (NSDictionary *child in node.children) {
 		[controllers addObject:childVc];
 	}
 	[vc setViewControllers:controllers];
+	[vc setOptions:options];
 	
 	return vc;
 }

lib/ios/RNNCustomTitleView.h

+#import <UIKit/UIKit.h>
+
+@interface RNNCustomTitleView : UIView
+
+-(instancetype)initWithFrame:(CGRect)frame subView:(UIView*)subView alignment:(NSString*)alignment;
+
+@end

lib/ios/RNNCustomTitleView.m

+#import "RNNCustomTitleView.h"
+
+@interface RNNCustomTitleView ()
+@property (nonatomic, strong) UIView *subView;
+@property (nonatomic, strong) NSString *subViewAlign;
+@end
+
+@implementation RNNCustomTitleView
+
+
+-(instancetype)initWithFrame:(CGRect)frame subView:(UIView*)subView alignment:(NSString*)alignment {
+    self = [super initWithFrame:frame];
+    
+    if (self) {
+        self.backgroundColor = [UIColor clearColor];
+        self.subView = subView;
+        self.subViewAlign = alignment;
+        
+        subView.frame = self.bounds;
+        [self addSubview:subView];
+    }
+    
+    return self;
+}
+
+
+-(void)layoutSubviews {
+    [super layoutSubviews];
+    
+    if ([self.subViewAlign isEqualToString:@"fill"]) {
+        self.subView.frame = self.bounds;
+    }
+    else {
+        
+        CGFloat superViewWidth = self.superview.frame.size.width;
+        CGFloat paddingLeftFromCenter = (superViewWidth/2) - self.frame.origin.x;
+        CGFloat paddingRightFromCenter = self.frame.size.width - paddingLeftFromCenter;;
+        CGRect reactViewFrame = self.subView.bounds;
+        CGFloat minPadding = MIN(paddingLeftFromCenter, paddingRightFromCenter);
+        
+        reactViewFrame.size.width = minPadding*2;
+        reactViewFrame.origin.x = paddingLeftFromCenter - minPadding;
+        self.subView.frame = reactViewFrame;
+    }
+}
+
+@end

lib/ios/RNNNavigationButtons.m

 -(RNNUIBarButtonItem*)buildButton: (NSDictionary*)dictionary {
 	NSString* buttonId = dictionary[@"id"];
 	NSString* title = dictionary[@"title"];
+	NSString* component = dictionary[@"component"];
 	
 	if (!buttonId) {
 		@throw [NSException exceptionWithName:@"NSInvalidArgumentException" reason:[@"button id is not specified " stringByAppendingString:title] userInfo:nil];
 	}
 	
 	RNNUIBarButtonItem *barButtonItem;
-	if (iconImage) {
+	if (component) {
+		RCTRootView *view = (RCTRootView*)[self.viewController.creator createRootView:component rootViewId:buttonId];
+		barButtonItem = [[RNNUIBarButtonItem alloc] init:buttonId withCustomView:view];
+	} else if (iconImage) {
 		barButtonItem = [[RNNUIBarButtonItem alloc] init:buttonId withIcon:iconImage];
 	} else if (title) {
 		barButtonItem = [[RNNUIBarButtonItem alloc] init:buttonId withTitle:title];

lib/ios/RNNNavigationController.m

 	return rootVC.isAnimated;
 }
 
+- (void)setOptions:(RNNNavigationOptions *)options {
+	((UIViewController<RNNRootViewProtocol>*)self.topViewController).options = options;
+}
+
 - (NSString *)componentId {
 	return ((UIViewController<RNNRootViewProtocol>*)self.topViewController).componentId;
 }

lib/ios/RNNRootViewController.h

 @property (nonatomic, strong) RNNEventEmitter *eventEmitter;
 @property (nonatomic, strong) NSString* componentId;
 @property (nonatomic, strong) RNNTopTabsViewController* topTabsViewController;
+@property (nonatomic) id<RNNRootViewCreator> creator;
 @property (nonatomic, strong) RNNAnimator* animator;
 
 -(instancetype)initWithName:(NSString*)name

lib/ios/RNNRootViewController.m

 #import "RNNRootViewController.h"
 #import <React/RCTConvert.h>
 #import "RNNAnimator.h"
+#import "RNNCustomTitleView.h"
 
 @interface RNNRootViewController()
 @property (nonatomic, strong) NSString* componentName;
 @property (nonatomic) BOOL _statusBarHidden;
-
 @end
 
 @implementation RNNRootViewController
 	self.options = options;
 	self.eventEmitter = eventEmitter;
 	self.animator = [[RNNAnimator alloc] initWithTransitionOptions:self.options.customTransition];
+	self.creator = creator;
 	self.view = [creator createRootView:self.componentName rootViewId:self.componentId];
 	
 	[[NSNotificationCenter defaultCenter] addObserver:self
 -(void)viewWillAppear:(BOOL)animated{
 	[super viewWillAppear:animated];
 	[self.options applyOn:self];
+	[self setCustomNavigationTitleView];
+	[self setCustomNavigationBarView];
 }
 
 -(void)viewDidAppear:(BOOL)animated {
 	[super viewDidLoad];
 }
 
+- (void)setCustomNavigationTitleView {
+	if (self.options.topBar.customTitleViewName) {
+		UIView *reactView = [_creator createRootView:self.options.topBar.customTitleViewName rootViewId:self.options.topBar.customTitleViewName];
+		
+		RNNCustomTitleView *titleView = [[RNNCustomTitleView alloc] initWithFrame:self.navigationController.navigationBar.bounds subView:reactView alignment:nil];
+		self.navigationItem.titleView = titleView;
+	}
+}
+
+- (void)setCustomNavigationBarView {
+	if (self.options.topBar.customViewName) {
+		UIView *reactView = [_creator createRootView:self.options.topBar.customViewName rootViewId:@"navBar"];
+		
+		RNNCustomTitleView *titleView = [[RNNCustomTitleView alloc] initWithFrame:self.navigationController.navigationBar.bounds subView:reactView alignment:nil];
+		[self.navigationController.navigationBar addSubview:titleView];
+	}
+}
+
 -(BOOL)isCustomTransitioned {
 	return self.options.customTransition != nil;
 }

lib/ios/RNNRootViewProtocol.h

 
 @protocol RNNRootViewProtocol <NSObject, UINavigationControllerDelegate>
 
+@optional
+- (void)setOptions:(RNNNavigationOptions*)options;
+
 @required
 
 - (BOOL)isCustomTransitioned;

lib/ios/RNNTabBarController.m

 	return YES;
 }
 
+- (void)setOptions:(RNNNavigationOptions *)options {
+	[((UIViewController<RNNRootViewProtocol>*)self.selectedViewController) setOptions:options];
+}
+
 - (NSString *)componentId {
 	return ((UIViewController<RNNRootViewProtocol>*)self.selectedViewController).componentId;
 }

lib/ios/RNNTopBarOptions.h

 @property (nonatomic, strong) NSNumber* largeTitle;
 @property (nonatomic, strong) NSString* testID;
 
+@property (nonatomic, strong) NSString* customTitleViewName;
+@property (nonatomic, strong) NSString* customViewName;
+
 @end

lib/ios/RNNTopBarOptions.m

 #import "RNNTopBarOptions.h"
 #import "RNNNavigationButtons.h"
+#import "RNNCustomTitleView.h"
 
 extern const NSInteger BLUR_TOPBAR_TAG;
 

lib/ios/RNNUIBarButtonItem.h

 #import <Foundation/Foundation.h>
+#import <React/RCTRootView.h>
+#import <React/RCTRootViewDelegate.h>
 
-@interface RNNUIBarButtonItem : UIBarButtonItem
+@interface RNNUIBarButtonItem : UIBarButtonItem <RCTRootViewDelegate>
 
 @property (nonatomic, strong) NSString* buttonId;
 
 -(instancetype)init:(NSString*)buttonId withIcon:(UIImage*)iconImage;
 -(instancetype)init:(NSString*)buttonId withTitle:(NSString*)title;
+-(instancetype)init:(NSString*)buttonId withCustomView:(RCTRootView*)reactView;
 
 @end
 

lib/ios/RNNUIBarButtonItem.m

 	return self;
 }
 
+-(instancetype)init:(NSString*)buttonId withCustomView:(RCTRootView *)reactView {
+	self = [super initWithCustomView:reactView];
+	
+	reactView.sizeFlexibility = RCTRootViewSizeFlexibilityWidthAndHeight;
+	reactView.delegate = self;
+	reactView.backgroundColor = [UIColor clearColor];
+	self.buttonId = buttonId;
+	return self;
+}
+
+- (void)rootViewDidChangeIntrinsicSize:(RCTRootView *)rootView {
+	CGSize size = rootView.intrinsicContentSize;
+	rootView.frame = CGRectMake(0, 0, size.width, size.height);
+	self.width = size.width;
+}
+
 @end

lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj

 		2DCD9196200014A900EDC75D /* RNNBridgeManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 2DCD9194200014A900EDC75D /* RNNBridgeManager.m */; };
 		390AD477200F499D00A8250D /* RNNSwizzles.h in Headers */ = {isa = PBXBuildFile; fileRef = 390AD475200F499D00A8250D /* RNNSwizzles.h */; };
 		390AD478200F499D00A8250D /* RNNSwizzles.m in Sources */ = {isa = PBXBuildFile; fileRef = 390AD476200F499D00A8250D /* RNNSwizzles.m */; };
+		5016E8EF20209690009D4F7C /* RNNCustomTitleView.h in Headers */ = {isa = PBXBuildFile; fileRef = 5016E8ED2020968F009D4F7C /* RNNCustomTitleView.h */; };
+		5016E8F020209690009D4F7C /* RNNCustomTitleView.m in Sources */ = {isa = PBXBuildFile; fileRef = 5016E8EE2020968F009D4F7C /* RNNCustomTitleView.m */; };
 		5032774E2015E86D00ECD75D /* RNNNavigationEvent.h in Headers */ = {isa = PBXBuildFile; fileRef = 5032774C2015E86D00ECD75D /* RNNNavigationEvent.h */; };
 		5032774F2015E86D00ECD75D /* RNNNavigationEvent.m in Sources */ = {isa = PBXBuildFile; fileRef = 5032774D2015E86D00ECD75D /* RNNNavigationEvent.m */; };
 		503277602016302900ECD75D /* RNNComponentLifecycleEvent.h in Headers */ = {isa = PBXBuildFile; fileRef = 5032775E2016302900ECD75D /* RNNComponentLifecycleEvent.h */; };
 		2DCD9194200014A900EDC75D /* RNNBridgeManager.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNBridgeManager.m; sourceTree = "<group>"; };
 		390AD475200F499D00A8250D /* RNNSwizzles.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNSwizzles.h; sourceTree = "<group>"; };
 		390AD476200F499D00A8250D /* RNNSwizzles.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNSwizzles.m; sourceTree = "<group>"; };
+		5016E8ED2020968F009D4F7C /* RNNCustomTitleView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNCustomTitleView.h; sourceTree = "<group>"; };
+		5016E8EE2020968F009D4F7C /* RNNCustomTitleView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNCustomTitleView.m; sourceTree = "<group>"; };
 		5032774C2015E86D00ECD75D /* RNNNavigationEvent.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNNavigationEvent.h; sourceTree = "<group>"; };
 		5032774D2015E86D00ECD75D /* RNNNavigationEvent.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNNavigationEvent.m; sourceTree = "<group>"; };
 		5032775E2016302900ECD75D /* RNNComponentLifecycleEvent.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNComponentLifecycleEvent.h; sourceTree = "<group>"; };
 		E8AEDB471F584175000F5A6A /* Components */ = {
 			isa = PBXGroup;
 			children = (
+				5016E8ED2020968F009D4F7C /* RNNCustomTitleView.h */,
+				5016E8EE2020968F009D4F7C /* RNNCustomTitleView.m */,
 				E8A5CD601F49114F00E89D0D /* RNNElement.h */,
 				E8A5CD611F49114F00E89D0D /* RNNElement.m */,
 				E8AEDB3A1F55A1C2000F5A6A /* RNNElementView.h */,
 				50F5DFC11F407A8C001A00BC /* RNNTabBarController.h in Headers */,
 				50CB3B691FDE911400AA153B /* RNNSideMenuOptions.h in Headers */,
 				263905BD1E4C6F440023D7D3 /* RCCDrawerProtocol.h in Headers */,
+				5016E8EF20209690009D4F7C /* RNNCustomTitleView.h in Headers */,
 				263905C21E4C6F440023D7D3 /* SidebarAnimation.h in Headers */,
 				E8E518361F83B94A000467AC /* RNNViewLocation.h in Headers */,
 				263905B51E4C6F440023D7D3 /* MMExampleDrawerVisualStateManager.h in Headers */,
 				E8A5CD531F464F0400E89D0D /* RNNAnimator.m in Sources */,
 				50CB3B6A1FDE911400AA153B /* RNNSideMenuOptions.m in Sources */,
 				261F0E6B1E6F028A00989DE2 /* RNNNavigationStackManager.m in Sources */,
+				5016E8F020209690009D4F7C /* RNNCustomTitleView.m in Sources */,
 				E8DA24411F97459B00CD552B /* RNNElementFinder.m in Sources */,
 				263905BF1E4C6F440023D7D3 /* RCCTheSideBarManagerViewController.m in Sources */,
 				7B1126A01E2D263F00F9B03B /* RNNEventEmitter.m in Sources */,

lib/src/commands/LayoutTreeCrawler.ts

 import { OptionsProcessor } from './OptionsProcessor';
 import { LayoutType, isLayoutType } from './LayoutType';
 
+export interface Data {
+  name?: string;
+  options?: any;
+  passProps?: any;
+}
 export interface LayoutNode {
   id?: string;
   type: LayoutType;
-  data: object;
+  data: Data;
   children: LayoutNode[];
 }
 
     if (node.type === LayoutType.Component) {
       this._handleComponent(node);
     }
+    OptionsProcessor.processOptions(node.data.options);
     _.forEach(node.children, this.crawl);
   }
 
     this._assertComponentDataName(node);
     this._savePropsToStore(node);
     this._applyStaticOptions(node);
-    OptionsProcessor.processOptions(node.data.options);
   }
 
   _savePropsToStore(node) {

package.json

     "test-unit-ios": "node ./scripts/test.unit.ios.js",
     "pretest-e2e-android": "npm run build",
     "test-e2e-android": "node ./scripts/test.e2e.android.js",
+    "test-e2e-android-detox": "node ./scripts/test.e2e.android.detox.js",
     "pretest-e2e-ios": "npm run build",
     "test-e2e-ios": "node ./scripts/test.e2e.ios.js",
     "test-all": "node ./scripts/test.all.js",
         "build": "RCT_NO_LAUNCH_PACKAGER=true xcodebuild build -scheme playground_release -project playground/ios/playground.xcodeproj -sdk iphonesimulator -configuration Release -derivedDataPath playground/ios/DerivedData/playground ONLY_ACTIVE_ARCH=YES -quiet",
         "type": "ios.simulator",
         "name": "iPhone SE"
+      },
+      "android.emu.debug": {
+        "binaryPath": "playground/android/app/build/outputs/apk/debug/app-debug.apk",
+        "build": "cd playground/android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ../..",
+        "type": "android.emulator",
+        "name": "Nexus_5X_API_26"
+      },
+      "android.emu.release": {
+        "binaryPath": "playground/android/app/build/outputs/apk/release/app-release.apk",
+        "build": "cd playground/android && ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release && cd ../..",
+        "type": "android.emulator",
+        "name": "Nexus_5X_API_26"
       }
     }
   }

playground/android/app/build.gradle

         ndk {
             abiFilters "armeabi-v7a", "x86"
         }
+
+        testBuildType System.getProperty('testBuildType', 'debug')  //this will later be used to control the test apk build type
+        missingDimensionStrategy "minReactNative", "minReactNative46" //read note
+        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
     }
     signingConfigs {
         release {
     implementation 'com.android.support:design:25.4.0'
     implementation "com.android.support:appcompat-v7:25.4.0"
     implementation project(':react-native-navigation')
+
+    androidTestImplementation(project(path: ":detox"))
+    androidTestImplementation 'junit:junit:4.12'
+    androidTestImplementation 'com.android.support.test:runner:1.0.1'
+    androidTestImplementation 'com.android.support.test:rules:1.0.1'
 }

playground/android/app/src/androidTest/java/com/reactnativenavigation/playground/DetoxTest.java

+package com.reactnativenavigation.playground;
+
+import android.support.test.filters.LargeTest;
+import android.support.test.rule.ActivityTestRule;
+import android.support.test.runner.AndroidJUnit4;
+
+import com.wix.detox.Detox;
+
+import org.junit.Rule;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+@RunWith(AndroidJUnit4.class)
+@LargeTest
+public class DetoxTest {
+
+    @Rule
+    public ActivityTestRule<MainActivity> mActivityRule = new ActivityTestRule<>(MainActivity.class, false, false);
+
+    @Test
+    public void runDetoxTests() throws InterruptedException {
+        Detox.runTests(mActivityRule);
+    }
+}

playground/android/settings.gradle

 include ':app'
 include ':react-native-navigation'
 project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../../lib/android/app/')
+
+include ':detox'
+project(':detox').projectDir = new File(rootProject.projectDir, '../../node_modules/detox/android/detox')

playground/src/screens/CustomTopBar.js

+const React = require('react');
+const { Component } = require('react');
+const {
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  Text,
+  Alert,
+  Platform
+} = require('react-native');
+
+class CustomTopBar extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity stye={styles.button} onPress={() => Alert.alert(this.props.title, 'Thanks for that :)')}>
+          <Text style={styles.text}>Press Me</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+module.exports = CustomTopBar;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'white'
+  },
+  button: {
+    alignSelf: 'center',
+    backgroundColor: 'green'
+  },
+  text: {
+    alignSelf: 'center',
+    color: Platform.OS === 'ios' ? 'black' : 'white'
+  }
+});

playground/src/screens/LifecycleScreen.js

         <Text style={styles.h1}>{`Lifecycle Screen`}</Text>
         <Text style={styles.h1}>{this.state.text}</Text>
         <Button title='Push to test didDisappear' testID={testIDs.PUSH_TO_TEST_DID_DISAPPEAR_BUTTON} onPress={this.onClickPush} />
+        <Button title='Pop' testID={testIDs.POP_BUTTON} onPress={() => this.onClickPop()} />
         <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
       </View>
     );
   onClickPush() {
     Navigation.push(this.props.componentId, { component: { name: 'navigation.playground.TextScreen' } });
   }
+
+  onClickPop() {
+    Navigation.pop(this.props.componentId);
+  }
 }
 module.exports = LifecycleScreen;
 

playground/src/screens/OptionsScreen.js

         <Button title='Top Bar Transparent' onPress={this.onClickTopBarTransparent} />
         <Button title='Top Bar Opaque' onPress={this.onClickTopBarOpaque} />
         <Button title='scrollView Screen' testID={testIDs.SCROLLVIEW_SCREEN_BUTTON} onPress={this.onClickScrollViewScreen} />
-        <Button title='Custom Transition' onPress={this.onClickCustomTranstition} />
+        <Button title='Custom Transition' testID={testIDs.CUSTOM_TRANSITION_BUTTON} onPress={this.onClickCustomTranstition} />
         <Button title='Show custom alert' testID={testIDs.SHOW_CUSTOM_ALERT_BUTTON} onPress={this.onClickAlert} />
         <Button title='Show snackbar' testID={testIDs.SHOW_SNACKBAR_BUTTON} onPress={this.onClickSnackbar} />
         <Button title='Show overlay' testID={testIDs.SHOW_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(true)} />

playground/src/screens/OrientationDetectScreen.js

         <Text style={styles.h1}>{`Orientation Screen`}</Text>
         <Button title='Dismiss' testID={testIDs.DISMISS_BUTTON} onPress={() => Navigation.dismissModal(this.props.componentId)} />
         <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
-        <Text style={styles.footer} testID='currentOrientation'>{this.state.horizontal ? 'Landscape' : 'Portrait'}</Text>
+        {this.state.horizontal ?
+        <Text style={styles.footer} testID={testIDs.LANDSCAPE_ELEMENT}>Landscape</Text> :
+        <Text style={styles.footer} testID={testIDs.PORTRAIT_ELEMENT}>Portrait</Text>}
       </View>
     );
   }

playground/src/screens/OrientationSelectScreen.js

 const React = require('react');
 const { Component } = require('react');
+
 const { View, Text, Button } = require('react-native');
 
 const { Navigation } = require('react-native-navigation');
 const testIDs = require('../testIDs');
 
 class OrientationSelectScreen extends Component {
-
   render() {
     return (
       <View style={styles.root}>
   root: {
     flexGrow: 1,
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    backgroundColor: '#f5fcff'
   },
   h1: {
     fontSize: 24,
     textAlign: 'center',
-    margin: 30
-  },
-  footer: {
-    fontSize: 10,
-    color: '#888',
-    marginTop: 10
+    margin: 10
   }
 };

playground/src/screens/StaticLifecycleOverlay.js

 const React = require('react');
 const { Component } = require('react');
 const { View, Text } = require('react-native');
-const Navigation = require('react-native-navigation');
+const { Navigation } = require('react-native-navigation');
 
 class StaticLifecycleOverlay extends Component {
   constructor(props) {

playground/src/screens/TextScreen.js

   constructor(props) {
     super(props);
     globalFirstComponentID = (props.text === 'This is tab 1') ? props.componentId : globalFirstComponentID;
+    this.onClickPop = this.onClickPop.bind(this);
   }
 
   render() {
         <Button title='Show Tab Bar' testID={testIDs.SHOW_BOTTOM_TABS_BUTTON} onPress={() => this.hideTabBar(false)} />
         <Button title='Show Left Side Menu' testID={testIDs.SHOW_LEFT_SIDE_MENU_BUTTON} onPress={() => this.showSideMenu('left')} />
         <Button title='Show Right Side Menu' testID={testIDs.SHOW_RIGHT_SIDE_MENU_BUTTON} onPress={() => this.showSideMenu('right')} />
+        <Button title='Pop' testID={testIDs.POP_BUTTON} onPress={this.onClickPop} />
       </View>
     );
   }
 
+  async onClickPop() {
+    await Navigation.pop(this.props.componentId);
+  }
+
   renderTextFromFunctionInProps() {
     if (!this.props.myFunction) {
       return undefined;
       }
     });
   }
+
+  onClickPop() {
+    Navigation.pop(this.props.componentId);
+  }
 }
 
 module.exports = TextScreen;

playground/src/screens/WelcomeScreen.js

                     passProps: {
                       text: 'This is tab 1',
                       myFunction: () => 'Hello from a function!'
-                    },
-                    options: {
-                      bottomTab: {
-                        title: 'Tab 1',
-                        testID: testIDs.FIRST_TAB_BAR_BUTTON
-                      },
-                      bottomTabs: {
-                        textColor: '#12766b',
-                        selectedTextColor: 'red',
-                        fontFamily: 'HelveticaNeue-Italic',
-                        fontSize: 13
-                      }
                     }
                   }
                 }
-              ]
+              ],
+              options: {
+                bottomTab: {
+                  title: 'Tab 1',
+                  icon: require('../images/one.png'),
+                  testID: testIDs.FIRST_TAB_BAR_BUTTON
+                }
+              }
             }
           },
           {
                     name: 'navigation.playground.TextScreen',
                     passProps: {
                       text: 'This is tab 2'
-                    },
-                    options: {
-                      bottomTab: {
-                        title: 'Tab 2',
-                        testID: testIDs.SECOND_TAB_BAR_BUTTON
-                      }
                     }
                   }
                 }
-              ]
+              ],
+              options: {
+                bottomTab: {
+                  title: 'Tab 2',
+                  icon: require('../images/two.png'),
+                  testID: testIDs.SECOND_TAB_BAR_BUTTON
+                }
+              }
             }
           }
-        ]
+        ],
+        options: {
+          bottomTabs: {
+            tabColor: 'red',
+            selectedTabColor: 'blue',
+            fontFamily: 'HelveticaNeue-Italic',
+            fontSize: 13,
+            testID: testIDs.BOTTOM_TABS_ELEMENT
+          }
+        }
       }
     });
   }
                         }
                       }
                     }
-                  ]
+                  ],
+                  options: {
+                    bottomTab: {
+                      title: 'Tab 1',
+                      icon: require('../images/one.png'),
+                      testID: testIDs.FIRST_TAB_BAR_BUTTON
+                    }
+                  }
                 }
               },
               {
                         }
                       }
                     }
-                  ]
+                  ],
+                  options: {
+                    bottomTab: {
+                      title: 'Tab 2',
+                      icon: require('../images/two.png'),
+                      testID: testIDs.SECOND_TAB_BAR_BUTTON
+                    }
+                  }
                 }
               },
               {
                         }
                       }
                     }
-                  ]
+                  ],
+                  options: {
+                    bottomTab: {
+                      title: 'Tab 3',
+                      icon: require('../images/three.png'),
+                      testID: testIDs.SECOND_TAB_BAR_BUTTON
+                    }
+                  }
                 }
               }
-            ]
+            ],
+            options: {
+              bottomTabs: {
+                tabColor: 'red',
+                selectedTabColor: 'blue',
+                fontFamily: 'HelveticaNeue-Italic',
+                fontSize: 13
+              }
+            }
           }
         },
         right: {

playground/src/screens/index.js

 const SideMenuScreen = require('./SideMenuScreen');
 const TopTabScreen = require('./TopTabScreen');
 const TopTabOptionsScreen = require('./TopTabOptionsScreen');
+const CustomTopBar = require('./CustomTopBar');
 
 function registerScreens() {
   Navigation.registerComponent(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
   Navigation.registerComponent('navigation.playground.SideMenuScreen', () => SideMenuScreen);
   Navigation.registerComponent('navigation.playground.TopTabScreen', () => TopTabScreen);
   Navigation.registerComponent('navigation.playground.TopTabOptionsScreen', () => TopTabOptionsScreen);
+  Navigation.registerComponent('navigation.playground.CustomTopBar', () => CustomTopBar);
 }
 
 module.exports = {

playground/src/testIDs.js

   SHOW_TOUCH_THROUGH_OVERLAY_BUTTON: `SHOW_TOUCH_THROUGH_OVERLAY_BUTTON`,
   OK_BUTTON: `OK_BUTTON`,
   MODAL_WITH_STACK_BUTTON: `MODAL_WITH_STACK_BUTTON`,
+  CUSTOM_TRANSITION_BUTTON: `CUSTOM_TRANSITION_BUTTON`,
 
   // Elements
   SCROLLVIEW_ELEMENT: `SCROLLVIEW_ELEMENT`,
   BOTTOM_TABS_ELEMENT: `BOTTOM_TABS_ELEMENT`,
   TOP_BAR_ELEMENT: `TOP_BAR_ELEMENT`,
+  LANDSCAPE_ELEMENT: `LANDSCAPE_ELEMENT`,
+  PORTRAIT_ELEMENT: `PORTRAIT_ELEMENT`,
 
   // Headers
   WELCOME_SCREEN_HEADER: `WELCOME_SCREEN_HEADER`,

scripts/test.e2e.android.detox.js

+const _ = require('lodash');
+const exec = require('shell-utils').exec;
+
+const release = _.includes(process.argv, '--release');
+
+run();
+
+function run() {
+  const conf = release ? `release` : `debug`;
+  exec.execSync(`detox build --configuration android.emu.${conf}`);
+  exec.execSync(`detox test --configuration android.emu.${conf} ${process.env.CI ? '--cleanup' : ''}`);
+}