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

Jenkinsfile

@@ -36,4 +36,5 @@ npm run test-e2e-android -- --release'''
       }
     }
   }
-}
+}
+

docs/_sidebar.md

@@ -6,7 +6,7 @@
  - [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

@@ -1,11 +1,11 @@
-<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

@@ -3,32 +3,32 @@
 # 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')` |
 
 
 * * *
@@ -41,7 +41,7 @@ Reset the navigation stack to a new screen (the stack root is changed).
 
 | 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> |
 
 
 * * *
@@ -54,20 +54,20 @@ Set default options to all screens. Useful for declaring a consistent style acro
 
 | 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> |  |
 
 
@@ -81,20 +81,20 @@ Show a screen as a modal.
 
 | 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. |
 
 
 * * *
@@ -109,27 +109,27 @@ Dismiss all Modals
 
 <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> |  |
 
 
@@ -137,26 +137,26 @@ Pop a container from the stack, regardless of it's position.
 
 <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> |
 
 
 * * *
@@ -165,4 +165,3 @@ Pop the container's stack to root.
 
 ## navigation.events()
 Obtain the events registery instance
-

docs/docs/Root.md

@@ -4,7 +4,7 @@
 
 | 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

@@ -4,6 +4,6 @@
 
 | 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

@@ -4,7 +4,7 @@
 
 ### Navigation
 ```js
-import Navigation from 'react-native-navigation';
+import { Navigation } from 'react-native-navigation';
 ```
 ### Events - On App Launched
 How to initiate your app.
@@ -83,24 +83,57 @@ Navigation.setRoot({
   },
 });
 ```
+
+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);
 ```
@@ -108,14 +141,14 @@ 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'
@@ -123,11 +156,11 @@ Navigation.showModal({
   }
 });
 ```
-### 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

@@ -17,9 +17,9 @@ These issues originate from the same problem: you cannot specify on which screen
 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>
@@ -179,18 +179,18 @@ How to initiate your app.
 ```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})
@@ -198,12 +198,12 @@ Start a Single page app with two side menus:
 
 ```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'
@@ -211,7 +211,7 @@ Navigation.setRoot({
           }
         },
         right: {
-          container: {
+          component: {
             name: 'navigation.playground.TextScreen',
             passProps: {
               text: 'This is a right side menu screen'
@@ -227,7 +227,7 @@ Start a tab based app:
 Navigation.setRoot({
       tabs: [
         {
-          container: {
+          component: {
             name: 'navigation.playground.TextScreen',
             passProps: {
               text: 'This is tab 1',
@@ -236,7 +236,7 @@ Navigation.setRoot({
           }
         },
         {
-          container: {
+          component: {
             name: 'navigation.playground.TextScreen',
             passProps: {
               text: 'This is tab 2'
@@ -252,34 +252,34 @@ Navigation.setRoot({
 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'
@@ -287,11 +287,11 @@ Navigation.showModal({
       }
     });
 ```
-#### 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

@@ -1,7 +1,8 @@
 
 const Utils = require('./Utils');
+const testIDs = require('../playground/src/testIDs');
 
-const elementByLabel = Utils.elementByLabel;
+const elementById = Utils.elementById;
 
 describe('custom transition', () => {
   beforeEach(async () => {
@@ -9,8 +10,8 @@ describe('custom transition', () => {
   });
 
   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

@@ -9,41 +9,36 @@ describe('orientation', () => {
     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();
   });
 
@@ -51,9 +46,9 @@ describe('orientation', () => {
     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

@@ -90,7 +90,7 @@ describe('screen stack', () => {
     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

@@ -10,14 +10,14 @@ describe('screen style', () => {
 
   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 () => {
@@ -46,14 +46,6 @@ describe('screen style', () => {
     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

@@ -35,9 +35,9 @@ describe('top level api', () => {
   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

@@ -59,7 +59,8 @@ dependencies {
     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

@@ -0,0 +1,48 @@
+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

@@ -11,20 +11,24 @@ public class BottomTabsOptions implements DEFAULT_VALUES {
 		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()) {
@@ -33,16 +37,19 @@ public class BottomTabsOptions implements DEFAULT_VALUES {
 		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()) {
@@ -51,14 +58,17 @@ public class BottomTabsOptions implements DEFAULT_VALUES {
         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

@@ -19,7 +19,8 @@ public class Button {
 	@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();
@@ -31,6 +32,7 @@ public class 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

@@ -3,6 +3,7 @@ package com.reactnativenavigation.parse;
 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;
@@ -55,7 +56,8 @@ public class LayoutFactory {
 	}
 
     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) {
@@ -100,7 +102,8 @@ public class LayoutFactory {
 	}
 
 	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());
@@ -112,10 +115,11 @@ public class LayoutFactory {
 	}
 
 	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

@@ -35,7 +35,8 @@ public class Options implements DEFAULT_VALUES {
 		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);
@@ -44,6 +45,7 @@ public class Options implements DEFAULT_VALUES {
     @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();
 
@@ -54,12 +56,14 @@ public class Options implements DEFAULT_VALUES {
 	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

@@ -27,11 +27,13 @@ public class TopBarOptions implements DEFAULT_VALUES {
         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

@@ -14,7 +14,7 @@ public class TopTabsOptions implements DEFAULT_VALUES {
     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

@@ -0,0 +1,25 @@
+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

@@ -34,6 +34,7 @@ public class OptionsPresenter {
         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

@@ -0,0 +1,15 @@
+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

@@ -9,7 +9,7 @@ public class CompatUtils {
 	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

@@ -17,7 +17,7 @@ import java.io.IOException;
 import java.io.InputStream;
 import java.net.URL;
 
-public class ImageUtils {
+public class ImageLoader {
 
 	public interface ImageLoadingListener {
 		void onComplete(@NonNull Drawable drawable);
@@ -25,7 +25,7 @@ public class ImageUtils {
 		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();
             
@@ -40,7 +40,7 @@ public class ImageUtils {
         }
     }
 
-    private static StrictMode.ThreadPolicy adjustThreadPolicyDebug() {
+    private StrictMode.ThreadPolicy adjustThreadPolicyDebug() {
         StrictMode.ThreadPolicy threadPolicy = null;
         if (NavigationApplication.instance.isDebug()) {
             threadPolicy = StrictMode.getThreadPolicy();
@@ -49,7 +49,7 @@ public class ImageUtils {
         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

@@ -4,6 +4,9 @@ import android.support.annotation.Nullable;
 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) {
@@ -22,4 +25,15 @@ public class ViewUtils {
         }
         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

@@ -2,18 +2,24 @@ package com.reactnativenavigation.viewcontrollers;
 
 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;
@@ -25,47 +31,46 @@ import static android.widget.RelativeLayout.ABOVE;
 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!");
@@ -73,22 +78,41 @@ public class BottomTabsController extends ParentController
 		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
@@ -99,6 +123,7 @@ public class BottomTabsController extends ParentController
 
 	@Override
 	public void mergeOptions(Options options) {
+        this.options.mergeWith(options);
         if (options.bottomTabsOptions.currentTabIndex != NO_INT_VALUE) {
             selectTabAtIndex(options.bottomTabsOptions.currentTabIndex);
         }
@@ -117,7 +142,18 @@ public class BottomTabsController extends ParentController
         }
     }
 
-	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;
@@ -128,4 +164,14 @@ public class BottomTabsController extends ParentController
 		}
 		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

@@ -18,11 +18,10 @@ public class ComponentViewController extends ViewController<ComponentLayout> imp
                                    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

@@ -1,27 +1,26 @@
 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());
@@ -52,7 +51,7 @@ public class ModalStack {
 	}
 
 	@Nullable
-	private Modal findModalByComponentId(String componentId) {
+	public Modal findModalByComponentId(String componentId) {
 		for (Modal modal : modals) {
 			if (modal.containsDeepComponentId(componentId)) {
 				return modal;
@@ -64,49 +63,6 @@ public class ModalStack {
 	@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

@@ -12,6 +12,7 @@ import com.reactnativenavigation.presentation.NavigationOptionsListener;
 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;
@@ -19,47 +20,47 @@ 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;
@@ -69,78 +70,78 @@ public class Navigator extends ParentController {
         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

@@ -13,8 +13,8 @@ import java.util.Collection;
 
 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
@@ -44,6 +44,17 @@ public abstract class ParentController<T extends ViewGroup> extends ViewControll
 		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

@@ -7,6 +7,8 @@ import android.view.Gravity;
 import android.view.View;
 import android.view.ViewGroup;
 
+import com.reactnativenavigation.parse.Options;
+
 import java.util.ArrayList;
 import java.util.Collection;
 
@@ -19,8 +21,8 @@ public class SideMenuController extends ParentController {
 	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

@@ -24,8 +24,8 @@ public class StackController extends ParentController <StackLayout> {
     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);
     }
 
@@ -37,6 +37,7 @@ public class StackController extends ParentController <StackLayout> {
     @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

@@ -39,9 +39,10 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
     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();
@@ -125,11 +126,15 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
         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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -21,12 +21,10 @@ public class TopTabsController extends ParentController<TopTabsViewPager> implem
 
     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

@@ -0,0 +1,32 @@
+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

@@ -4,6 +4,7 @@ import android.content.Context;
 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;
@@ -12,14 +13,19 @@ import android.util.Log;
 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 {
@@ -49,22 +55,25 @@ public class TitleBarButton implements MenuItem.OnMenuItemClickListener {
 			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) {
@@ -73,8 +82,18 @@ public class TitleBarButton implements MenuItem.OnMenuItemClickListener {
 		});
 	}
 
-	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;
@@ -104,7 +123,7 @@ public class TitleBarButton implements MenuItem.OnMenuItemClickListener {
 
 	private void setTextColor() {
 		UiUtils.runOnPreDrawOnce(this.toolbar, () -> {
-            ArrayList<View> outViews = findActualTextViewInMenuByLabel();
+            ArrayList<View> outViews = findActualTextViewInMenuByText();
             setTextColorForFoundButtonViews(outViews);
         });
 	}
@@ -125,13 +144,6 @@ public class TitleBarButton implements MenuItem.OnMenuItemClickListener {
 		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);
@@ -139,6 +151,28 @@ public class TitleBarButton implements MenuItem.OnMenuItemClickListener {
 	}
 
 	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

@@ -51,6 +51,10 @@ public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAw
         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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -15,9 +15,8 @@ import com.reactnativenavigation.views.TopBar;
 
 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

@@ -27,7 +27,7 @@ public class NavigationOptionsTest extends BaseTest {
     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;
@@ -47,7 +47,7 @@ public class NavigationOptionsTest extends BaseTest {
     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);
     }
@@ -62,20 +62,18 @@ public class NavigationOptionsTest extends BaseTest {
         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
@@ -99,7 +97,7 @@ public class NavigationOptionsTest extends BaseTest {
                 .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
@@ -107,7 +105,7 @@ public class NavigationOptionsTest extends BaseTest {
         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);
     }
@@ -116,7 +114,7 @@ public class NavigationOptionsTest extends BaseTest {
     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();
 
@@ -133,7 +131,7 @@ public class NavigationOptionsTest extends BaseTest {
 
         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

@@ -0,0 +1,13 @@
+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

@@ -1,21 +1,29 @@
 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 {
 
@@ -26,38 +34,49 @@ 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
@@ -68,14 +87,14 @@ public class BottomTabsControllerTest extends BaseTest {
         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

@@ -25,7 +25,7 @@ public class ComponentViewControllerTest extends BaseTest {
         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

@@ -0,0 +1,57 @@
+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

@@ -1,45 +1,56 @@
 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
@@ -94,7 +105,7 @@ public class NavigatorTest extends BaseTest {
         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);
@@ -223,12 +234,12 @@ public class NavigatorTest extends BaseTest {
 
     @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
@@ -301,4 +312,27 @@ public class NavigatorTest extends BaseTest {
         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

@@ -44,7 +44,7 @@ public class OptionsApplyingTest extends BaseTest {
                 (activity1, componentId, componentName) -> view,
                 initialNavigationOptions
         );
-        stackController = new StackController(activity, "stack");
+        stackController = new StackController(activity, "stack", new Options());
         stackController.ensureViewIsCreated();
         uut.setParentController(stackController);
     }
@@ -62,7 +62,7 @@ public class OptionsApplyingTest extends BaseTest {
     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

@@ -7,6 +7,7 @@ import android.widget.*;
 
 import com.reactnativenavigation.*;
 import com.reactnativenavigation.mocks.*;
+import com.reactnativenavigation.parse.Options;
 
 import org.junit.*;
 
@@ -26,7 +27,7 @@ public class ParentControllerTest extends BaseTest {
         super.beforeEach();
         activity = newActivity();
         children = new ArrayList<>();
-        uut = new ParentController(activity, "uut") {
+        uut = new ParentController(activity, "uut", new Options()) {
 
             @NonNull
             @Override
@@ -54,8 +55,8 @@ public class ParentControllerTest extends BaseTest {
 
     @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);
 
@@ -65,9 +66,9 @@ public class ParentControllerTest extends BaseTest {
 
     @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);
@@ -77,7 +78,7 @@ public class ParentControllerTest extends BaseTest {
 
     @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();
@@ -87,8 +88,8 @@ public class ParentControllerTest extends BaseTest {
 
     @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

@@ -1,18 +1,22 @@
 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 {
 
@@ -26,10 +30,10 @@ 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
@@ -84,7 +88,7 @@ public class StackControllerTest extends BaseTest {
         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);
     }
@@ -264,7 +268,7 @@ public class StackControllerTest extends BaseTest {
 
     @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);
@@ -325,6 +329,15 @@ public class StackControllerTest extends BaseTest {
         });
     }
 
+    @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

@@ -1,25 +0,0 @@
-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

@@ -50,7 +50,7 @@ public class TopTabsViewControllerTest extends BaseTest {
         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

@@ -9,6 +9,7 @@ import android.widget.LinearLayout;
 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;
@@ -31,7 +32,7 @@ public class ViewControllerTest extends BaseTest {
     public void beforeEach() {
         super.beforeEach();
         activity = newActivity();
-        uut = new SimpleViewController(activity, "uut");
+        uut = new SimpleViewController(activity, "uut", new Options());
     }
 
     @Test
@@ -47,7 +48,7 @@ public class ViewControllerTest extends BaseTest {
     @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;
@@ -59,7 +60,7 @@ public class ViewControllerTest extends BaseTest {
     @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);
     }
@@ -143,7 +144,7 @@ public class ViewControllerTest extends BaseTest {
 
     @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

@@ -13,6 +13,8 @@
 @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

@@ -97,18 +97,20 @@
 
 - (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) {
@@ -119,6 +121,7 @@
 		[controllers addObject:childVc];
 	}
 	[vc setViewControllers:controllers];
+	[vc setOptions:options];
 	
 	return vc;
 }

lib/ios/RNNCustomTitleView.h

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

lib/ios/RNNCustomTitleView.m

@@ -0,0 +1,47 @@
+#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

@@ -54,6 +54,7 @@
 -(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];
@@ -66,7 +67,10 @@
 	}
 	
 	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

@@ -16,6 +16,10 @@
 	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

@@ -15,6 +15,7 @@
 @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

@@ -2,11 +2,11 @@
 #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
@@ -22,6 +22,7 @@
 	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
@@ -37,6 +38,8 @@
 -(void)viewWillAppear:(BOOL)animated{
 	[super viewWillAppear:animated];
 	[self.options applyOn:self];
+	[self setCustomNavigationTitleView];
+	[self setCustomNavigationBarView];
 }
 
 -(void)viewDidAppear:(BOOL)animated {
@@ -57,6 +60,24 @@
 	[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

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

lib/ios/RNNTabBarController.m

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

lib/ios/RNNTopBarOptions.h

@@ -21,4 +21,7 @@
 @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

@@ -1,5 +1,6 @@
 #import "RNNTopBarOptions.h"
 #import "RNNNavigationButtons.h"
+#import "RNNCustomTitleView.h"
 
 extern const NSInteger BLUR_TOPBAR_TAG;
 

lib/ios/RNNUIBarButtonItem.h

@@ -1,11 +1,14 @@
 #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

@@ -16,4 +16,20 @@
 	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

@@ -61,6 +61,8 @@
 		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 */; };
@@ -238,6 +240,8 @@
 		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>"; };
@@ -657,6 +661,8 @@
 		E8AEDB471F584175000F5A6A /* Components */ = {
 			isa = PBXGroup;
 			children = (
+				5016E8ED2020968F009D4F7C /* RNNCustomTitleView.h */,
+				5016E8EE2020968F009D4F7C /* RNNCustomTitleView.m */,
 				E8A5CD601F49114F00E89D0D /* RNNElement.h */,
 				E8A5CD611F49114F00E89D0D /* RNNElement.m */,
 				E8AEDB3A1F55A1C2000F5A6A /* RNNElementView.h */,
@@ -694,6 +700,7 @@
 				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 */,
@@ -856,6 +863,7 @@
 				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

@@ -2,10 +2,15 @@ import * as _ from 'lodash';
 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[];
 }
 
@@ -24,6 +29,7 @@ export class LayoutTreeCrawler {
     if (node.type === LayoutType.Component) {
       this._handleComponent(node);
     }
+    OptionsProcessor.processOptions(node.data.options);
     _.forEach(node.children, this.crawl);
   }
 
@@ -31,7 +37,6 @@ export class LayoutTreeCrawler {
     this._assertComponentDataName(node);
     this._savePropsToStore(node);
     this._applyStaticOptions(node);
-    OptionsProcessor.processOptions(node.data.options);
   }
 
   _savePropsToStore(node) {

package.json

@@ -38,6 +38,7 @@
     "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",
@@ -123,6 +124,18 @@
         "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

@@ -25,6 +25,10 @@ android {
         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 {
@@ -47,4 +51,9 @@ dependencies {
     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

@@ -0,0 +1,24 @@
+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

@@ -3,3 +3,6 @@ rootProject.name = 'playground'
 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

@@ -0,0 +1,47 @@
+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

@@ -37,6 +37,7 @@ class LifecycleScreen extends Component {
         <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>
     );
@@ -45,6 +46,10 @@ class LifecycleScreen extends Component {
   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

@@ -63,7 +63,7 @@ class OptionsScreen extends Component {
         <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

@@ -23,7 +23,9 @@ class OrientationDetectScreen extends Component {
         <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

@@ -1,12 +1,12 @@
 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}>
@@ -37,16 +37,12 @@ const styles = {
   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

@@ -1,7 +1,7 @@
 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

@@ -20,6 +20,7 @@ class TextScreen extends Component {
   constructor(props) {
     super(props);
     globalFirstComponentID = (props.text === 'This is tab 1') ? props.componentId : globalFirstComponentID;
+    this.onClickPop = this.onClickPop.bind(this);
   }
 
   render() {
@@ -35,10 +36,15 @@ class TextScreen extends Component {
         <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;
@@ -91,6 +97,10 @@ class TextScreen extends Component {
       }
     });
   }
+
+  onClickPop() {
+    Navigation.pop(this.props.componentId);
+  }
 }
 
 module.exports = TextScreen;

playground/src/screens/WelcomeScreen.js

@@ -59,22 +59,17 @@ class WelcomeScreen extends Component {
                     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
+                }
+              }
             }
           },
           {
@@ -85,19 +80,29 @@ class WelcomeScreen extends Component {
                     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
+          }
+        }
       }
     });
   }
@@ -127,7 +132,14 @@ class WelcomeScreen extends Component {
                         }
                       }
                     }
-                  ]
+                  ],
+                  options: {
+                    bottomTab: {
+                      title: 'Tab 1',
+                      icon: require('../images/one.png'),
+                      testID: testIDs.FIRST_TAB_BAR_BUTTON
+                    }
+                  }
                 }
               },
               {
@@ -141,7 +153,14 @@ class WelcomeScreen extends Component {
                         }
                       }
                     }
-                  ]
+                  ],
+                  options: {
+                    bottomTab: {
+                      title: 'Tab 2',
+                      icon: require('../images/two.png'),
+                      testID: testIDs.SECOND_TAB_BAR_BUTTON
+                    }
+                  }
                 }
               },
               {
@@ -155,10 +174,25 @@ class WelcomeScreen extends Component {
                         }
                       }
                     }
-                  ]
+                  ],
+                  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

@@ -16,6 +16,7 @@ const BandHandlerScreen = require('./BackHandlerScreen');
 const SideMenuScreen = require('./SideMenuScreen');
 const TopTabScreen = require('./TopTabScreen');
 const TopTabOptionsScreen = require('./TopTabOptionsScreen');
+const CustomTopBar = require('./CustomTopBar');
 
 function registerScreens() {
   Navigation.registerComponent(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
@@ -35,6 +36,7 @@ function registerScreens() {
   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

@@ -51,11 +51,14 @@ module.exports = {
   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

@@ -0,0 +1,12 @@
+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' : ''}`);
+}