Cleanup and reorganise playground app (#4767)

* Cleanup and reorganise playground app

* Separated tests into three categories
  1. Layouts - layout specific tests and feature showcase
  2. Options - options related tests; interactions between static and dynamic options, merge options etc
  3. Navigation - general navigation features; Orientation handling, events, Overlay etc

* Fixed a few Android bugs
  1. testID wasn’t applied on TopBar react buttons
  2. static options were disregarded when creating initial BottomTab options
  3. Trying to open a none existent SideMenu would result in a crash

* Fix e2e tests

* Fix lint

* Few fixes + split push from SideMenu test into two tests

* Fixes e2e

e2e/ApplicationLifecycleTest.test.js

@@ -1,7 +1,6 @@
 const Utils = require('./Utils');
 const Android = require('./AndroidUtils');
-const testIDs = require('../playground/src/testIDs');
-const exec = require('shell-utils').exec;
+const TestIDs = require('../playground/src/testIDs');
 const _ = require('lodash');
 
 const { elementByLabel, elementById, sleep } = Utils;
@@ -13,15 +12,17 @@ describe('application lifecycle test', () => {
     await device.relaunchApp();
   });
 
-  test('push a screen to ensure its not there after reload', async () => {
-    await elementById(testIDs.PUSH_BUTTON).tap();
+  it('push a screen to ensure its not there after reload', async () => {
+    await elementById(TestIDs.STACK_BTN).tap();
+    await elementById(TestIDs.PUSH_BTN).tap();
     await expect(elementByLabel('Pushed Screen')).toBeVisible();
     await device.reloadReactNative();
-    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
+    await expect(elementById(TestIDs.NAVIGATION_TAB)).toBeVisible();
   });
 
-  test('relaunch from background', async () => {
-    await elementById(testIDs.PUSH_BUTTON).tap();
+  it('relaunch from background', async () => {
+    await elementById(TestIDs.STACK_BTN).tap();
+    await elementById(TestIDs.PUSH_BTN).tap();
     await expect(elementByLabel('Pushed Screen')).toBeVisible();
 
     await device.sendToHome();
@@ -30,8 +31,9 @@ describe('application lifecycle test', () => {
     await expect(elementByLabel('Pushed Screen')).toBeVisible();
   });
 
-  test(':android: relaunch after close with back button', async () => {
-    await elementById(testIDs.PUSH_BUTTON).tap();
+  it(':android: relaunch after close with back button', async () => {
+    await elementById(TestIDs.STACK_BTN).tap();
+    await elementById(TestIDs.PUSH_BTN).tap();
     await expect(elementByLabel('Pushed Screen')).toBeVisible();
 
     Android.pressBack();
@@ -40,8 +42,9 @@ describe('application lifecycle test', () => {
     await expect(elementByLabel('Pushed Screen')).toBeNotVisible();
   });
 
-  test('device orientation does not destroy activity', async () => {
-    await elementById(testIDs.PUSH_BUTTON).tap();
+  it('device orientation does not destroy activity', async () => {
+    await elementById(TestIDs.STACK_BTN).tap();
+    await elementById(TestIDs.PUSH_BTN).tap();
     await expect(elementByLabel('Pushed Screen')).toBeVisible();
 
     await device.setOrientation('landscape');
@@ -49,16 +52,32 @@ describe('application lifecycle test', () => {
     await expect(elementByLabel('Pushed Screen')).toBeVisible();
   });
 
-  test(':android: relaunch after activity killed by system', async () => {
-    await elementById(testIDs.PUSH_BUTTON).tap();
+  it(':android: relaunch after activity killed by system', async () => {
+    await elementById(TestIDs.STACK_BTN).tap();
+    await elementById(TestIDs.PUSH_BTN).tap();
     await expect(elementByLabel('Pushed Screen')).toBeVisible();
     await device.sendToHome();
 
     await togglePhonePermission();
+    await sleep(1000);
     await device.launchApp();
 
     await expect(elementByLabel('Pushed Screen')).toBeNotVisible();
-    await expect(elementByLabel('React Native Navigation!')).toBeVisible();
+    await expect(elementById(TestIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
+  });
+
+  it(':android: pressing r twice with delay does nothing', async () => {
+    if (!IS_RELEASE) {
+      await elementById(TestIDs.STACK_BTN).tap();
+      await elementById(TestIDs.PUSH_BTN).tap();
+      await expect(elementByLabel('Pushed Screen')).toBeVisible();
+
+      Android.pressKeyCode(KEY_CODE_R);
+      await sleep(1000);
+      Android.pressKeyCode(KEY_CODE_R);
+
+      await expect(elementByLabel('Pushed Screen')).toBeVisible();
+    }
   });
 
   xit(':android: pressing menu opens dev menu', async () => {
@@ -71,7 +90,7 @@ describe('application lifecycle test', () => {
 
   xit(':android: pressing r twice in succession reloads React Native', async () => {
     if (!IS_RELEASE) {
-      await elementById(testIDs.PUSH_BUTTON).tap();
+      await elementById(TestIDs.PUSH_BTN).tap();
       await expect(elementByLabel('Pushed Screen')).toBeVisible();
 
       Android.pressKeyCode(KEY_CODE_R);
@@ -82,22 +101,9 @@ describe('application lifecycle test', () => {
     }
   });
 
-  test(':android: pressing r twice with delay does nothing', async () => {
-    if (!IS_RELEASE) {
-      await elementById(testIDs.PUSH_BUTTON).tap();
-      await expect(elementByLabel('Pushed Screen')).toBeVisible();
-
-      Android.pressKeyCode(KEY_CODE_R);
-      await sleep(1000);
-      Android.pressKeyCode(KEY_CODE_R);
-
-      await expect(elementByLabel('Pushed Screen')).toBeVisible();
-    }
-  });
-
   xit(':android: sending reload broadcast reloads react native', async () => {
     if (!IS_RELEASE) {
-      await elementById(testIDs.PUSH_BUTTON).tap();
+      await elementById(TestIDs.PUSH_BTN).tap();
       await expect(elementByLabel('Pushed Screen')).toBeVisible();
 
       Android.executeShellCommand('am broadcast -a com.reactnativenavigation.broadcast.RELOAD');

e2e/BackHandler.test.js

@@ -1,55 +0,0 @@
-const Utils = require('./Utils');
-const testIDs = require('../playground/src/testIDs');
-const Android = require('./AndroidUtils');
-
-const { elementByLabel, elementById, sleep } = Utils;
-
-describe(':android: screen stack', () => {
-  beforeEach(async () => {
-    await device.relaunchApp();
-  });
-
-  test('override hardware back button', async () => {
-    await elementByLabel('BACK HANDLER').tap();
-    await expect(elementByLabel('Back Handler Screen')).toBeVisible();
-
-    await elementByLabel('ADD BACK HANDLER').tap();
-    Android.pressBack();
-    await sleep(100);
-    await expect(elementByLabel('Back Handler Screen')).toBeVisible();
-
-    await elementByLabel('REMOVE BACK HANDLER').tap();
-    Android.pressBack();
-    await sleep(100);
-    await expect(elementByLabel('React Native Navigation!')).toBeVisible();
-  });
-
-  test('override hardware back button in modal with stack', async () => {
-    await elementByLabel('BACK HANDLER').tap();
-    await expect(elementByLabel('Back Handler Screen')).toBeVisible();
-
-    await elementByLabel('SHOW MODAL WITH STACK').tap();
-    await elementByLabel('ADD BACK HANDLER').tap();
-
-    // Back is handled in Js
-    Android.pressBack();
-    await sleep(100);
-    await expect(elementByLabel('Back button pressed!')).toBeVisible();
-
-    // pop
-    await elementByLabel('REMOVE BACK HANDLER').tap();
-    Android.pressBack();
-    await sleep(100);
-    await expect(elementByLabel('Back Handler Screen')).toBeVisible();
-
-    // modal dismissed
-    Android.pressBack();
-    await sleep(100);
-    await expect(elementByLabel('Back Handler Screen')).toBeVisible();
-
-    // main
-    Android.pressBack();
-    await sleep(100);
-    await expect(elementByLabel('React Native Navigation!')).toBeVisible();
-  });
-});

e2e/BottomTabs.test.js

@@ -0,0 +1,70 @@
+const Utils = require('./Utils');
+const TestIDs = require('../playground/src/testIDs');
+const Android = require('./AndroidUtils');
+const { elementByLabel, elementById, sleep } = Utils;
+describe('BottomTabs', () => {
+  beforeEach(async () => {
+    await device.relaunchApp();
+    await elementById(TestIDs.BOTTOM_TABS_BTN).tap();
+    await expect(elementByLabel('First Tab')).toBeVisible();
+  });
+
+  it('switch to tab by index', async () => {
+    await elementById(TestIDs.SWITCH_TAB_BY_INDEX_BTN).tap();
+    await expect(elementByLabel('First Tab')).toBeNotVisible();
+    await expect(elementByLabel('Second Tab')).toBeVisible();
+  });
+
+  it('switch to tab by componentId', async () => {
+    await elementById(TestIDs.SWITCH_TAB_BY_COMPONENT_ID_BTN).tap();
+    await expect(elementByLabel('First Tab')).toBeNotVisible();
+    await expect(elementByLabel('Second Tab')).toBeVisible();
+  });
+
+  it('push bottom tabs', async () => {
+    await elementById(TestIDs.SWITCH_TAB_BY_INDEX_BTN).tap();
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await expect(elementById(TestIDs.PUSHED_BOTTOM_TABS)).toBeVisible();
+  });
+
+  it('set Tab Bar badge on current Tab', async () => {
+    await elementById(TestIDs.SET_BADGE_BTN).tap();
+    await expect(element(by.text('NEW'))).toBeVisible();
+  });
+
+  it(':ios: set Tab Bar badge null on a current Tab should reset badge', async () => {
+    await elementById(TestIDs.SET_BADGE_BTN).tap();
+    await expect(element(by.text('NEW'))).toBeVisible();
+    await elementById(TestIDs.CLEAR_BADGE_BTN).tap();
+    await expect(element(by.text('NEW'))).toBeNotVisible();
+  });
+
+  it('merge options correctly in SideMenu inside BottomTabs layout', async () => {
+    await elementById(TestIDs.SWITCH_TAB_BY_INDEX_BTN).tap();
+    await elementById(TestIDs.SIDE_MENU_INSIDE_BOTTOM_TABS_BTN).tap();
+    await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
+
+    await elementById(TestIDs.CLOSE_LEFT_SIDE_MENU_BTN).tap();
+    await expect(elementById(TestIDs.CLOSE_LEFT_SIDE_MENU_BTN)).toBeNotVisible();
+  });
+
+  it(':android: hide Tab Bar', async () => {
+    await expect(elementById(TestIDs.BOTTOM_TABS)).toBeVisible();
+    await elementById(TestIDs.HIDE_TABS_BTN).tap();
+    await expect(elementById(TestIDs.BOTTOM_TABS)).toBeNotVisible();
+  });
+
+  it(':android: show Tab Bar', async () => {
+    await elementById(TestIDs.HIDE_TABS_BTN).tap();
+    await expect(elementById(TestIDs.BOTTOM_TABS)).toBeNotVisible();
+    await elementById(TestIDs.SHOW_TABS_BTN).tap();
+    await expect(elementById(TestIDs.BOTTOM_TABS)).toBeVisible();
+  });
+
+  it('hide Tab Bar on push', async () => {
+    await elementById(TestIDs.HIDE_TABS_PUSH_BTN).tap();
+    await expect(elementById(TestIDs.BOTTOM_TABS)).toBeNotVisible();
+    await elementById(TestIDs.POP_BTN).tap();
+    await expect(elementById(TestIDs.BOTTOM_TABS)).toBeVisible();
+  });
+});

e2e/ComplexLayout.test.js

@@ -1,33 +0,0 @@
-const Utils = require('./Utils');
-const testIDs = require('../playground/src/testIDs');
-
-const { elementByLabel, elementById } = Utils;
-
-describe('complex layout', () => {
-  beforeEach(async () => {
-    await device.relaunchApp();
-  });
-
-  test('shows external component in stack in modal', async () => {
-    await elementById(testIDs.COMPLEX_LAYOUT_BUTTON).tap();
-    await elementById(testIDs.EXTERNAL_COMPONENT_IN_STACK).tap();
-    await expect(elementByLabel('External component in stack')).toBeVisible();
-  });
-
-  test('shows external component in deep stack in modal', async () => {
-    await elementById(testIDs.COMPLEX_LAYOUT_BUTTON).tap();
-    await elementById(testIDs.EXTERNAL_COMPONENT_IN_DEEP_STACK).tap();
-    await expect(elementByLabel('External component in deep stack')).toBeVisible();
-  });
-
-  test('merge options correctly in SideMenu inside BottomTabs layout', async () => {
-    await elementById(testIDs.COMPLEX_LAYOUT_BUTTON).tap();
-    await elementById(testIDs.SIDE_MENU_LAYOUT_INSIDE_BOTTOM_TAB).tap();
-    await elementById(testIDs.SECOND_TAB_BAR_BUTTON).tap();
-    await elementById(testIDs.OPEN_SIDE_MENU).tap();
-    await expect(elementByLabel('This is a left side menu screen')).toBeVisible();
-
-    await elementById(testIDs.HIDE_LEFT_SIDE_MENU_BUTTON).tap();
-    await expect(elementByLabel('This is a left side menu screen')).toBeNotVisible();
-  });
-});

e2e/Modals.test.js

@@ -1,141 +1,141 @@
 const Utils = require('./Utils');
-const testIDs = require('../playground/src/testIDs');
+const TestIDs = require('../playground/src/testIDs');
 const Android = require('./AndroidUtils');
 
-const { elementByLabel, elementById, tapDeviceBackAndroid } = Utils;
+const { elementByLabel, elementById, sleep } = Utils;
 
 describe('modal', () => {
   beforeEach(async () => {
     await device.relaunchApp();
+    await elementById(TestIDs.NAVIGATION_TAB).tap();
+    await elementById(TestIDs.MODAL_BTN).tap();
   });
 
-  test('show modal', async () => {
-    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
-    await expect(elementById(testIDs.MODAL_SCREEN)).toBeVisible();
+  it('show modal', async () => {
+    await expect(elementById(TestIDs.MODAL_SCREEN_HEADER)).toBeVisible();
   });
 
-  test('dismiss modal', async () => {
-    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
-    await expect(elementById(testIDs.MODAL_SCREEN)).toBeVisible();
-    await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
-    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
+  it('dismiss modal', async () => {
+    await expect(elementById(TestIDs.MODAL_SCREEN_HEADER)).toBeVisible();
+    await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+    await expect(elementById(TestIDs.NAVIGATION_TAB)).toBeVisible();
   });
 
-  test('unmount modal when dismissed', async () => {
-    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
-    await expect(elementById(testIDs.MODAL_SCREEN)).toBeVisible();
-    await elementById(testIDs.MODAL_LIFECYCLE_BUTTON).tap();
+  it('unmount modal when dismissed', async () => {
+    await expect(elementById(TestIDs.MODAL_SCREEN_HEADER)).toBeVisible();
+    await elementById(TestIDs.MODAL_LIFECYCLE_BTN).tap();
     await expect(elementByLabel('didAppear')).toBeVisible();
-    await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
+    await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
     await expect(elementByLabel('componentWillUnmount')).toBeVisible();
     await elementByLabel('OK').atIndex(0).tap();
     await expect(elementByLabel('didDisappear')).toBeVisible();
     await elementByLabel('OK').atIndex(0).tap();
   });
 
-  test('show multiple modals', async () => {
-    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
+  it('show multiple modals', async () => {
     await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
-    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
+    await elementById(TestIDs.MODAL_BTN).tap();
     await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
-    await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
+    await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
     await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
-    await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
-    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
+    await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+    await expect(elementById(TestIDs.NAVIGATION_TAB)).toBeVisible();
   });
 
-  test('dismiss unknown screen id', async () => {
-    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
+  it('dismiss unknown screen id', async () => {
     await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
-    await elementById(testIDs.DISMISS_UNKNOWN_MODAL_BUTTON).tap();
+    await elementById(TestIDs.DISMISS_UNKNOWN_MODAL_BTN).tap();
     await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
-    await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
-    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
+    await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+    await expect(elementById(TestIDs.NAVIGATION_TAB)).toBeVisible();
   });
 
-  test('dismiss modal by id which is not the top most', async () => {
-    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
+  it('dismiss modal by id which is not the top most', async () => {
     await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
-    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
+    await elementById(TestIDs.MODAL_BTN).tap();
     await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
-    await elementById(testIDs.DISMISS_PREVIOUS_MODAL_BUTTON).tap();
+    await elementById(TestIDs.DISMISS_PREVIOUS_MODAL_BTN).tap();
     await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
-    await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
-    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
+    await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+    await expect(elementById(TestIDs.NAVIGATION_TAB)).toBeVisible();
   });
 
-  test(
-    'dismiss all previous modals by id when they are below top presented modal',
-    async () => {
-      await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
-      await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
-      await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
-      await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
-      await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
-      await expect(elementByLabel('Modal Stack Position: 3')).toBeVisible();
-
-      await elementById(testIDs.DISMISS_ALL_PREVIOUS_MODAL_BUTTON).tap();
-      await expect(elementByLabel('Modal Stack Position: 3')).toBeVisible();
-
-      await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
-      await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
+  it('dismiss all previous modals by id when they are below top presented modal', async () => {
+    await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
+    await elementById(TestIDs.MODAL_BTN).tap();
+    await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
+    await elementById(TestIDs.MODAL_BTN).tap();
+    await expect(elementByLabel('Modal Stack Position: 3')).toBeVisible();
+
+    await elementById(TestIDs.DISMISS_ALL_PREVIOUS_MODAL_BTN).tap();
+    await expect(elementByLabel('Modal Stack Position: 3')).toBeVisible();
+
+    await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+    await expect(elementById(TestIDs.NAVIGATION_TAB)).toBeVisible();
     }
   );
 
-  test('dismiss some modal by id deep in the stack', async () => {
-    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
+  it('dismiss some modal by id deep in the stack', async () => {
     await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
-    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
+    await elementById(TestIDs.MODAL_BTN).tap();
     await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
-    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
+    await elementById(TestIDs.MODAL_BTN).tap();
     await expect(elementByLabel('Modal Stack Position: 3')).toBeVisible();
 
-    await elementById(testIDs.DISMISS_FIRST_MODAL_BUTTON).tap();
+    await elementById(TestIDs.DISMISS_FIRST_MODAL_BTN).tap();
     await expect(elementByLabel('Modal Stack Position: 3')).toBeVisible();
 
-    await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
+    await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
     await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
 
-    await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
-    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
+    await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+    await expect(elementById(TestIDs.NAVIGATION_TAB)).toBeVisible();
   });
 
-  test('dismissAllModals', async () => {
-    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
+  it('dismissAllModals', async () => {
     await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
-    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
+    await elementById(TestIDs.MODAL_BTN).tap();
     await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
-    await elementById(testIDs.DISMISS_ALL_MODALS_BUTTON).tap();
-    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
+    await elementById(TestIDs.DISMISS_ALL_MODALS_BTN).tap();
+    await expect(elementById(TestIDs.NAVIGATION_TAB)).toBeVisible();
   });
 
-  test('push into modal', async () => {
-    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
-    await elementById(testIDs.PUSH_BUTTON).tap();
+  it('push into modal', async () => {
+    await elementById(TestIDs.PUSH_BTN).tap();
     await expect(elementByLabel('Pushed Screen')).toBeVisible();
   });
 
-  test(':android: push into modal', async () => {
-    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
-    await elementById(testIDs.PUSH_BUTTON).tap();
-    await elementById(testIDs.PUSH_BUTTON).tap();
+  it(':android: push into modal and dismiss pushed screen with hardware back', async () => {
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await elementById(TestIDs.PUSH_BTN).tap();
     Android.pressBack();
     await expect(elementByLabel('Pushed Screen')).toBeVisible();
   });
 
-  test('present modal multiple times', async () => {
-    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
-    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
-    await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
-    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
-    await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
+  it('present modal multiple times', async () => {
+    await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+    await elementById(TestIDs.MODAL_BTN).tap();
     await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
   });
 
-  test('dismiss modal on non-modal component should not deatch component', async () => {
-    await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
-    await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
-    await elementById(testIDs.PUSH_BUTTON).tap();
-    await expect(elementById(testIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
+  it(':android: override hardware back button in modal with stack', async () => {
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await elementById(TestIDs.ADD_BACK_HANDLER).tap();
+
+    // Back is handled in Js
+    Android.pressBack();
+    await sleep(100);
+    await expect(elementById(TestIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
+
+    // pop
+    await elementById(TestIDs.REMOVE_BACK_HANDLER).tap();
+    Android.pressBack();
+    await sleep(100);
+    await expect(elementById(TestIDs.MODAL_SCREEN_HEADER)).toBeVisible();
+
+    // modal dismissed
+    Android.pressBack();
+    await sleep(100);
+    await expect(elementById(TestIDs.NAVIGATION_TAB)).toBeVisible();
   });
 });

e2e/Options.test.js

@@ -0,0 +1,94 @@
+const Utils = require('./Utils');
+const Android = require('./AndroidUtils');
+const TestIDs = require('../playground/src/testIDs');
+
+const { elementById, elementByLabel } = Utils;
+
+describe('Options', () => {
+  beforeEach(async () => {
+    await device.relaunchApp();
+    await elementById(TestIDs.OPTIONS_TAB).tap();
+  });
+
+  it('declare options on a component', async () => {
+    await expect(elementByLabel('Styling Options')).toBeVisible();
+  });
+
+  it('change title on component component', async () => {
+    await expect(elementByLabel('Styling Options')).toBeVisible();
+    await elementById(TestIDs.CHANGE_TITLE_BTN).tap();
+    await expect(elementByLabel('Title Changed')).toBeVisible();
+  });
+
+  it('hides TopBar when pressing on Hide TopBar and shows it when pressing on Show TopBar', async () => {
+    await elementById(TestIDs.HIDE_TOP_BAR_BTN).tap();
+    await expect(elementById(TestIDs.TOP_BAR)).toBeNotVisible();
+    await elementById(TestIDs.SHOW_TOP_BAR_BTN).tap();
+    await expect(elementById(TestIDs.TOP_BAR)).toBeVisible();
+  });
+
+  it('sets right buttons', async () => {
+    await expect(elementById(TestIDs.BUTTON_ONE)).toBeVisible();
+    await expect(elementById(TestIDs.ROUND_BUTTON)).toBeVisible();
+  });
+
+  it('set left buttons', async () => {
+    await expect(elementById(TestIDs.LEFT_BUTTON)).toBeVisible();
+  });
+
+  it('pass props to custom button component', async () => {
+    await expect(elementByLabel('Two')).toExist();
+  });
+
+  it('pass props to custom button component should exist after push pop', async () => {
+    await expect(elementByLabel('Two')).toExist();
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await elementById(TestIDs.POP_BTN).tap();
+    await expect(elementByLabel('Two')).toExist();
+  });
+
+  it('custom button is clickable', async () => {
+    await elementByLabel('Two').tap();
+    await expect(elementByLabel('Thanks for that :)')).toExist();
+  });
+
+  it('default options should apply to all screens in stack', async () => {
+    await elementById(TestIDs.HIDE_TOPBAR_DEFAULT_OPTIONS).tap();
+    await expect(elementById(TestIDs.TOP_BAR)).toBeVisible();
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await expect(elementById(TestIDs.TOP_BAR)).toBeNotVisible();
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await expect(elementById(TestIDs.TOP_BAR)).toBeNotVisible();
+  });
+
+  it('default options should not override static options', async () => {
+    await elementById(TestIDs.HIDE_TOPBAR_DEFAULT_OPTIONS).tap();
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await elementById(TestIDs.POP_BTN).tap();
+    await expect(elementById(TestIDs.TOP_BAR)).toBeVisible();
+    await expect(elementByLabel('Styling Options')).toBeVisible();
+  });
+
+  it('set title component', async () => {
+    await elementById(TestIDs.SET_REACT_TITLE_VIEW).tap();
+    await expect(elementByLabel('Press Me')).toBeVisible();
+  });
+
+  it('Popping screen with yellow box should not crash', async () => {
+    await elementById(TestIDs.SHOW_YELLOW_BOX_BTN).tap();
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await elementById(TestIDs.POP_BTN).tap();
+    await expect(elementByLabel('Styling Options')).toBeVisible();
+  });
+
+  xit('hides topBar onScroll down and shows it on scroll up', async () => {
+    await elementById(TestIDs.PUSH_OPTIONS_BUTTON).tap();
+    await elementById(TestIDs.SCROLLVIEW_SCREEN_BUTTON).tap();
+    await elementById(TestIDs.TOGGLE_TOP_BAR_HIDE_ON_SCROLL).tap();
+    await expect(elementById(TestIDs.TOP_BAR)).toBeVisible();
+    await element(by.id(TestIDs.SCROLLVIEW_ELEMENT)).swipe('up', 'slow');
+    await expect(elementById(TestIDs.TOP_BAR)).toBeNotVisible();
+    await element(by.id(TestIDs.SCROLLVIEW_ELEMENT)).swipe('down', 'fast');
+    await expect(elementById(TestIDs.TOP_BAR)).toBeVisible();
+  });
+});

e2e/Orientation.test.js

@@ -0,0 +1,59 @@
+
+const Utils = require('./Utils');
+const TestIDs = require('../playground/src/testIDs');
+
+const { elementById } = Utils;
+
+describe(':ios: orientation', () => {
+
+  beforeEach(async () => {
+    await device.relaunchApp();
+    waitForDeviceToSettleAfterOrientationChangeAndroid = ms => new Promise(res => setTimeout(res, device.getPlatform() === 'ios' ? 0 : 400));
+    await elementById(TestIDs.NAVIGATION_TAB).tap();
+    await elementById(TestIDs.SHOW_ORIENTATION_SCREEN).tap();
+  });
+
+  it('default allows all', async () => {
+    await elementById(TestIDs.DEFAULT_ORIENTATION_BTN).tap();
+    waitForDeviceToSettleAfterOrientationChangeAndroid();
+    await expect(elementById(TestIDs.PORTRAIT_ELEMENT)).toBeVisible();
+    await device.setOrientation('landscape');
+    waitForDeviceToSettleAfterOrientationChangeAndroid();
+    await expect(elementById(TestIDs.LANDSCAPE_ELEMENT)).toBeVisible();
+    await device.setOrientation('portrait');
+    waitForDeviceToSettleAfterOrientationChangeAndroid();
+    await expect(elementById(TestIDs.PORTRAIT_ELEMENT)).toBeVisible();
+    await elementById(TestIDs.DISMISS_BTN).tap();
+  });
+
+  it('landscape and portrait array', async () => {
+    await elementById(TestIDs.LANDSCAPE_PORTRAIT_ORIENTATION_BTN).tap();
+    await expect(element(by.id(TestIDs.PORTRAIT_ELEMENT))).toBeVisible();
+    await device.setOrientation('landscape');
+    waitForDeviceToSettleAfterOrientationChangeAndroid();
+    await expect(element(by.id(TestIDs.LANDSCAPE_ELEMENT))).toBeVisible();
+    await device.setOrientation('portrait');
+    waitForDeviceToSettleAfterOrientationChangeAndroid();
+    await expect(element(by.id(TestIDs.PORTRAIT_ELEMENT))).toBeVisible();
+    await elementById(TestIDs.DISMISS_BTN).tap();
+  });
+
+  it(':ios: portrait only', async () => {
+    await elementById(TestIDs.PORTRAIT_ORIENTATION_BTN).tap();
+    await expect(elementById(TestIDs.PORTRAIT_ELEMENT)).toBeVisible();
+    await device.setOrientation('landscape');
+    await expect(elementById(TestIDs.PORTRAIT_ELEMENT)).toBeVisible();
+    await device.setOrientation('portrait');
+    await expect(elementById(TestIDs.PORTRAIT_ELEMENT)).toBeVisible();
+    await elementById(TestIDs.DISMISS_BTN).tap();
+  });
+
+  it(':ios: landscape only', async () => {
+    await elementById(TestIDs.LANDSCAPE_ORIENTATION_BTN).tap();
+    await device.setOrientation('landscape');
+    await expect(element(by.id(TestIDs.LANDSCAPE_ELEMENT))).toBeVisible();
+    await device.setOrientation('portrait');
+    await expect(element(by.id(TestIDs.LANDSCAPE_ELEMENT))).toBeVisible();
+    await elementById(TestIDs.DISMISS_BTN).tap();
+  });
+});

e2e/Orientations.test.js

@@ -1,61 +0,0 @@
-
-const Utils = require('./Utils');
-const testIDs = require('../playground/src/testIDs');
-
-const { elementById } = Utils;
-
-describe(':ios: orientation', () => {
-
-  beforeEach(async () => {
-    await device.relaunchApp();
-    waitForDeviceToSettleAfterOrientationChangeAndroid = ms => new Promise(res => setTimeout(res, device.getPlatform() === 'ios' ? 0 : 400));
-  });
-
-  test('default allows all', async () => {
-    await elementById(testIDs.ORIENTATION_BUTTON).tap();
-    await elementById(testIDs.DEFAULT_ORIENTATION_BUTTON).tap();
-    waitForDeviceToSettleAfterOrientationChangeAndroid();
-    await expect(elementById(testIDs.PORTRAIT_ELEMENT)).toBeVisible();
-    await device.setOrientation('landscape');
-    waitForDeviceToSettleAfterOrientationChangeAndroid();
-    await expect(elementById(testIDs.LANDSCAPE_ELEMENT)).toBeVisible();
-    await device.setOrientation('portrait');
-    waitForDeviceToSettleAfterOrientationChangeAndroid();
-    await expect(elementById(testIDs.PORTRAIT_ELEMENT)).toBeVisible();
-    await elementById(testIDs.DISMISS_BUTTON).tap();
-  });
-
-  test('landscape and portrait array', async () => {
-    await elementById(testIDs.ORIENTATION_BUTTON).tap();
-    await elementById(testIDs.LANDSCAPE_PORTRAIT_ORIENTATION_BUTTON).tap();
-    await expect(element(by.id(testIDs.PORTRAIT_ELEMENT))).toBeVisible();
-    await device.setOrientation('landscape');
-    waitForDeviceToSettleAfterOrientationChangeAndroid();
-    await expect(element(by.id(testIDs.LANDSCAPE_ELEMENT))).toBeVisible();
-    await device.setOrientation('portrait');
-    waitForDeviceToSettleAfterOrientationChangeAndroid();
-    await expect(element(by.id(testIDs.PORTRAIT_ELEMENT))).toBeVisible();
-    await elementById(testIDs.DISMISS_BUTTON).tap();
-  });
-
-  test(':ios: portrait only', async () => {
-    await elementById(testIDs.ORIENTATION_BUTTON).tap();
-    await elementById(testIDs.PORTRAIT_ORIENTATION_BUTTON).tap();
-    await expect(elementById(testIDs.PORTRAIT_ELEMENT)).toBeVisible();
-    await device.setOrientation('landscape');
-    await expect(elementById(testIDs.PORTRAIT_ELEMENT)).toBeVisible();
-    await device.setOrientation('portrait');
-    await expect(elementById(testIDs.PORTRAIT_ELEMENT)).toBeVisible();
-    await elementById(testIDs.DISMISS_BUTTON).tap();
-  });
-
-  test(':ios: landscape only', async () => {
-    await elementById(testIDs.ORIENTATION_BUTTON).tap();
-    await elementById(testIDs.LANDSCAPE_ORIENTATION_BUTTON).tap();
-    await device.setOrientation('landscape');
-    await expect(element(by.id(testIDs.LANDSCAPE_ELEMENT))).toBeVisible();
-    await device.setOrientation('portrait');
-    await expect(element(by.id(testIDs.LANDSCAPE_ELEMENT))).toBeVisible();
-    await elementById(testIDs.DISMISS_BUTTON).tap();
-  });
-});

e2e/Overlay.test.js

@@ -0,0 +1,45 @@
+const Utils = require('./Utils');
+const TestIDs = require('../playground/src/testIDs');
+const { elementByLabel, elementById } = Utils;
+
+describe('Overlay', () => {
+  beforeEach(async () => {
+    await device.relaunchApp();
+    await elementById(TestIDs.NAVIGATION_TAB).tap();
+    await elementById(TestIDs.OVERLAY_BTN).tap();
+  });
+
+  it('show and dismiss overlay', async () => {
+    await elementById(TestIDs.SHOW_OVERLAY_BTN).tap();
+    await expect(elementById(TestIDs.OVERLAY_ALERT_HEADER)).toBeVisible();
+    await elementById(TestIDs.DISMISS_BTN).tap();
+    await expect(elementById(TestIDs.OVERLAY_ALERT_HEADER)).toBeNotVisible();
+  });
+
+  it('overlay pass touches - true', async () => {
+    await elementById(TestIDs.SHOW_TOUCH_THROUGH_OVERLAY_BTN).tap();
+    await expect(elementById(TestIDs.SHOW_OVERLAY_BTN)).toBeVisible();
+    await elementById(TestIDs.ALERT_BUTTON).tap();
+    await expect(elementByLabel('Alert displayed')).toBeVisible();
+  });
+
+  it('overlay should redraw after orientation change', async () => {
+    await elementById(TestIDs.SHOW_OVERLAY_BTN).tap();
+    await device.setOrientation('landscape');
+    await expect(elementById(TestIDs.OVERLAY_ALERT_HEADER)).toBeVisible();
+  });
+
+  it('setRoot should not remove overlay', async () => {
+    await elementById(TestIDs.SHOW_TOUCH_THROUGH_OVERLAY_BTN).tap();
+    await elementById(TestIDs.SET_ROOT_BTN).tap();
+    await expect(elementById(TestIDs.OVERLAY_ALERT_HEADER)).toBeVisible();
+  });
+
+  xtest('overlay pass touches - false', async () => {
+    await elementById(TestIDs.SHOW_OVERLAY_BUTTON).tap();
+    await expect(elementById(TestIDs.SHOW_OVERLAY_BUTTON)).toBeVisible();
+    await expect(elementById(TestIDs.TOP_BAR_ELEMENT)).toBeVisible();
+    await elementById(TestIDs.HIDE_TOP_BAR_BUTTON).tap();
+    await expect(elementById(TestIDs.TOP_BAR_ELEMENT)).toBeVisible();
+  });
+});

e2e/OverlayTest.test.js

@@ -1,51 +0,0 @@
-const Utils = require('./Utils');
-const testIDs = require('../playground/src/testIDs');
-const { elementByLabel, elementById } = Utils;
-
-describe('Overlay', () => {
-  beforeEach(async () => {
-    await device.relaunchApp();
-  });
-
-  test('show and dismiss overlay', async () => {
-    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await elementById(testIDs.SHOW_OVERLAY_BUTTON).tap();
-    await expect(elementById(testIDs.DIALOG_HEADER)).toBeVisible();
-    await elementById(testIDs.OK_BUTTON).tap();
-    await expect(elementById(testIDs.DIALOG_HEADER)).toBeNotVisible();
-  });
-
-  test('overlay pass touches - true', async () => {
-    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await elementById(testIDs.SHOW_TOUCH_THROUGH_OVERLAY_BUTTON).tap();
-    await expect(elementById(testIDs.DIALOG_HEADER)).toBeVisible();
-    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
-    await elementById(testIDs.HIDE_TOP_BAR_BUTTON).tap();
-    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeNotVisible();
-  });
-
-  xtest('overlay pass touches - false', async () => {
-    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await elementById(testIDs.SHOW_OVERLAY_BUTTON).tap();
-    await expect(elementById(testIDs.DIALOG_HEADER)).toBeVisible();
-    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
-    await elementById(testIDs.HIDE_TOP_BAR_BUTTON).tap();
-    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
-  });
-
-  test('overlay should redraw after orientation change', async () => {
-    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await elementById(testIDs.SHOW_OVERLAY_BUTTON).tap();
-    await expect(elementById(testIDs.DIALOG_HEADER)).toBeVisible();
-    await device.setOrientation('landscape');
-    await expect(elementById(testIDs.DIALOG_HEADER)).toBeVisible();
-  });
-
-  test('setRoot should not remove overlay', async () => {
-    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await elementById(testIDs.SHOW_OVERLAY_BUTTON).tap();
-    await expect(elementById(testIDs.DIALOG_HEADER)).toBeVisible();
-    await elementById(testIDs.SET_ROOT_BUTTON).tap();
-    await expect(elementById(testIDs.DIALOG_HEADER)).toBeVisible();
-  });
-});

e2e/ScreenStack.test.js

@@ -1,120 +0,0 @@
-const Utils = require('./Utils');
-const testIDs = require('../playground/src/testIDs');
-const Android = require('./AndroidUtils');
-
-const { elementByLabel, elementById, sleep } = Utils;
-
-describe('screen stack', () => {
-  beforeEach(async () => {
-    await device.relaunchApp();
-  });
-
-  test('push and pop screen', async () => {
-    await elementById(testIDs.PUSH_BUTTON).tap();
-    await expect(elementById(testIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
-    await elementById(testIDs.POP_BUTTON).tap();
-    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
-  });
-
-  test(':android: push and pop screen without animation', async () => {
-    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await expect(elementById(testIDs.OPTIONS_SCREEN_HEADER)).toBeVisible();
-    Android.pressBack();
-    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
-  });
-
-  test('pop to specific id', async () => {
-    await elementById(testIDs.PUSH_BUTTON).tap();
-    await elementById(testIDs.PUSH_BUTTON).tap();
-    await elementById(testIDs.PUSH_BUTTON).tap();
-    await expect(elementByLabel('Stack Position: 3')).toBeVisible();
-    await elementById(testIDs.POP_STACK_POSITION_ONE_BUTTON).tap();
-    await expect(elementByLabel('Stack Position: 1')).toBeVisible();
-  });
-
-  test('pop to root', async () => {
-    await elementById(testIDs.PUSH_BUTTON).tap();
-    await elementById(testIDs.PUSH_BUTTON).tap();
-    await elementById(testIDs.PUSH_BUTTON).tap();
-    await elementById(testIDs.POP_TO_ROOT).tap();
-    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
-  });
-
-  test('switch to tab', async () => {
-    await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
-    await expect(elementByLabel('This is tab 1')).toBeVisible();
-    await elementById(testIDs.SWITCH_SECOND_TAB_BUTTON).tap();
-    await expect(elementByLabel('This is tab 1')).toBeNotVisible();
-    await expect(elementByLabel('This is tab 2')).toBeVisible();
-  });
-
-  test('switch to tab by cotnainerId', async () => {
-    await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
-    await expect(elementByLabel('This is tab 1')).toBeVisible();
-    await elementById(testIDs.SWITCH_SECOND_TAB_BUTTON).tap();
-    await expect(elementByLabel('This is tab 2')).toBeVisible();
-    await elementById(testIDs.SWITCH_FIRST_TAB_BUTTON).tap();
-    await expect(elementByLabel('This is tab 1')).toBeVisible();
-  });
-
-  test('push stack with multiple children', async () => {
-    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
-    await elementById(testIDs.MODAL_WITH_STACK_BUTTON).tap();
-    await expect(elementByLabel('Screen 2')).toBeVisible();
-    await elementById(testIDs.POP_BUTTON).tap();
-    await expect(elementByLabel('Screen 1')).toBeVisible();
-  });
-
-  test('push external component with options', async () => {
-    await elementById(testIDs.PUSH_EXTERNAL_COMPONENT_BUTTON).tap();
-    await expect(elementByLabel('This is an external component')).toBeVisible();
-    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
-  });
-
-  test('push into a stack from BottomTabs', async () => {
-    await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
-    await elementById(testIDs.PUSH_BUTTON).tap();
-    await expect(elementByLabel('Pushed Screen')).toBeVisible();
-    await elementById(testIDs.POP_BUTTON).tap();
-    await expect(elementByLabel('This is tab 1')).toBeVisible();
-  });
-
-  test(':ios: set stack root component should be first in stack', async () => {
-    await elementById(testIDs.PUSH_BUTTON).tap();
-    await expect(elementByLabel('Stack Position: 1')).toBeVisible();
-    await elementById(testIDs.SET_STACK_ROOT_BUTTON).tap();
-    await expect(elementByLabel('Stack Position: 2')).toBeVisible();
-    await elementById(testIDs.POP_BUTTON).tap();
-    await expect(elementByLabel('Stack Position: 2')).toBeVisible();
-  });
-
-  test('push to stack with static id from SideMenu', async () => {
-    await elementById(testIDs.TAB_BASED_APP_SIDE_BUTTON).tap();
-    await elementById(testIDs.SHOW_LEFT_SIDE_MENU_BUTTON).tap();
-    await elementById(testIDs.LEFT_SIDE_MENU_PUSH_BUTTON).tap();
-    await expect(elementByLabel('Text Screen')).toBeVisible();
-    await elementById(testIDs.POP_BUTTON).tap();
-    await expect(elementByLabel('This is a side menu center screen tab 1')).toBeVisible();
-  });
-
-  test('pop component should not deatch component if can`t pop', async () => {
-    await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
-    await elementById(testIDs.POP_BUTTON).tap();
-    await elementById(testIDs.PUSH_BUTTON).tap();
-    await expect(elementById(testIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
-  });
-
-  test('push bottom tabs', async () => {
-    await elementById(testIDs.PUSH_BUTTON).tap();
-    await expect(elementById(testIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
-    await elementById(testIDs.PUSH_BOTTOM_TABS_BUTTON).tap();
-    await expect(elementById(testIDs.BOTTOM_TABS_ELEMENT)).toBeVisible();
-  });
-
-  test(':android: custom back button', async () => {
-    await elementById(testIDs.PUSH_BUTTON).tap();
-    await elementById(testIDs.PUSH_CUSTOM_BACK_BUTTON).tap();
-    await elementById(testIDs.CUSTOM_BACK_BUTTON).tap();
-    await expect(elementByLabel('back button clicked')).toBeVisible();
-  });
-});

e2e/ScreenStyle.test.js

@@ -1,207 +0,0 @@
-const Utils = require('./Utils');
-const Android = require('./AndroidUtils');
-const testIDs = require('../playground/src/testIDs');
-
-const { elementById, elementByLabel } = Utils;
-
-describe('screen style', () => {
-  beforeEach(async () => {
-    await device.relaunchApp();
-  });
-
-  test('declare options on a component', async () => {
-    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await expect(elementByLabel('Static Title')).toBeVisible();
-  });
-
-  test('change title on component component', async () => {
-    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await expect(elementByLabel('Static Title')).toBeVisible();
-    await elementById(testIDs.DYNAMIC_OPTIONS_BUTTON).tap();
-    await expect(elementByLabel('Dynamic Title')).toBeVisible();
-  });
-
-  test(
-    'set dynamic options with valid options will do something and not crash',
-    async () => {
-      await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-      await elementById(testIDs.DYNAMIC_OPTIONS_BUTTON).tap();
-      await expect(elementById(testIDs.OPTIONS_SCREEN_HEADER)).toBeVisible();
-    }
-  );
-
-  test(
-    'hides TopBar when pressing on Hide TopBar and shows it when pressing on Show TopBar',
-    async () => {
-      await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-      await elementById(testIDs.HIDE_TOP_BAR_BUTTON).tap();
-      await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeNotVisible();
-      await elementById(testIDs.SHOW_TOP_BAR_BUTTON).tap();
-      await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
-    }
-  );
-
-  xit('hides topBar onScroll down and shows it on scroll up', async () => {
-    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await elementById(testIDs.SCROLLVIEW_SCREEN_BUTTON).tap();
-    await elementById(testIDs.TOGGLE_TOP_BAR_HIDE_ON_SCROLL).tap();
-    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
-    await element(by.id(testIDs.SCROLLVIEW_ELEMENT)).swipe('up', 'slow');
-    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeNotVisible();
-    await element(by.id(testIDs.SCROLLVIEW_ELEMENT)).swipe('down', 'fast');
-    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
-  });
-
-  test('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();
-    await expect(element(by.text('TeSt'))).toBeVisible();
-  });
-
-  test('set Tab Bar badge on a current Tab appear once', async () => {
-    await elementById(testIDs.TAB_BASED_APP_SIDE_BUTTON).tap();
-    await elementById(testIDs.SET_TAB_BADGE_BUTTON).tap();
-    await expect(element(by.text('TeSt'))).toBeVisible();
-  });
-
-  test(':ios: set Tab Bar badge null on a current Tab should reset badge', async () => {
-    await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
-    await elementById(testIDs.SET_TAB_BADGE_BUTTON).tap();
-    await expect(element(by.text('TeSt'))).toBeVisible();
-    await elementById(testIDs.SET_TAB_BADGE_BUTTON_NULL).tap();
-    await expect(element(by.text('TeSt'))).toBeNotVisible();
-  });
-
-  test(':android: hide Tab Bar', async () => {
-    await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
-    await expect(elementById(testIDs.BOTTOM_TABS_ELEMENT)).toBeVisible();
-    await elementById(testIDs.HIDE_BOTTOM_TABS_BUTTON).tap();
-    await expect(elementById(testIDs.BOTTOM_TABS_ELEMENT)).toBeNotVisible();
-  });
-
-  test(':android: show Tab Bar', async () => {
-    await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
-    await elementById(testIDs.HIDE_BOTTOM_TABS_BUTTON).tap();
-    await expect(elementById(testIDs.BOTTOM_TABS_ELEMENT)).toBeNotVisible();
-    await elementById(testIDs.SHOW_BOTTOM_TABS_BUTTON).tap();
-    await expect(elementById(testIDs.BOTTOM_TABS_ELEMENT)).toBeVisible();
-  });
-
-  test('hide Tab Bar on push', async () => {
-    await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
-    await elementById(testIDs.HIDE_BOTTOM_TABS_ON_PUSH_BUTTON).tap();
-    await expect(elementById(testIDs.BOTTOM_TABS_ELEMENT)).toBeNotVisible();
-    await elementById(testIDs.POP_BUTTON).tap();
-    await expect(elementById(testIDs.BOTTOM_TABS_ELEMENT)).toBeVisible();
-  });
-
-  test('side menu visibility - left', async () => {
-    await elementById(testIDs.TAB_BASED_APP_SIDE_BUTTON).tap();
-    await elementById(testIDs.SHOW_LEFT_SIDE_MENU_BUTTON).tap();
-    await expect(elementById(testIDs.HIDE_LEFT_SIDE_MENU_BUTTON)).toBeVisible();
-    await elementById(testIDs.HIDE_LEFT_SIDE_MENU_BUTTON).tap();
-    await expect(elementById(testIDs.HIDE_LEFT_SIDE_MENU_BUTTON)).toBeNotVisible();
-  });
-
-  test('side menu visibility - right', async () => {
-    await elementById(testIDs.TAB_BASED_APP_SIDE_BUTTON).tap();
-    await elementById(testIDs.SHOW_RIGHT_SIDE_MENU_BUTTON).tap();
-    await expect(elementById(testIDs.HIDE_RIGHT_SIDE_MENU_BUTTON)).toBeVisible();
-    await elementById(testIDs.HIDE_RIGHT_SIDE_MENU_BUTTON).tap();
-    await expect(elementById(testIDs.HIDE_RIGHT_SIDE_MENU_BUTTON)).toBeNotVisible();
-  });
-
-  test('set right buttons', async () => {
-    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await expect(elementById('buttonOne')).toBeVisible();
-    await elementById('buttonOne').tap();
-    await expect(elementById('buttonTwo')).toBeVisible();
-    await elementById('buttonTwo').tap();
-    await expect(elementById('buttonOne')).toBeVisible();
-  });
-
-  test('set left buttons', async () => {
-    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await expect(elementById('buttonLeft')).toBeVisible();
-  });
-
-  test('pass props to custom button component', async () => {
-    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await expect(elementByLabel(`Two`)).toExist();
-  });
-
-  test('pass props to custom button component should exist after push pop', async () => {
-    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await expect(elementByLabel(`Two`)).toExist();
-    await elementById(testIDs.SCROLLVIEW_SCREEN_BUTTON).tap();
-    await elementById(testIDs.POP_BUTTON).tap();
-    await expect(elementByLabel(`Two`)).toExist();
-  });
-
-  test('custom button is tapable', async () => {
-    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await expect(elementByLabel(`Two`)).toExist();
-    await elementByLabel(`Two`).tap();
-    await expect(elementByLabel(`Thanks for that :)`)).toExist();
-  });
-
-  test('tab bar items visibility', async () => {
-    await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
-    await expect(elementById(testIDs.FIRST_TAB_BAR_BUTTON)).toBeVisible();
-    await expect(elementById(testIDs.SECOND_TAB_BAR_BUTTON)).toBeVisible();
-  });
-
-  test('default options should apply to all screens in stack', async () => {
-    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await elementById(testIDs.PUSH_DEFAULT_OPTIONS_BUTTON).tap();
-    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeNotVisible();
-    await elementById(testIDs.PUSH_BUTTON).tap();
-    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeNotVisible();
-  });
-
-  test('default options should not override static options', async () => {
-    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await elementById(testIDs.PUSH_DEFAULT_OPTIONS_BUTTON).tap();
-    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeNotVisible();
-    await elementById(testIDs.POP_BUTTON).tap();
-    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
-  });
-
-  test('supports user-provided id', async () => {
-    await elementById(testIDs.PROVIDED_ID).tap();
-    await expect(elementByLabel('User provided id')).toBeVisible();
-  });
-
-  test('stack options should not override component options', async () => {
-    await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
-    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
-  });
-
-  test('set title component', async () => {
-    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await elementById(testIDs.SHOW_TOPBAR_REACT_VIEW).tap();
-    await expect(elementByLabel('Press Me')).toBeVisible();
-  });
-
-  test(':ios: set searchBar and handle onSearchUpdated event', async () => {
-    await elementById(testIDs.SHOW_TOPBAR_SEARCHBAR).tap();
-    await expect(elementByLabel('Start Typing')).toBeVisible();
-    await elementByLabel('Start Typing').tap();
-    const query = '124';
-    await elementByLabel('Start Typing').typeText(query);
-    await expect(elementById(testIDs.SEARCH_RESULT_ITEM)).toHaveText(`Item ${query}`);
-  });
-
-  test('default options should apply to all screens in stack', async () => {
-    await elementById(testIDs.PUSH_BUTTON).tap();
-    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
-    await expect(elementById(testIDs.TOP_BAR_BUTTON)).toBeVisible();
-  });
-
-  test(':android: Popping screen with yellow box in button, title and background components should not crash', async () => {
-    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await elementById(testIDs.SHOW_YELLOW_BOX).tap();
-    Android.pressBack();
-    await expect(elementByLabel('React Native Navigation!')).toBeVisible();
-  });
-});

e2e/SideMenu.test.js

@@ -0,0 +1,39 @@
+const Utils = require('./Utils');
+const TestIDs = require('../playground/src/testIDs');
+const { elementByLabel, elementById } = Utils;
+
+describe('SideMenu', () => {
+  beforeEach(async () => {
+    await device.relaunchApp();
+    await elementById(TestIDs.SIDE_MENU_BTN).tap();
+  });
+
+  it('close SideMenu and push to stack with static id', async () => {
+    await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
+    await elementById(TestIDs.LEFT_SIDE_MENU_PUSH_BTN).tap();
+    await elementById(TestIDs.CLOSE_LEFT_SIDE_MENU_BTN).tap();
+    await expect(elementById(TestIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
+    await elementById(TestIDs.POP_BTN).tap();
+    await expect(elementById(TestIDs.CENTER_SCREEN_HEADER)).toBeVisible();
+  });
+
+  it('Push to stack with static id and close SideMenu with screen options', async () => {
+    await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
+    await elementById(TestIDs.LEFT_SIDE_MENU_PUSH_AND_CLOSE_BTN).tap();
+    await expect(elementById(TestIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
+    await elementById(TestIDs.POP_BTN).tap();
+    await expect(elementById(TestIDs.CENTER_SCREEN_HEADER)).toBeVisible();
+  });
+
+  it('side menu visibility - left', async () => {
+    await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
+    await elementById(TestIDs.CLOSE_LEFT_SIDE_MENU_BTN).tap();
+    await expect(elementById(TestIDs.CLOSE_LEFT_SIDE_MENU_BTN)).toBeNotVisible();
+  });
+
+  it('side menu visibility - right', async () => {
+    await elementById(TestIDs.OPEN_RIGHT_SIDE_MENU_BTN).tap();
+    await elementById(TestIDs.CLOSE_RIGHT_SIDE_MENU_BTN).tap();
+    await expect(elementById(TestIDs.CLOSE_RIGHT_SIDE_MENU_BTN)).toBeNotVisible();
+  });
+});

e2e/Stack.test.js

@@ -0,0 +1,100 @@
+const Utils = require('./Utils');
+const TestIDs = require('../playground/src/testIDs');
+const { elementByLabel, elementById, sleep } = Utils;
+const Android = require('./AndroidUtils');
+
+describe('Stack', () => {
+  beforeEach(async () => {
+    await device.relaunchApp();
+    await elementById(TestIDs.STACK_BTN).tap();
+  });
+
+  it('push and pop screen', async () => {
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await expect(elementById(TestIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
+    await elementById(TestIDs.POP_BTN).tap();
+    await expect(elementById(TestIDs.STACK_SCREEN_HEADER)).toBeVisible();
+  });
+
+  it('push and pop screen without animation', async () => {
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await elementById(TestIDs.PUSH_NO_ANIM_BTN).tap();
+    await expect(elementByLabel('Stack Position: 2')).toBeVisible();
+    await elementById(TestIDs.POP_BTN).tap();
+    await expect(elementByLabel('Stack Position: 1')).toBeVisible();
+  });
+
+  it('pop to specific id', async () => {
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await expect(elementByLabel('Stack Position: 3')).toBeVisible();
+    await elementById(TestIDs.POP_TO_FIRST_SCREEN_BTN).tap();
+    await expect(elementByLabel('Stack Position: 1')).toBeVisible();
+  });
+
+  it('pop to root', async () => {
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await elementById(TestIDs.POP_TO_ROOT_BTN).tap();
+    await expect(elementById(TestIDs.STACK_SCREEN_HEADER)).toBeVisible();
+  });
+
+  it('pop component should not detach component if can`t pop', async () => {
+    await elementById(TestIDs.POP_NONE_EXISTENT_SCREEN_BTN).tap();
+    await expect(elementById(TestIDs.STACK_SCREEN_HEADER)).toBeVisible();
+  });
+
+  it(':android: custom back button', async () => {
+    await elementById(TestIDs.PUSH_CUSTOM_BACK_BTN).tap();
+    await elementById(TestIDs.CUSTOM_BACK_BTN).tap();
+    await expect(elementByLabel('back button clicked')).toBeVisible();
+  });
+
+  it('screen lifecycle', async () => {
+    await elementById(TestIDs.PUSH_LIFECYCLE_BTN).tap();
+    await expect(elementByLabel('didAppear')).toBeVisible();
+    await elementById(TestIDs.PUSH_TO_TEST_DID_DISAPPEAR_BTN).tap();
+    await expect(elementByLabel('didDisappear')).toBeVisible();
+  });
+
+  it('unmount is called on pop', async () => {
+    await elementById(TestIDs.PUSH_LIFECYCLE_BTN).tap();
+    await elementById(TestIDs.POP_BTN).tap();
+    await expect(elementByLabel('componentWillUnmount')).toBeVisible();
+    await elementByLabel('OK').atIndex(0).tap();
+    await expect(elementByLabel('didDisappear')).toBeVisible();
+  });
+
+  it(':android: override hardware back button', async () => {
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await elementById(TestIDs.ADD_BACK_HANDLER).tap();
+    Android.pressBack();
+    await sleep(100);
+    await expect(elementById(TestIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
+
+    await elementById(TestIDs.REMOVE_BACK_HANDLER).tap();
+    Android.pressBack();
+    await sleep(100);
+    await expect(elementById(TestIDs.STACK_SCREEN_HEADER)).toBeVisible();
+  });
+
+  it(':ios: set stack root component should be first in stack', async () => {
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await expect(elementByLabel('Stack Position: 1')).toBeVisible();
+    await elementById(TestIDs.SET_STACK_ROOT_BUTTON).tap();
+    await expect(elementByLabel('Stack Position: 2')).toBeVisible();
+    await elementById(TestIDs.POP_BTN).tap();
+    await expect(elementByLabel('Stack Position: 2')).toBeVisible();
+  });
+
+  it(':ios: set searchBar and handle onSearchUpdated event', async () => {
+    await elementById(TestIDs.SEARCH_BTN).tap();
+    await expect(elementByLabel('Start Typing')).toBeVisible();
+    await elementByLabel('Start Typing').tap();
+    const query = '124';
+    await elementByLabel('Start Typing').typeText(query);
+    await expect(elementById(TestIDs.SEARCH_RESULT_ITEM)).toHaveText(`Item ${query}`);
+  });
+});

e2e/StaticLifecycleEvents.test.js

@@ -1,45 +1,42 @@
 const Utils = require('./Utils');
-const testIDs = require('../playground/src/testIDs');
+const TestIDs = require('../playground/src/testIDs');
 const { elementByLabel, elementById } = Utils;
 
 describe('static lifecycle events', () => {
   beforeEach(async () => {
     await device.relaunchApp();
+    await elementById(TestIDs.NAVIGATION_TAB).tap();
+    await elementById(TestIDs.SHOW_STATIC_EVENTS_SCREEN).tap();
+    await elementById(TestIDs.STATIC_EVENTS_OVERLAY_BTN).tap();
   });
 
-  test('didAppear didDisappear', async () => {
-    await elementById(testIDs.PUSH_STATIC_LIFECYCLE_BUTTON).tap();
-    await expect(elementByLabel('Static Lifecycle Events Overlay')).toBeVisible();
-    await expect(elementByLabel('componentDidAppear | navigation.playground.StaticLifecycleOverlay')).toBeVisible();
-    await elementById(testIDs.PUSH_BUTTON).tap();
-    await expect(elementByLabel('componentDidAppear | navigation.playground.PushedScreen')).toBeVisible();
-    await expect(elementByLabel('componentDidDisappear | navigation.playground.WelcomeScreen')).toBeVisible();
+  it('didAppear didDisappear', async () => {
+    await expect(elementByLabel('componentDidAppear | EventsOverlay')).toBeVisible();
+    await elementById(TestIDs.PUSH_BTN).tap();
+    await expect(elementByLabel('componentDidAppear | Pushed')).toBeVisible();
+    await expect(elementByLabel('componentDidDisappear | EventsScreen')).toBeVisible();
   });
 
-  test(':ios: pushing and popping screen dispatch static event', async () => {
-    await elementById(testIDs.PUSH_STATIC_LIFECYCLE_BUTTON).tap();
+  it(':ios: pushing and popping screen dispatch static event', async () => {
     await expect(elementByLabel('Static Lifecycle Events Overlay')).toBeVisible();
-    await expect(elementByLabel('componentDidAppear | navigation.playground.StaticLifecycleOverlay')).toBeVisible();
-    await elementById(testIDs.PUSH_BUTTON).tap();
+    await expect(elementByLabel('componentDidAppear | EventsOverlay')).toBeVisible();
+    await elementById(TestIDs.PUSH_BTN).tap();
     await expect(elementByLabel('push')).toBeVisible();
-    await elementById(testIDs.POP_BUTTON).tap();
+    await elementById(TestIDs.POP_BTN).tap();
     await expect(elementByLabel('pop')).toBeVisible();
   });
 
-  test(':ios: showModal and dismissModal dispatch static event', async () => {
-    await elementById(testIDs.PUSH_STATIC_LIFECYCLE_BUTTON).tap();
-    await expect(elementByLabel('Static Lifecycle Events Overlay')).toBeVisible();
-    await expect(elementByLabel('componentDidAppear | navigation.playground.StaticLifecycleOverlay')).toBeVisible();
-    await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
+  it(':ios: showModal and dismissModal dispatch static event', async () => {
+    await elementById(TestIDs.MODAL_BTN).tap();
     await expect(elementByLabel('showModal')).toBeVisible();
-    await elementById(testIDs.DISMISS_MODAL_BUTTON).tap();
+    await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
     await expect(elementByLabel('dismissModal')).toBeVisible();
   });
 
-  test(':ios: unmounts when dismissed', async () => {
-    await elementById(testIDs.PUSH_STATIC_LIFECYCLE_BUTTON).tap();
+  it(':ios: unmounts when dismissed', async () => {
+    await elementById(TestIDs.PUSH_BTN).tap();
     await expect(elementByLabel('Static Lifecycle Events Overlay')).toBeVisible();
-    await elementById(testIDs.DISMISS_BUTTON).tap();
+    await elementById(TestIDs.DISMISS_BTN).tap();
     await expect(elementByLabel('Overlay Unmounted')).toBeVisible();
     await elementByLabel('OK').tap();
   });

e2e/TopLevelApi.test.js

@@ -1,42 +0,0 @@
-const Utils = require('./Utils');
-const testIDs = require('../playground/src/testIDs');
-
-const { elementByLabel, elementById } = Utils;
-
-describe('top level api', () => {
-  beforeEach(async () => {
-    await device.relaunchApp();
-  });
-
-  test('shows welcome screen', async () => {
-    await expect(elementById(testIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
-  });
-
-  test('switch to tab based app, passProps and functions', async () => {
-    await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
-    await expect(elementByLabel('This is tab 1')).toBeVisible();
-    await expect(elementByLabel('Hello from a function!')).toBeVisible();
-  });
-
-  test(':ios: switch to tabs with side menus', async () => {
-    await elementById(testIDs.TAB_BASED_APP_SIDE_BUTTON).tap();
-    await elementById(testIDs.CENTERED_TEXT_HEADER).swipe('right');
-    await expect(elementById(testIDs.HIDE_LEFT_SIDE_MENU_BUTTON)).toBeVisible();
-  });
-
-  test('screen lifecycle', async () => {
-    await elementById(testIDs.PUSH_LIFECYCLE_BUTTON).tap();
-    await expect(elementByLabel('didAppear')).toBeVisible();
-    await elementById(testIDs.PUSH_TO_TEST_DID_DISAPPEAR_BUTTON).tap();
-    await expect(elementByLabel('didDisappear')).toBeVisible();
-  });
-
-  test('unmount is called on pop', async () => {
-    await elementById(testIDs.PUSH_LIFECYCLE_BUTTON).tap();
-    await expect(elementByLabel('didAppear')).toBeVisible();
-    await elementById(testIDs.POP_BUTTON).tap();
-    await expect(elementByLabel('componentWillUnmount')).toBeVisible();
-    await elementByLabel('OK').atIndex(0).tap();
-    await expect(elementByLabel('didDisappear')).toBeVisible();
-  });
-});

e2e/init.js

@@ -4,7 +4,7 @@ const exec = require('shell-utils').exec;
 const adapter = require('detox/runners/jest/adapter');
 
 jest.setTimeout(300000);
-jasmine.getEnv().addReporter(adapter); // don't forget this line
+jasmine.getEnv().addReporter(adapter);
 
 beforeAll(async () => {
   await detox.init(config, {launchApp: false});

lib/android/app/build.gradle

@@ -87,7 +87,7 @@ dependencies {
     implementation 'com.android.support:appcompat-v7:26.1.0'
     implementation 'com.android.support:support-v4:26.1.0'
 
-    implementation 'com.github.wix-playground:ahbottomnavigation:2.4.8'
+    implementation 'com.github.wix-playground:ahbottomnavigation:2.4.9'
     implementation 'com.github.wix-playground:reflow-animator:1.0.4'
     implementation 'com.github.clans:fab:1.6.4'
 

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

@@ -1,21 +1,18 @@
 package com.reactnativenavigation.presentation;
 
-import android.content.Context;
-import android.graphics.drawable.Drawable;
-import android.support.annotation.NonNull;
-import android.support.annotation.VisibleForTesting;
-import android.support.v4.content.ContextCompat;
+import android.content.*;
+import android.graphics.drawable.*;
+import android.support.annotation.*;
+import android.support.v4.content.*;
 
-import com.reactnativenavigation.parse.BottomTabOptions;
-import com.reactnativenavigation.parse.Options;
-import com.reactnativenavigation.utils.ImageLoader;
-import com.reactnativenavigation.utils.ImageLoadingListenerAdapter;
-import com.reactnativenavigation.viewcontrollers.ViewController;
-import com.reactnativenavigation.viewcontrollers.bottomtabs.BottomTabFinder;
-import com.reactnativenavigation.views.BottomTabs;
+import com.reactnativenavigation.parse.*;
+import com.reactnativenavigation.utils.*;
+import com.reactnativenavigation.viewcontrollers.*;
+import com.reactnativenavigation.viewcontrollers.bottomtabs.*;
+import com.reactnativenavigation.views.*;
 import com.reactnativenavigation.views.Component;
 
-import java.util.List;
+import java.util.*;
 
 public class BottomTabPresenter {
     private final Context context;
@@ -47,7 +44,7 @@ public class BottomTabPresenter {
 
     public void applyOptions() {
         for (int i = 0; i < tabs.size(); i++) {
-            BottomTabOptions tab = tabs.get(i).options.copy().withDefaultOptions(defaultOptions).bottomTabOptions;
+            BottomTabOptions tab = tabs.get(i).resolveCurrentOptions(defaultOptions).bottomTabOptions;
             bottomTabs.setBadge(i, tab.badge.get(""));
             bottomTabs.setBadgeColor(tab.badgeColor.get(null));
             bottomTabs.setTitleTypeface(i, tab.fontFamily);
@@ -57,6 +54,7 @@ public class BottomTabPresenter {
             bottomTabs.setTitleInactiveColor(i, tab.textColor.get(null));
             bottomTabs.setTitleInactiveTextSizeInSp(i, tab.fontSize.hasValue() ? Float.valueOf(tab.fontSize.get()) : null);
             bottomTabs.setTitleActiveTextSizeInSp(i, tab.selectedFontSize.hasValue() ? Float.valueOf(tab.selectedFontSize.get()) : null);
+            bottomTabs.setTag(i, tab.testId.get(null));
         }
     }
 
@@ -78,16 +76,7 @@ public class BottomTabPresenter {
                     bottomTabs.setIcon(index, drawable);
                 }
             });
+            if (bto.testId.hasValue()) bottomTabs.setTag(index, bto.testId.get());
         }
     }
-
-    @VisibleForTesting
-    public int getDefaultSelectedTextColor() {
-        return defaultSelectedTextColor;
-    }
-
-    @VisibleForTesting
-    public int getDefaultTextColor() {
-        return defaultTextColor;
-    }
 }

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

@@ -164,6 +164,9 @@ public class TitleBarButtonController extends ViewController<TitleBarReactButton
     private void setTestId(Toolbar toolbar, Text testId) {
         if (!testId.hasValue()) return;
         UiUtils.runOnPreDrawOnce(toolbar, () -> {
+            if (button.hasComponent() && view != null) {
+                view.setTag(testId.get());
+            }
             ActionMenuView buttonsLayout = ViewUtils.findChildByClass(toolbar, ActionMenuView.class);
             List<TextView> buttons = ViewUtils.findChildrenByClass(buttonsLayout, TextView.class);
             for (TextView view : buttons) {

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

@@ -152,6 +152,8 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
             task.run((StackController) parentController);
         } else if (this instanceof StackController) {
             task.run((StackController) this);
+        } else if (parentController != null){
+            parentController.performOnParentStack(task);
         }
     }
 

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

@@ -135,7 +135,7 @@ public class BottomTabsController extends ParentController implements AHBottomNa
 
     @Override
     protected ViewController getCurrentChild() {
-        return tabs.get(bottomTabs.getCurrentItem());
+        return tabs.get(bottomTabs == null ? 0 : bottomTabs.getCurrentItem());
     }
 
     @Override

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

@@ -18,7 +18,7 @@ import com.reactnativenavigation.utils.CommandListener;
 import com.reactnativenavigation.viewcontrollers.ChildControllersRegistry;
 import com.reactnativenavigation.viewcontrollers.ParentController;
 import com.reactnativenavigation.viewcontrollers.ViewController;
-import com.reactnativenavigation.views.Component;
+import com.reactnativenavigation.views.*;
 
 import java.util.ArrayList;
 import java.util.Collection;
@@ -50,7 +50,7 @@ public class SideMenuController extends ParentController<DrawerLayout> implement
     @NonNull
 	@Override
 	protected DrawerLayout createView() {
-        DrawerLayout sideMenu = new DrawerLayout(getActivity());
+        DrawerLayout sideMenu = new SideMenu(getActivity());
         presenter.bindView(sideMenu);
         sideMenu.addDrawerListener(this);
         return sideMenu;

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

@@ -0,0 +1,21 @@
+package com.reactnativenavigation.views;
+
+import android.content.*;
+import android.support.annotation.*;
+import android.support.v4.widget.*;
+import android.util.*;
+
+public class SideMenu extends DrawerLayout {
+    public SideMenu(@NonNull Context context) {
+        super(context);
+    }
+
+    @Override
+    public void openDrawer(int gravity, boolean animate) {
+        try {
+            super.openDrawer(gravity, animate);
+        } catch (IllegalArgumentException e) {
+            Log.w("RNN", "Tried to open sideMenu, but it's not defined");
+        }
+    }
+}

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

@@ -293,6 +293,12 @@ public class BottomTabsControllerTest extends BaseTest {
         assertThat(uut.getSelectedIndex()).isOne();
     }
 
+    @Test
+    public void resolveCurrentOptions_returnsFirstTabIfInvokedBeforeViewIsCreated() {
+        uut = createBottomTabs();
+        assertThat(uut.getCurrentChild()).isEqualTo(tabs.get(0));
+    }
+
     @Test
     public void buttonPressInvokedOnCurrentTab() {
         uut.ensureViewIsCreated();

lib/ios/RNNSideMenuPresenter.m

@@ -18,6 +18,24 @@
 	[sideMenuController setAnimationVelocityRight:[options.sideMenu.right.animationVelocity getWithDefaultValue:840.0f]];
 	
 	[sideMenuController setAnimationType:[options.sideMenu.animationType getWithDefaultValue:nil]];
+	
+	if (options.sideMenu.left.width.hasValue) {
+		[sideMenuController side:MMDrawerSideLeft width:options.sideMenu.left.width.get];
+	}
+	
+	if (options.sideMenu.right.width.hasValue) {
+		[sideMenuController side:MMDrawerSideRight width:options.sideMenu.right.width.get];
+	}
+	
+	if (options.sideMenu.left.visible.hasValue) {
+		[sideMenuController side:MMDrawerSideLeft visible:options.sideMenu.left.visible.get];
+		[options.sideMenu.left.visible consume];
+	}
+	
+	if (options.sideMenu.right.visible.hasValue) {
+		[sideMenuController side:MMDrawerSideRight visible:options.sideMenu.right.visible.get];
+		[options.sideMenu.right.visible consume];
+	}
 }
 
 - (void)applyOptionsOnInit:(RNNNavigationOptions *)initialOptions {

package.json

@@ -57,6 +57,7 @@
     "lodash": "4.17.x",
     "prop-types": "15.x.x",
     "react-lifecycles-compat": "2.0.0",
+    "react-native-ui-lib": "^3.17.2",
     "tslib": "1.9.3"
   },
   "devDependencies": {
@@ -156,4 +157,4 @@
       }
     }
   }
-}
+}

playground/src/app.js

@@ -1,12 +1,16 @@
+// @ts-check
 const { Navigation } = require('react-native-navigation');
 const { registerScreens } = require('./screens');
 const { Platform } = require('react-native');
+const { setDefaultOptions } = require('./commons/Options')
+const testIDs = require('./testIDs');
+const Screens = require('./screens/Screens');
 
 if (Platform.OS === 'android') {
   alert = (title) => {
     Navigation.showOverlay({
       component: {
-        name: 'navigation.playground.alert',
+        name: Screens.Alert,
         passProps: {
           title
         },
@@ -26,147 +30,62 @@ if (Platform.OS === 'android') {
 function start() {
   registerScreens();
   Navigation.events().registerAppLaunchedListener(async () => {
-    Navigation.setDefaultOptions({
-      layout: {
-        componentBackgroundColor: '#e8e8e8',
-        orientation: ['portrait']
-      },
-      bottomTab: {
-        textColor: '#1B4C77',
-        selectedTextColor: '#0f0',
-        fontFamily: 'HelveticaNeue-Italic',
-        fontSize: 13
-      },
-      _animations: {
-        push: {
-          waitForRender: false,
-        }
-      },
-      animations: {
-        setRoot: {
-          alpha: {
-            from: 0,
-            to: 1,
-            duration: 300
-          },
-          waitForRender: true
-        },
-        _push: {
-          topBar: {
-            id: 'TEST',
-            alpha: {
-              from: 0,
-              to: 1,
-              duration: 500,
-              interpolation: 'accelerate'
-            }
-          },
-          bottomTabs: {
-            y: {
-              from: 1000,
-              to: 0,
-              duration: 500,
-              interpolation: 'decelerate',
-            },
-            alpha: {
-              from: 0,
-              to: 1,
-              duration: 500,
-              interpolation: 'decelerate'
-            }
-          },
-          content: {
-            y: {
-              from: 1000,
-              to: 0,
-              duration: 500,
-              interpolation: 'accelerate',
-            },
-            alpha: {
-              from: 0,
-              to: 1,
-              duration: 500,
-              interpolation: 'accelerate'
-            }
-          }
-        },
-        _pop: {
-          topBar: {
-            id: 'TEST',
-            alpha: {
-              from: 1,
-              to: 0,
-              duration: 500,
-              interpolation: 'accelerate'
-            }
-          },
-          bottomTabs: {
-            y: {
-              from: 0,
-              to: 100,
-              duration: 500,
-              interpolation: 'accelerate',
-            },
-            alpha: {
-              from: 1,
-              to: 0,
-              duration: 500,
-              interpolation: 'accelerate'
-            }
-          },
-          bottomTabs: {
-            y: {
-              from: 0,
-              to: 100,
-              duration: 500,
-              interpolation: 'decelerate',
-            },
-            alpha: {
-              from: 1,
-              to: 0,
-              duration: 500,
-              interpolation: 'decelerate'
-            }
-          },
-          content: {
-            y: {
-              from: 0,
-              to: 1000,
-              duration: 500,
-              interpolation: 'decelerate',
-            },
-            alpha: {
-              from: 1,
-              to: 0,
-              duration: 500,
-              interpolation: 'decelerate'
-            }
-          }
-        }
-      }
-    });
-
-    // await Navigation.showModal({
-    //   stack: {
-    //     children: [
-    //       {
-    //         component: {
-    //           name: 'navigation.playground.ModalScreen'
-    //         }
-    //       }
-    //     ]
-    //   }
-    // });
+    setDefaultOptions();
 
     Navigation.setRoot({
       root: {
-        stack: {
-          id: 'TEST',
+        bottomTabs: {
           children: [
             {
-              component: {
-                name: 'navigation.playground.WelcomeScreen'
-                // name: 'navigation.playground.CustomTransitionOrigin'
+              stack: {
+                children: [
+                  {
+                    component: {
+                      name: 'Layouts'
+                    }
+                  }
+                ],
+                options: {
+                  bottomTab: {
+                    text: 'Layouts',
+                    icon: require('../img/layouts.png'),
+                    testID: testIDs.LAYOUTS_TAB
+                  }
+                }
+              }
+            },
+            {
+              stack: {
+                children: [
+                  {
+                    component: {
+                      name: 'Options'
+                    }
+                  }
+                ],
+                options: {
+                  topBar: {
+                    title: {
+                      text: 'Default Title'
+                    }
+                  },
+                  bottomTab: {
+                    text: 'Options',
+                    icon: require('../img/options.png'),
+                    testID: testIDs.OPTIONS_TAB
+                  }
+                }
+              }
+            },
+            {
+              stack: {
+                children: [
+                  {
+                    component: {
+                      name: 'Navigation'
+                    }
+                  }
+                ]
               }
             }
           ]

playground/src/commons/Colors.js

@@ -0,0 +1,4 @@
+module.exports = {
+  background: '#e8e8e8',
+  primary: '#5847ff'
+}

playground/src/commons/Layouts.js

@@ -0,0 +1,16 @@
+const { isString, isArray } = require('lodash');
+
+const stack = (rawChildren, id) => {
+  const childrenArray = isArray(rawChildren) ? rawChildren : [rawChildren];
+  const children = childrenArray.map(child => component(child));
+  return { stack: { children, id } };
+}
+
+const component = (component, options) => {
+  return isString(component) ? { component: { name: component, options } } : component;
+}
+
+module.exports = {
+  stack,
+  component
+}

playground/src/commons/Options.js

@@ -0,0 +1,20 @@
+const { Navigation } = require('react-native-navigation');
+const Colors = require('./Colors');
+
+const setDefaultOptions = () => Navigation.setDefaultOptions({
+  layout: {
+    componentBackgroundColor: Colors.background,
+    orientation: ['portrait']
+  },
+  bottomTabs: {
+    titleDisplayMode: 'alwaysShow'
+  },
+  bottomTab: {
+    selectedIconColor: Colors.primary,
+    selectedTextColor: Colors.primary
+  }
+});
+
+module.exports = {
+  setDefaultOptions
+}

playground/src/components/Button.js

@@ -0,0 +1,9 @@
+const React = require('react');
+const {Button} = require('react-native-ui-lib');
+module.exports = (props) =>
+  <Button
+    {...props}
+    style={{
+      marginBottom: 8,
+    }}
+  />;

playground/src/components/Root.js

@@ -0,0 +1,30 @@
+const React = require('react');
+const { View, Text, StyleSheet } = require('react-native');
+
+module.exports = (props) =>
+  <View style={[props.style, styles.root]}>
+    {props.children}
+    {props.componentId && <View style={styles.footer}>
+      {props.footer && <Text style={styles.footerText}>{props.footer}</Text>}
+      <Text style={styles.footerText}>{`this.props.componentId = ${props.componentId}`}</Text>
+    </View>}
+  </View>;
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    padding: 16
+  },
+  footer: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center'
+  },
+  footerText: {
+    fontSize: 10,
+    color: '#888',
+    marginTop: 10
+  }
+});

playground/src/screens/BackHandlerScreen.js

@@ -1,104 +0,0 @@
-const React = require('react');
-const { Component } = require('react');
-const { Navigation } = require('react-native-navigation');
-const { View, Text, Button, BackHandler } = require('react-native');
-
-class BackHandlerScreen extends Component {
-  static options() {
-    return {
-      topBar: {
-        title: {
-          text: 'Back Handler',
-          color: 'black',
-          fontSize: 16
-        }
-      }
-    };
-  }
-
-  constructor(props) {
-    super(props);
-    this.backHandler = () => {
-      this.setState({
-        backPress: 'Back button pressed!'
-      });
-      return true;
-    };
-    this.state = {
-      backPress: ''
-    };
-  }
-
-  render() {
-    return (
-      <View style={styles.root}>
-        <Text style={styles.h1}>{`Back Handler Screen`}</Text>
-        <Text style={styles.h2}>{this.state.backPress}</Text>
-        <Button title='add back handler' onPress={() => this.addBackHandler()} />
-        <Button title='remove back handler' onPress={() => this.removeBackHandler()} />
-        <Button title='show single component modal' onPress={() => this.showModal()} />
-        <Button title='show modal with stack' onPress={() => this.showModalWitchStack()} />
-      </View>
-    );
-  }
-
-  addBackHandler() {
-    BackHandler.addEventListener('hardwareBackPress', this.backHandler);
-  }
-
-  removeBackHandler() {
-    BackHandler.removeEventListener('hardwareBackPress', this.backHandler);
-  }
-
-  showModal() {
-    Navigation.showModal({
-      component: {
-        name: 'navigation.playground.BackHandlerModalScreen'
-      }
-    });
-  }
-
-  showModalWitchStack() {
-    Navigation.showModal({
-      stack: {
-        children: [
-          {
-            component: {
-              name: 'navigation.playground.BackHandlerModalScreen'
-            }
-          },
-          {
-            component: {
-              name: 'navigation.playground.BackHandlerModalScreen'
-            }
-          }
-        ]
-      }
-    });
-  }
-
-  componentWillUnmount() {
-    BackHandler.removeEventListener('hardwareBackPress', this.backHandler);
-  }
-}
-
-const styles = {
-  root: {
-    flex: 1,
-    backgroundColor: 'white',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  h2: {
-    fontSize: 12,
-    textAlign: 'center',
-    margin: 10
-  },
-  footer: {
-    fontSize: 10,
-    color: '#888',
-    marginTop: 10
-  }
-};
-
-module.exports = BackHandlerScreen;

playground/src/screens/CustomDialog.js

@@ -1,84 +0,0 @@
-const React = require('react');
-const { PureComponent } = require('react');
-
-const { Text, Button, View, Alert, Platform } = require('react-native');
-const { Navigation } = require('react-native-navigation');
-
-const testIDs = require('../testIDs');
-
-class CustomDialog extends PureComponent {
-  static options() {
-    return {
-      statusBarBackgroundColor: 'green'
-    };
-  }
-
-  render() {
-    return (
-      <View style={styles.root}>
-        <Text style={styles.h1} testID={testIDs.DIALOG_HEADER}>Test view</Text>
-        <Button title='OK' testID={testIDs.OK_BUTTON} onPress={() => this.onCLickOk()} />
-        <Button title='Set Root' testID={testIDs.SET_ROOT_BUTTON} onPress={() => this.onCLickSetRoot()} />
-        <Button title='Set Intercept touch' testID={testIDs.SET_INTERCEPT_TOUCH} onPress={() => this.onCLickSetInterceptTouch()} />
-      </View>
-    );
-  }
-
-  didDisappear() {
-    if (Platform.OS === 'android') {
-      Alert.alert('Overlay disappeared');
-    }
-  }
-
-  onCLickOk() {
-    Navigation.dismissOverlay(this.props.componentId);
-  }
-
-  onCLickSetRoot() {
-    Navigation.setRoot({
-      root: {
-        component: {
-          name: 'navigation.playground.TextScreen'
-        }
-      }
-    });
-  }
-
-  onCLickSetInterceptTouch() {
-    Navigation.mergeOptions(this.props.componentId, {
-      overlay: {
-        interceptTouchOutside: false
-      }
-    });
-  }
-}
-
-const styles = {
-  root: {
-    backgroundColor: 'green',
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: 140,
-    bottom: 0,
-    position: 'absolute',
-    left: 0,
-    right: 0
-  },
-  h1: {
-    fontSize: 24,
-    textAlign: 'center',
-    margin: 10
-  },
-  h2: {
-    fontSize: 12,
-    textAlign: 'center',
-    margin: 10
-  },
-  footer: {
-    fontSize: 10,
-    color: '#888',
-    marginTop: 10
-  }
-};
-
-module.exports = CustomDialog;

playground/src/screens/FirstBottomTabScreen.js

@@ -0,0 +1,71 @@
+const React = require('react');
+const Root = require('../components/Root');
+const Button = require('../components/Button')
+const Navigation = require('./../services/Navigation');
+const Screens = require('./Screens');
+const { component } = require('../commons/Layouts');
+const {
+  SWITCH_TAB_BY_INDEX_BTN,
+  SWITCH_TAB_BY_COMPONENT_ID_BTN,
+  SET_BADGE_BTN,
+  CLEAR_BADGE_BTN,
+  HIDE_TABS_BTN,
+  SHOW_TABS_BTN,
+  HIDE_TABS_PUSH_BTN
+} = require('../testIDs')
+
+class FirstBottomTabScreen extends React.Component {
+  static options() {
+    return {
+      topBar: {
+        title: {
+          text: 'First Tab'
+        }
+      },
+      bottomTab: {
+        icon: require('../../img/whatshot.png'),
+        text: 'Tab 1'
+      }
+    };
+  }
+
+  render() {
+    return (
+      <Root componentId={this.props.componentId}>
+        <Button label='Switch Tab by Index' testID={SWITCH_TAB_BY_INDEX_BTN} onPress={this.switchTabByIndex} />
+        <Button label='Switch Tab by componentId' testID={SWITCH_TAB_BY_COMPONENT_ID_BTN} onPress={this.switchTabByComponentId} />
+        <Button label='Set Badge' testID={SET_BADGE_BTN} onPress={() => this.setBadge('NEW')} />
+        <Button label='Clear Badge' testID={CLEAR_BADGE_BTN} onPress={() => this.setBadge(null)} />
+        <Button label='Hide Tabs' testID={HIDE_TABS_BTN} onPress={() => this.toggleTabs(false)} />
+        <Button label='Show Tabs' testID={SHOW_TABS_BTN} onPress={() => this.toggleTabs(true)} />
+        <Button label='Hide Tabs on Push' testID={HIDE_TABS_PUSH_BTN} onPress={this.hideTabsOnPush} />
+      </Root>
+    );
+  }
+
+  switchTabByIndex = () => Navigation.mergeOptions(this, {
+    bottomTabs: {
+      currentTabIndex: 1
+    }
+  });
+
+  switchTabByComponentId = () => Navigation.mergeOptions(this, {
+    bottomTabs: {
+      currentTabId: 'SecondTab'
+    }
+  });
+
+  setBadge = (badge) => Navigation.mergeOptions(this, {
+    bottomTab: { badge }
+  });
+
+  toggleTabs = (visible) => Navigation.mergeOptions(this, {
+    bottomTabs: { visible }
+  });
+
+  hideTabsOnPush = () => Navigation.push(this, component(Screens.Pushed, {
+    bottomTabs: { visible: false }
+  }));
+}
+
+module.exports = FirstBottomTabScreen;

playground/src/screens/LayoutsScreen.js

@@ -0,0 +1,588 @@
+const React = require('react');
+const Root = require('../components/Root');
+const Button = require('../components/Button')
+const {
+  WELCOME_SCREEN_HEADER,
+  STACK_BTN,
+  BOTTOM_TABS_BTN,
+  BOTTOM_TABS,
+  SIDE_MENU_BTN
+} = require('../testIDs');
+const Screens = require('./Screens');
+const Navigation = require('../services/Navigation');
+const {stack, component} = require('../commons/Layouts');
+
+class LayoutsScreen extends React.Component {
+  static options() {
+    return {
+      topBar: {
+        testID: WELCOME_SCREEN_HEADER,
+        title: {
+          text: 'React Native Navigation'
+        }
+      }
+    };
+  }
+
+  render() {
+    return (
+      <Root componentId={this.props.componentId}>
+        <Button label='Stack' testID={STACK_BTN} onPress={this.stack} />
+        <Button label='BottomTabs' testID={BOTTOM_TABS_BTN} onPress={this.bottomTabs} />
+        <Button label='SideMenu' testID={SIDE_MENU_BTN} onPress={this.sideMenu} />
+      </Root>
+    );
+  }
+
+  stack = () => Navigation.showModal(Screens.StackScreen);
+
+  bottomTabs = () => Navigation.showModal({
+    bottomTabs: {
+      children: [
+        stack(Screens.FirstBottomTabsScreen),
+        stack({
+          component: {
+            name: Screens.SecondBottomTabsScreen
+          }
+        }, 'SecondTab'
+        )
+      ],
+      options: {
+        bottomTabs: {
+          testID: BOTTOM_TABS
+        }
+      }
+    }
+  });
+
+  sideMenu = () => Navigation.showModal({
+    sideMenu: {
+      left: {...component(Screens.SideMenuLeft)},
+      center: {
+        ...stack({
+          component: {
+            id: 'SideMenuCenter',
+            name: Screens.SideMenuCenter
+          }
+        })
+      },
+      right: {...component(Screens.SideMenuRight)}
+    }
+  });
+
+  onClickSwitchToTabs = () => {
+    Navigation.setRoot({
+      root: {
+        bottomTabs: {
+          id: 'BottomTabs',
+          children: [
+            {
+              stack: {
+                id: 'TAB1_ID',
+                children: [
+                  {
+                    component: {
+                      name: 'navigation.playground.TextScreen',
+                      passProps: {
+                        text: 'This is tab 1',
+                        myFunction: () => 'Hello from a function!'
+                      },
+                      options: {
+                        topBar: {
+                          visible: true,
+                          animate: false,
+                          title: {
+                            text: 'React Native Navigation!'
+                          }
+                        },
+                        bottomTab: {
+                          text: 'Tab 1',
+                          icon: require('../images/colored_tab_icon.png'),
+                          testID: testIDs.FIRST_TAB_BAR_BUTTON
+                        }
+                      }
+                    }
+                  }
+                ],
+                options: {
+                  topBar: {
+                    visible: false
+                  }
+                }
+              }
+            },
+            {
+              stack: {
+                children: [
+                  {
+                    component: {
+                      name: 'navigation.playground.TextScreen',
+                      passProps: {
+                        text: 'This is tab 2'
+                      }
+                    }
+                  }
+                ],
+                options: {
+                  bottomTab: {
+                    text: 'Tab 2',
+                    icon: require('../images/two.png'),
+                    iconColor: '#1B4C77',
+                    selectedIconColor: '#0f0',
+                    testID: testIDs.SECOND_TAB_BAR_BUTTON
+                  }
+                }
+              }
+            },
+            {
+              component: {
+                name: 'navigation.playground.TextScreen',
+                passProps: {
+                  text: 'This is tab 3',
+                  myFunction: () => 'Hello from a function!'
+                },
+                options: {
+                  topBar: {
+                    visible: true,
+                    animate: false
+                  },
+                  bottomTab: {
+                    text: 'Tab 3',
+                    icon: require('../images/one.png'),
+                    iconColor: '#1B4C77',
+                    selectedIconColor: '#0f0',
+                    selectedIcon: require('../images/one.png')
+                  }
+                }
+              }
+            }
+          ],
+          options: {
+            bottomTabs: {
+              titleDisplayMode: 'alwaysShow',
+              testID: testIDs.BOTTOM_TABS_ELEMENT
+            }
+          }
+        }
+      }
+    });
+  }
+
+  onClickSwitchToSideMenus = () => {
+    Navigation.setRoot({
+      root: {
+        sideMenu: {
+          left: {
+            component: {
+              name: 'navigation.playground.SideMenuScreen',
+              passProps: {
+                side: 'left'
+              }
+            }
+          },
+          center: {
+            bottomTabs: {
+              children: [
+                {
+                  stack: {
+                    id: 'tab1Stack',
+                    children: [
+                      {
+                        component: {
+                          name: 'navigation.playground.TextScreen',
+                          passProps: {
+                            text: 'This is a side menu center screen tab 1'
+                          }
+                        }
+                      }
+                    ],
+                    options: {
+                      bottomTab: {
+                        iconColor: 'red',
+                        textColor: 'red',
+                        selectedIconColor: 'purple',
+                        selectedTextColor: 'purple',
+                        text: 'Tab 1',
+                        icon: require('../images/one.png'),
+                        testID: testIDs.FIRST_TAB_BAR_BUTTON
+                      }
+                    }
+                  }
+                },
+                {
+                  stack: {
+                    children: [
+                      {
+                        component: {
+                          name: 'navigation.playground.TextScreen',
+                          passProps: {
+                            text: 'This is a side menu center screen tab 2'
+                          }
+                        }
+                      }
+                    ],
+                    options: {
+                      bottomTab: {
+                        text: 'Tab 2',
+                        icon: require('../images/two.png'),
+                        testID: testIDs.SECOND_TAB_BAR_BUTTON
+                      }
+                    }
+                  }
+                },
+                {
+                  stack: {
+                    children: [
+                      {
+                        component: {
+                          name: 'navigation.playground.TextScreen',
+                          passProps: {
+                            text: 'This is a side menu center screen tab 3'
+                          }
+                        }
+                      }
+                    ],
+                    options: {
+                      bottomTab: {
+                        text: 'Tab 3',
+                        icon: require('../images/three.png'),
+                        testID: testIDs.SECOND_TAB_BAR_BUTTON
+                      }
+                    }
+                  }
+                }
+              ],
+              options: {
+                bottomTab: {
+                  textColor: '#AED581',
+                  iconColor: '#AED581',
+                  selectedTextColor: '#90CAF9',
+                  selectedIconColor: '#90CAF9',
+                  fontFamily: 'HelveticaNeue-Italic',
+                  fontSize: 13
+                }
+              }
+            }
+          },
+          right: {
+            component: {
+              name: 'navigation.playground.SideMenuScreen',
+              passProps: {
+                side: 'right'
+              }
+            }
+          }
+        }
+      }
+    });
+  }
+
+  onClickPush = async () => {
+    await Navigation.push(this.props.componentId, {
+      component: {
+        name: 'navigation.playground.PushedScreen',
+        options: {
+          layout: {
+
+          },
+          topBar: {
+            title: {
+              text: 'pushed',
+              color: '#0000ff',
+              fontSize: 14
+            },
+            subtitle: {
+              text: 'subtitle',
+              fontSize: 10,
+              color: '#00ff00'
+            }
+          }
+        }
+      }
+    });
+  }
+
+  onClickPushContextScreen = async () => {
+    await Navigation.push(this.props.componentId, {
+      component: {
+        name: 'navigation.playground.ContextScreen',
+      }
+    })
+  }
+
+  onClickPushExternalComponent = async () => {
+    await Navigation.push(this.props.componentId, {
+      externalComponent: {
+        name: 'RNNCustomComponent',
+        passProps: {
+          text: 'This is an external component'
+        },
+        options: {
+          topBar: {
+            title: {
+              text: 'pushed'
+            },
+            visible: true,
+            testID: testIDs.TOP_BAR_ELEMENT
+          }
+        }
+      }
+    });
+  }
+
+  onClickLifecycleScreen = () => {
+    Navigation.push(this.props.componentId, {
+      component: {
+        name: 'navigation.playground.LifecycleScreen'
+      }
+    });
+  }
+
+  onClickShowStaticLifecycleOverlay = () => {
+    Navigation.showOverlay({
+      component: {
+        name: 'navigation.playground.StaticLifecycleOverlay',
+        options: {
+          overlay: {
+            interceptTouchOutside: false
+          }
+        }
+      }
+    });
+  }
+
+  onClickShowModal = async () => {
+    await Navigation.showModal({
+      stack: {
+        children: [
+          {
+            component: {
+              name: 'navigation.playground.ModalScreen'
+            }
+          }
+        ]
+      }
+    });
+  }
+
+  onClickShowRedbox = () => {
+    undefined();
+  }
+
+  onClickShowPreview = async ({reactTag}) => {
+    await Navigation.push(this.props.componentId, {
+      component: {
+        name: 'navigation.playground.PushedScreen',
+        options: {
+          animations: {
+            push: {
+              enabled: false
+            }
+          },
+          preview: reactTag ? {
+            reactTag,
+            height: 300,
+            commit: true,
+            actions: [{
+              id: 'action-cancel',
+              title: 'Cancel'
+            }, {
+              id: 'action-delete',
+              title: 'Delete',
+              actions: [{
+                id: 'action-delete-sure',
+                title: 'Are you sure?',
+                style: 'destructive'
+              }]
+            }]
+          } : undefined,
+        }
+      }
+    });
+  }
+
+  onClickPushOptionsScreen = () => {
+    Navigation.push(this.props.componentId, {
+      component: {
+        name: 'navigation.playground.OptionsScreen',
+        options: {
+          animations: {
+            push: {
+              enabled: false
+            }
+          }
+        }
+      }
+    });
+  }
+
+  onClickPushTopTabsScreen = () => {
+    Navigation.push(this.props.componentId, {
+      topTabs: {
+        children: [
+          {
+            component: {
+              name: 'navigation.playground.TopTabOptionsScreen',
+              passProps: {
+                title: 'Tab 1',
+                text: 'This is top tab 1'
+              },
+              options: {
+                topTab: {
+                  title: 'Tab 1'
+                },
+                topBar: {
+                  title: {
+                    text: 'One'
+                  }
+                }
+              }
+            }
+          },
+          {
+            component: {
+              name: 'navigation.playground.TopTabScreen',
+              passProps: {
+                title: 'Tab 2',
+                text: 'This is top tab 2'
+              },
+              options: {
+                topTab: {
+                  title: 'Tab 2',
+                  titleFontFamily: 'HelveticaNeue-Italic'
+                },
+                topBar: {
+                  title: {
+                    text: 'Two'
+                  }
+                }
+              }
+            }
+          },
+          {
+            component: {
+              name: 'navigation.playground.TopTabScreen',
+              passProps: {
+                title: 'Tab 3',
+                text: 'This is top tab 3'
+              },
+              options: {
+                topTab: {
+                  title: 'Tab 3'
+                },
+                topBar: {
+                  title: {
+                    text: 'Three'
+                  }
+                }
+              }
+            }
+          }
+        ],
+        options: {
+          topTabs: {
+            selectedTabColor: '#12766b',
+            unselectedTabColor: 'red',
+            fontSize: 6
+          }
+        }
+      }
+    });
+  }
+
+  onClickBackHandler = () => {
+    Navigation.push(this.props.componentId, {
+      component: {
+        name: 'navigation.playground.BackHandlerScreen'
+      }
+    });
+  }
+
+  onClickPushOrientationMenuScreen = () => {
+    Navigation.push(this.props.componentId, {
+      component: {
+        name: 'navigation.playground.OrientationSelectScreen'
+      }
+    });
+  }
+
+  onClickProvidedId = () => {
+    Navigation.showModal({
+      stack: {
+        children: [
+          {
+            component: {
+              name: 'navigation.playground.TextScreen',
+              id: 'my unique id'
+            }
+          }
+        ]
+      }
+    });
+    Navigation.mergeOptions('my unique id', {
+      topBar: {
+        title: {
+          text: 'User provided id'
+        }
+      }
+    });
+  }
+
+  onClickComplexLayout = () => {
+    Navigation.showModal({
+      component: {
+        name: 'navigation.playground.ComplexLayout'
+      }
+    });
+  }
+
+  onClickSplitView = () => {
+    Navigation.setRoot({
+      root: {
+        splitView: {
+          id: 'SPLITVIEW_ID',
+          master: {
+            stack: {
+              id: 'MASTER_ID',
+              children: [
+                {
+                  component: {
+                    name: 'navigation.playground.WelcomeScreen'
+                  },
+                },
+              ]
+            },
+          },
+          detail: {
+            stack: {
+              id: 'DETAILS_ID',
+              children: [
+                {
+                  component: {
+                    name: 'navigation.playground.WelcomeScreen'
+                  },
+                },
+              ]
+            }
+          },
+          options: {
+            displayMode: 'auto',
+            primaryEdge: 'leading',
+            minWidth: 150,
+            maxWidth: 300,
+          },
+        },
+      },
+    });
+  }
+
+  onClickSearchBar = () => {
+    Navigation.push(this.props.componentId, {
+      component: {
+        name: 'navigation.playground.SearchControllerScreen'
+      }
+    });
+  };
+}
+
+module.exports = LayoutsScreen;

playground/src/screens/LifecycleScreen.js

@@ -1,19 +1,31 @@
 const React = require('react');
-const { Component } = require('react');
+const Root = require('../components/Root');
+const Button = require('../components/Button');
+const Navigation = require('../services/Navigation');
+const Screens = require('./Screens');
+const {
+  PUSH_TO_TEST_DID_DISAPPEAR_BTN,
+  DISMISS_MODAL_BTN,
+  POP_BTN
+} = require('../testIDs');
 
-const { View, Text, Button } = require('react-native');
-
-const { Navigation } = require('react-native-navigation');
-const testIDs = require('../testIDs');
+class LifecycleScreen extends React.Component {
+  static options() {
+    return {
+      topBar: {
+        title: {
+          text: 'Lifecycle Screen'
+        }
+      }
+    }
+  }
+  state = {
+    text: 'nothing yet'
+  };
 
-class LifecycleScreen extends Component {
   constructor(props) {
     super(props);
-    this.onClickPush = this.onClickPush.bind(this);
-    this.state = {
-      text: 'nothing yet'
-    };
-    this.subscription = Navigation.events().bindComponent(this);
+    Navigation.events().bindComponent(this);
   }
 
   componentDidAppear() {
@@ -25,7 +37,6 @@ class LifecycleScreen extends Component {
   }
 
   componentWillUnmount() {
-    this.subscription.remove();
     alert('componentWillUnmount'); // eslint-disable-line no-alert
   }
 
@@ -35,47 +46,19 @@ class LifecycleScreen extends Component {
 
   render() {
     return (
-      <View style={styles.root}>
-        <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} />
-        {this.props.isModal ?
-          (<Button title='Dismiss' testID={testIDs.DISMISS_MODAL_BUTTON} onPress={() => this.onClickDismiss()} />)
-          : (<Button title='Pop' testID={testIDs.POP_BUTTON} onPress={() => this.onClickPop()} />)}
-        <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
-      </View>
+      <Root componentId={this.props.componentId} footer={this.state.text}>
+        <Button label='Push to test didDisappear' testID={PUSH_TO_TEST_DID_DISAPPEAR_BTN} onPress={this.push} />
+        {this.renderCloseButton()}
+      </Root>
     );
   }
 
-  onClickPush() {
-    Navigation.push(this.props.componentId, { component: { name: 'navigation.playground.TextScreen' } });
-  }
-
-  onClickPop() {
-    Navigation.pop(this.props.componentId);
-  }
+  renderCloseButton = () => this.props.isModal ?
+        <Button label='Dismiss' testID={DISMISS_MODAL_BTN} onPress={this.dismiss} /> :
+        <Button label='Pop' testID={POP_BTN} onPress={this.pop} />;
 
-  onClickDismiss() {
-    Navigation.dismissModal(this.props.componentId);
-  }
+  push = () => Navigation.push(this, Screens.Pushed);
+  pop = () => Navigation.pop(this);
+  dismiss = () => Navigation.dismissModal(this);
 }
 module.exports = LifecycleScreen;
-
-const styles = {
-  root: {
-    flexGrow: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#f5fcff'
-  },
-  h1: {
-    fontSize: 24,
-    textAlign: 'center',
-    margin: 10
-  },
-  footer: {
-    fontSize: 10,
-    color: '#888',
-    marginTop: 10
-  }
-};

playground/src/screens/ModalScreen.js

@@ -1,14 +1,23 @@
 const _ = require('lodash');
-
 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 ModalScreen extends Component {
+const Root = require('../components/Root');
+const Button = require('../components/Button')
+const Navigation = require('./../services/Navigation');
+const Screens = require('./Screens');
+const {
+  PUSH_BTN,
+  MODAL_SCREEN_HEADER,
+  MODAL_BTN,
+  DISMISS_MODAL_BTN,
+  DISMISS_UNKNOWN_MODAL_BTN,
+  MODAL_LIFECYCLE_BTN,
+  DISMISS_PREVIOUS_MODAL_BTN,
+  DISMISS_ALL_PREVIOUS_MODAL_BTN,
+  DISMISS_ALL_MODALS_BTN,
+  DISMISS_FIRST_MODAL_BTN,
+} = require('../testIDs');
+
+class ModalScreen extends React.Component {
   static options() {
     return {
       statusBar: {
@@ -16,181 +25,66 @@ class ModalScreen extends Component {
         drawBehind: true,
         backgroundColor: 'transparent'
       },
-      layout: {
-        orientation: ['portrait'],
-        backgroundColor: '#f5fcff'
-      },
-      _animations: {
-        showModal: {
-          waitForRender: true
+      topBar: {
+        testID: MODAL_SCREEN_HEADER,
+        title: {
+          text: 'Modal'
         }
       }
     };
   }
 
-  constructor(props) {
-    super(props);
-    // this.simulateLongRunningTask();
-    this.onClickShowModal = this.onClickShowModal.bind(this);
-    this.onClickDismissModal = this.onClickDismissModal.bind(this);
-    this.onClickDismissPreviousModal = this.onClickDismissPreviousModal.bind(this);
-    this.onClickDismissUnknownModal = this.onClickDismissUnknownModal.bind(this);
-    this.onClickDismissAllPreviousModals = this.onClickDismissAllPreviousModals.bind(this);
-    this.onClickDismissFirstInStack = this.onClickDismissFirstInStack.bind(this);
-    this.onClickDismissAllModals = this.onClickDismissAllModals.bind(this);
-    this.onClickPushScreen = this.onClickPushScreen.bind(this);
-    this.onShowModalWithDeepStack = this.onShowModalWithDeepStack.bind(this);
-    this.onClickModalLifecycle = this.onClickModalLifecycle.bind(this);
-  }
-
-  simulateLongRunningTask = () => {
-    // tslint:disable-next-line
-    for (let i = 0; i < Math.pow(2, 25); i++);
-  }
-
   render() {
     return (
-      <View style={styles.root}>
-        <Text style={styles.h1} testID={testIDs.MODAL_SCREEN}>{`Modal Screen`}</Text>
-        <Text style={styles.footer}>{`Modal Stack Position: ${this.getModalPosition()}`}</Text>
-        <Button title='Show Modal' testID={testIDs.SHOW_MODAL_BUTTON} onPress={this.onClickShowModal} />
-        <Button title='Dismiss Modal' testID={testIDs.DISMISS_MODAL_BUTTON} onPress={this.onClickDismissModal} />
-        <Button title='Dismiss Unknown Modal' testID={testIDs.DISMISS_UNKNOWN_MODAL_BUTTON} onPress={this.onClickDismissUnknownModal} />
-        <Button title='Dismiss All Modals' testID={testIDs.DISMISS_ALL_MODALS_BUTTON} onPress={this.onClickDismissAllModals} />
-        <Button title='Test Modal Lifecycle' testID={testIDs.MODAL_LIFECYCLE_BUTTON} onPress={this.onClickModalLifecycle} />
-        <Button title='Push screen' testID={testIDs.PUSH_BUTTON} onPress={this.onClickPushScreen} />
-        <Button title='Show Modal With Stack' testID={testIDs.MODAL_WITH_STACK_BUTTON} onPress={this.onShowModalWithDeepStack} />
-        {this.getPreviousModalId() ? (<Button title='Dismiss Previous Modal' testID={testIDs.DISMISS_PREVIOUS_MODAL_BUTTON}
-          onPress={this.onClickDismissPreviousModal} />) : undefined}
-        {this.props.previousModalIds ? (<Button title='Dismiss ALL Previous Modals' testID={testIDs.DISMISS_ALL_PREVIOUS_MODAL_BUTTON}
-          onPress={this.onClickDismissAllPreviousModals} />) : undefined}
-        {this.props.previousModalIds ? (<Button title='Dismiss First In Stack' testID={testIDs.DISMISS_FIRST_MODAL_BUTTON}
-          onPress={this.onClickDismissFirstInStack} />) : undefined}
-        <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
-      </View>
+      <Root componentId={this.props.componentId} footer={`Modal Stack Position: ${this.getModalPosition()}`}>
+        <Button label='Show Modal' testID={MODAL_BTN} onPress={this.showModal} />
+        <Button label='Dismiss Modal' testID={DISMISS_MODAL_BTN} onPress={this.dismissModal} />
+        <Button label='Dismiss Unknown Modal' testID={DISMISS_UNKNOWN_MODAL_BTN} onPress={this.dismissUnknownModal} />
+        <Button label='Modal Lifecycle' testID={MODAL_LIFECYCLE_BTN} onPress={this.modalLifecycle} />
+        {this.getPreviousModalId() && (<Button label='Dismiss Previous Modal' testID={DISMISS_PREVIOUS_MODAL_BTN} onPress={this.dismissPreviousModal} />)}
+        {this.props.previousModalIds && (<Button label='Dismiss All Previous Modals' testID={DISMISS_ALL_PREVIOUS_MODAL_BTN} onPress={this.dismissAllPreviousModals} />)}
+        <Button label='Dismiss All Modals' testID={DISMISS_ALL_MODALS_BTN} onPress={this.dismissAllModals} />
+        {this.props.previousModalIds && (<Button label='Dismiss First Modal' testID={DISMISS_FIRST_MODAL_BTN} onPress={this.dismissFirstModal} />)}
+        <Button label='Push screen' testID={PUSH_BTN} onPress={this.pushScreen} />
+      </Root>
     );
   }
 
-  onClickShowModal() {
+  showModal = () => {
     Navigation.showModal({
       component: {
-        name: 'navigation.playground.ModalScreen',
+        name: Screens.Modal,
         passProps: {
           modalPosition: this.getModalPosition() + 1,
           previousModalIds: _.concat([], this.props.previousModalIds || [], this.props.componentId)
-        },
-        options: {
-          animated: false
         }
       }
     });
   }
 
-  async onClickDismissModal() {
-    await Navigation.dismissModal(this.props.componentId);
-  }
+  dismissModal = async () => await Navigation.dismissModal(this.props.componentId);
 
-  onClickDismissPreviousModal() {
-    Navigation.dismissModal(this.getPreviousModalId());
-  }
+  dismissPreviousModal = () => Navigation.dismissModal(this.getPreviousModalId());
 
-  onClickDismissUnknownModal() {
-    Navigation.dismissModal('unknown');
-  }
+  dismissUnknownModal = () => Navigation.dismissModal('unknown');
 
-  onClickDismissAllPreviousModals() {
-    _.forEach(this.props.previousModalIds, (id) => Navigation.dismissModal(id));
-  }
+  dismissAllPreviousModals = () => _.forEach(this.props.previousModalIds, (id) => Navigation.dismissModal(id));
 
-  onClickDismissFirstInStack() {
-    Navigation.dismissModal(_.head(this.props.previousModalIds));
-  }
+  dismissFirstModal = () => Navigation.dismissModal(_.head(this.props.previousModalIds));
 
-  onClickDismissAllModals() {
-    Navigation.dismissAllModals();
-  }
-
-  onClickModalLifecycle() {
-    Navigation.showModal({
-      component: {
-        name: 'navigation.playground.LifecycleScreen',
-        passProps: {
-          isModal: true,
-        },
-        options: {
-          animated: false
-        }
-      }
-    });
-  }
+  dismissAllModals = () => Navigation.dismissAllModals();
 
-  onClickPushScreen() {
-    Navigation.push(this.props.componentId, {
-      component: {
-        name: `navigation.playground.PushedScreen`,
-        passProps: {
-          text: 'Pushed from modal'
-        }
-      }
-    });
-  }
+  modalLifecycle = () => Navigation.showModal({
+    component: {
+      name: Screens.Lifecycle,
+      passProps: { isModal: true }
+    }
+  });
 
-  onShowModalWithDeepStack() {
-    Navigation.showModal({
-      stack: {
-        children: [
-          {
-            component: {
-              name: `navigation.playground.TextScreen`,
-              passProps: {
-                text: 'Screen 1'
-              }
-            }
-          },
-          {
-            component: {
-              name: `navigation.playground.TextScreen`,
-              passProps: {
-                text: 'Screen 2'
-              }
-            }
-          }
-        ]
-      }
-    });
-  }
+  pushScreen = () => Navigation.push(this, Screens.Pushed);
 
-  getModalPosition() {
-    return (this.props.modalPosition || 1);
-  }
+  getModalPosition = () => this.props.modalPosition || 1;
 
-  getPreviousModalId() {
-    return _.last(this.props.previousModalIds);
-  }
+  getPreviousModalId = () => _.last(this.props.previousModalIds);
 }
-
-const styles = {
-  root: {
-    flexGrow: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#f5fcff'
-  },
-  h1: {
-    fontSize: 24,
-    textAlign: 'center',
-    margin: 10
-  },
-  h2: {
-    fontSize: 12,
-    textAlign: 'center',
-    margin: 10
-  },
-  footer: {
-    fontSize: 10,
-    color: '#888',
-    marginTop: 10
-  }
-};
-
 module.exports = ModalScreen;

playground/src/screens/NavigationScreen.js

@@ -0,0 +1,50 @@
+const React = require('react');
+const Root = require('../components/Root');
+const Button = require('../components/Button')
+const Navigation = require('./../services/Navigation');
+const {
+  NAVIGATION_TAB,
+  MODAL_BTN,
+  OVERLAY_BTN,
+  EXTERNAL_COMP_BTN,
+  SHOW_STATIC_EVENTS_SCREEN,
+  SHOW_ORIENTATION_SCREEN
+} = require('../testIDs');
+const Screens = require('./Screens');
+
+class NavigationScreen extends React.Component {
+  static options() {
+    return {
+      topBar: {
+        title: {
+          text: 'Navigation'
+        }
+      },
+      bottomTab: {
+        text: 'Navigation',
+        icon: require('../../img/navigation.png'),
+        testID: NAVIGATION_TAB
+      }
+    };
+  }
+
+  render() {
+    return (
+      <Root componentId={this.props.componentId}>
+        <Button label='Modal' testID={MODAL_BTN} onPress={this.showModal} />
+        <Button label='Overlay' testID={OVERLAY_BTN} onPress={this.showOverlay} />
+        <Button label='External Component' testID={EXTERNAL_COMP_BTN} onPress={this.externalComponent} />
+        <Button label='Static Events' testID={SHOW_STATIC_EVENTS_SCREEN} onPress={this.pushStaticEventsScreen} />
+        <Button label='Orientation' testID={SHOW_ORIENTATION_SCREEN} onPress={this.orientation} />
+      </Root>
+    );
+  }
+
+  showModal = () => Navigation.showModal(Screens.Modal);
+  showOverlay = () => Navigation.showModal(Screens.Overlay);
+  externalComponent = () => Navigation.showModal(Screens.ExternalComponent);
+  pushStaticEventsScreen = () => Navigation.showModal(Screens.EventsScreen)
+  orientation = () => Navigation.showModal(Screens.Orientation);
+}
+
+module.exports = NavigationScreen;

playground/src/screens/OptionsScreen.js

@@ -1,118 +1,57 @@
 const React = require('react');
 const { Component } = require('react');
+const Root = require('../components/Root');
+const Button = require('../components/Button')
+const Navigation = require('../services/Navigation');
+const Screens = require('./Screens');
+const Colors = require('../commons/Colors');
+const {
+  CHANGE_TITLE_BTN,
+  HIDE_TOP_BAR_BTN,
+  SHOW_TOP_BAR_BTN,
+  TOP_BAR,
+  ROUND_BUTTON,
+  BUTTON_ONE,
+  LEFT_BUTTON,
+  PUSH_BTN,
+  HIDE_TOPBAR_DEFAULT_OPTIONS,
+  SHOW_YELLOW_BOX_BTN,
+  SET_REACT_TITLE_VIEW
+} = require('../testIDs');
 
-const { View, Text, Button, Platform, StatusBar } = require('react-native');
-
-const { Navigation } = require('react-native-navigation');
-const testIDs = require('../testIDs');
-
-const BUTTON_ONE = 'buttonOne';
-const BUTTON_TWO = 'buttonTwo';
-const CUSTOM_BUTTON = 'customButton';
-const CUSTOM_BUTTON2 = 'customButton2';
-const BUTTON_LEFT = 'buttonLeft';
-const FAB = 'fab';
-const TOPBAR_HEIGHT = 67;
-
-class OptionsScreen extends Component {
-  constructor(props) {
-    super(props);
-    Navigation.events().bindComponent(this);
-  }
-
+class Options extends Component {
   static options() {
     return {
-      statusBar: {
-        style: 'dark',
-        backgroundColor: '#EDEDED'
-      },
       topBar: {
+        visible: true,
+        testID: TOP_BAR,
         title: {
-          text: 'Static Title',
-          _height: TOPBAR_HEIGHT,
-          color: 'black',
-          fontSize: 16,
-          alignment: 'center',
-          fontFamily: 'HelveticaNeue-Italic'
-        },
-        largeTitle: {
-          visible: false
-        },
-        subtitle: {
-          text: 'Static Subtitle',
-          color: 'red',
-          fontFamily: 'HelveticaNeue-Italic',
-          alignment: 'center'
-        },
-        background: {
-          component: {
-            name: 'TopBarBackground',
-            passProps: {
-              color: '#bbdefb'
-            }
-          }
+          text: 'Styling Options'
         },
-        ...Platform.select({
-          android: { drawBehind: true },
-          ios: { drawBehind: false, }
-        }),
-        _height: TOPBAR_HEIGHT,
-        visible: true,
-        testID: testIDs.TOP_BAR_ELEMENT,
-        borderColor: 'red',
-        borderHeight: 1,
         rightButtons: [
-          // {
-          //   id: CUSTOM_BUTTON,
-          //   testID: CUSTOM_BUTTON,
-          //   component: 'CustomTextButton'
-          // },
           {
-            id: CUSTOM_BUTTON2,
-            testID: CUSTOM_BUTTON2,
+            id: 'ONE',
+            testID: BUTTON_ONE,
+            text: 'One',
+            color: Colors.primary
+          },
+          {
+            id: 'ROUND',
+            testID: ROUND_BUTTON,
             component: {
-              name: 'CustomRoundedButton',
+              name: Screens.RoundButton,
               passProps: {
                 title: 'Two'
               }
             }
-          },
-          {
-            id: BUTTON_ONE,
-            testID: BUTTON_ONE,
-            text: 'One',
-            fontFamily: 'HelveticaNeue-Italic',
-            fontSize: 28,
-            color: 'red'
           }
         ],
-        leftButtons: {
-          id: BUTTON_LEFT,
-          testID: BUTTON_LEFT,
-          icon: require('../../img/navicon_add.png'),
-          text: 'Left',
-          color: 'purple'
-        }
-      },
-      fab: {
-        id: FAB,
-        backgroundColor: 'orange',
-        clickColor: 'orange',
-        rippleColor: 'red',
-        alignHorizontally: 'left',
-        actions: [
-          {
-            id: 'fab1',
-            backgroundColor: 'blue',
-            clickColor: 'blue',
-            rippleColor: 'aquamarine',
-          },
+        leftButtons: [
           {
-            id: 'fab2',
-            backgroundColor: 'blueviolet',
-            clickColor: 'blueviolet',
-            size: 'mini',
-            rippleColor: 'aquamarine',
+            id: 'LEFT',
+            testID: LEFT_BUTTON,
+            icon: require('../../img/clear.png'),
+            color: Colors.primary
           }
         ]
       }
@@ -121,228 +60,621 @@ class OptionsScreen extends Component {
 
   render() {
     return (
-      <View style={styles.root}>
-        <View style={{ width: 2, height: 2, backgroundColor: 'red', alignSelf: 'center' }} />
-        <Text style={styles.h1} testID={testIDs.OPTIONS_SCREEN_HEADER}>{`Options Screen`}</Text>
-        <Button title='Dynamic Options' testID={testIDs.DYNAMIC_OPTIONS_BUTTON} onPress={this.onClickDynamicOptions} />
-        <Button title='Show Top Bar' testID={testIDs.SHOW_TOP_BAR_BUTTON} onPress={this.onClickShowTopBar} />
-        <Button title='Hide Top Bar' testID={testIDs.HIDE_TOP_BAR_BUTTON} onPress={this.onClickHideTopBar} />
-        <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' testID={testIDs.CUSTOM_TRANSITION_BUTTON} onPress={this.onClickCustomTransition} />
-        {Platform.OS === 'android' && <Button title='Hide fab' testID={testIDs.HIDE_FAB} onPress={this.onClickFab} />}
-        <Button title='Show overlay' testID={testIDs.SHOW_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(true)} />
-        <Button title='Show touch through overlay' testID={testIDs.SHOW_TOUCH_THROUGH_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(false)} />
-        <Button title='Push Default Options Screen' testID={testIDs.PUSH_DEFAULT_OPTIONS_BUTTON} onPress={this.onClickPushDefaultOptionsScreen} />
-        <Button title='Show TopBar react view' testID={testIDs.SHOW_TOPBAR_REACT_VIEW} onPress={this.onShowTopBarReactView} />
-        {Platform.OS === 'android' && <Button title='Push' testID={testIDs.PUSH_BUTTON} onPress={this.onPush} />}
-        <Button title='Show Yellow Box' testID={testIDs.SHOW_YELLOW_BOX} onPress={() => console.warn('Yellow Box')} />
-        <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
-      </View>
+      <Root componentId={this.props.componentId}>
+        <Button label='Change title' testID={CHANGE_TITLE_BTN} onPress={this.changeTitle} />
+        <Button label='Hide TopBar' testID={HIDE_TOP_BAR_BTN} onPress={this.hideTopBar} />
+        <Button label='Show TopBar' testID={SHOW_TOP_BAR_BTN} onPress={this.showTopBar} />
+        <Button label='Push' testID={PUSH_BTN} onPress={this.push} />
+        <Button label='Hide TopBar in DefaultOptions' testID={HIDE_TOPBAR_DEFAULT_OPTIONS} onPress={this.hideTopBarInDefaultOptions} />
+        <Button label='Set React Title View' testID={SET_REACT_TITLE_VIEW} onPress={this.setReactTitleView} />
+        <Button label='Show Yellow Box' testID={SHOW_YELLOW_BOX_BTN} onPress={() => console.warn('Yellow Box')} />
+      </Root>
     );
   }
 
-  navigationButtonPressed({buttonId}) {
-    if (buttonId === BUTTON_ONE) {
-      Navigation.mergeOptions(this.props.componentId, {
-        topBar: {
-          rightButtons: [{
-            id: BUTTON_TWO,
-            testID: BUTTON_TWO,
-            text: 'Two',
-            icon: require('../../img/navicon_add.png'),
-            disableIconTint: true,
-            showAsAction: 'ifRoom',
-            color: 'green',
-            fontSize: 28,
-            fontWeight: '800'
-          }],
-          leftButtons: []
+  changeTitle = () => Navigation.mergeOptions(this, {
+    topBar: {
+      title: {
+        text: 'Title Changed'
+      }
+    }
+  });
+
+  hideTopBar = () => Navigation.mergeOptions(this, {
+    topBar: {
+      visible: false
+    }
+  });
+
+  showTopBar = () => Navigation.mergeOptions(this, {
+    topBar: {
+      visible: true
+    }
+  });
+
+  push = () => Navigation.push(this, Screens.Pushed);
+
+  hideTopBarInDefaultOptions = () => {
+    Navigation.setDefaultOptions({
+      topBar: {
+        visible: false,
+        title: {
+          text: 'Default Title'
         }
-      });
-    } else if (buttonId === BUTTON_TWO) {
-      Navigation.mergeOptions(this.props.componentId, {
-        topBar: {
-          rightButtons: [{
-            id: BUTTON_ONE,
-            testID: BUTTON_ONE,
-            text: 'One',
-            color: 'red'
-          }],
-          leftButtons: [{
-            id: BUTTON_LEFT,
-            testID: BUTTON_LEFT,
-            icon: require('../../img/navicon_add.png'),
-            text: 'Left',
-            color: 'purple'
-          }]
+      }
+    });
+  }
+
+  setReactTitleView = () => Navigation.mergeOptions(this, {
+    topBar: {
+      title: {
+        component: {
+          name: Screens.ReactTitleView,
+          alignment: 'center'
         }
-      });
-    } else if (buttonId === BUTTON_LEFT) {
-      Navigation.pop(this.props.componentId);
+      }
     }
+  });
+
+  //       <Button title='Switch to tab based app' testID={testIDs.TAB_BASED_APP_BUTTON} onPress={this.onClickSwitchToTabs} />
+  //       <Button title='Switch to app with side menus' testID={testIDs.TAB_BASED_APP_SIDE_BUTTON} onPress={this.onClickSwitchToSideMenus} />
+  //       {Platform.OS === 'ios' && <Button title='Switch to split view based app' testID={testIDs.SPLIT_VIEW_BUTTON} onPress={this.onClickSplitView} />}
+  //       <Button title='Push Lifecycle Screen' testID={testIDs.PUSH_LIFECYCLE_BUTTON} onPress={this.onClickLifecycleScreen} />
+  //       <Button title='Static Lifecycle Events' testID={testIDs.PUSH_STATIC_LIFECYCLE_BUTTON} onPress={this.onClickShowStaticLifecycleOverlay} />
+  //       <Button title='Push' testID={testIDs.PUSH_BUTTON} onPress={this.onClickPush} />
+  //       {false && <Button title='Push Context Screen' testID={testIDs.PUSH_CONTEXT_SCREEN_BUTTON} onPress={this.onClickPushContextScreen} />}
+  //       {Platform.OS === 'ios' && <Button testID={testIDs.SHOW_PREVIEW_BUTTON} onPress={this.onClickPush} onPressIn={this.onClickShowPreview} title='Push Preview' />}
+  //       <Button title='Push Options Screen' testID={testIDs.PUSH_OPTIONS_BUTTON} onPress={this.onClickPushOptionsScreen} />
+  //       <Button title='Push External Component' testID={testIDs.PUSH_EXTERNAL_COMPONENT_BUTTON} onPress={this.onClickPushExternalComponent} />
+  //       {Platform.OS === 'android' && <Button title='Push Top Tabs screen' testID={testIDs.PUSH_TOP_TABS_BUTTON} onPress={this.onClickPushTopTabsScreen} />}
+  //       {Platform.OS === 'android' && <Button title='Back Handler' testID={testIDs.BACK_HANDLER_BUTTON} onPress={this.onClickBackHandler} />}
+  //       <Button title='Show Modal' testID={testIDs.SHOW_MODAL_BUTTON} onPress={this.onClickShowModal} />
+  //       <Button title='Show Redbox' testID={testIDs.SHOW_REDBOX_BUTTON} onPress={this.onClickShowRedbox} />
+  //       <Button title='Orientation' testID={testIDs.ORIENTATION_BUTTON} onPress={this.onClickPushOrientationMenuScreen} />
+  //       <Button title='Provided Id' testID={testIDs.PROVIDED_ID} onPress={this.onClickProvidedId} />
+  //       <Button title='Complex Layout' testID={testIDs.COMPLEX_LAYOUT_BUTTON} onPress={this.onClickComplexLayout} />
+  //       <Button title='Push SearchBar' testID={testIDs.SHOW_TOPBAR_SEARCHBAR} onPress={this.onClickSearchBar} />
+  //       <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
+
+  onClickSwitchToTabs = () => {
+    Navigation.setRoot({
+      root: {
+        bottomTabs: {
+          id: 'BottomTabs',
+          children: [
+            {
+              stack: {
+                id: 'TAB1_ID',
+                children: [
+                  {
+                    component: {
+                      name: 'navigation.playground.TextScreen',
+                      passProps: {
+                        text: 'This is tab 1',
+                        myFunction: () => 'Hello from a function!'
+                      },
+                      options: {
+                        topBar: {
+                          visible: true,
+                          animate: false,
+                          title: {
+                            text: 'React Native Navigation!'
+                          }
+                        },
+                        bottomTab: {
+                          text: 'Tab 1',
+                          icon: require('../images/colored_tab_icon.png'),
+                          testID: testIDs.FIRST_TAB_BAR_BUTTON
+                        }
+                      }
+                    }
+                  }
+                ],
+                options: {
+                  topBar: {
+                    visible: false
+                  }
+                }
+              }
+            },
+            {
+              stack: {
+                children: [
+                  {
+                    component: {
+                      name: 'navigation.playground.TextScreen',
+                      passProps: {
+                        text: 'This is tab 2'
+                      }
+                    }
+                  }
+                ],
+                options: {
+                  bottomTab: {
+                    text: 'Tab 2',
+                    icon: require('../images/two.png'),
+                    iconColor: '#1B4C77',
+                    selectedIconColor: '#0f0',
+                    testID: testIDs.SECOND_TAB_BAR_BUTTON
+                  }
+                }
+              }
+            },
+            {
+              component: {
+                name: 'navigation.playground.TextScreen',
+                passProps: {
+                  text: 'This is tab 3',
+                  myFunction: () => 'Hello from a function!'
+                },
+                options: {
+                  topBar: {
+                    visible: true,
+                    animate: false
+                  },
+                  bottomTab: {
+                    text: 'Tab 3',
+                    icon: require('../images/one.png'),
+                    iconColor: '#1B4C77',
+                    selectedIconColor: '#0f0',
+                    selectedIcon: require('../images/one.png')
+                  }
+                }
+              }
+            }
+          ],
+          options: {
+            bottomTabs: {
+              titleDisplayMode: 'alwaysShow',
+              testID: testIDs.BOTTOM_TABS_ELEMENT
+            }
+          }
+        }
+      }
+    });
   }
 
-  onClickDynamicOptions = () => {
-    Navigation.mergeOptions(this.props.componentId, {
-      topBar: {
-        title: {
-          text: 'Dynamic Title',
-          color: '#00FFFF',
-          fontSize: 20,
-          fontFamily: 'HelveticaNeue-CondensedBold'
-        },
-        largeTitle: {
-          visible: false
+  onClickSwitchToSideMenus = () => {
+    Navigation.setRoot({
+      root: {
+        sideMenu: {
+          left: {
+            component: {
+              name: 'navigation.playground.SideMenuScreen',
+              passProps: {
+                side: 'left'
+              }
+            }
+          },
+          center: {
+            bottomTabs: {
+              children: [
+                {
+                  stack: {
+                    id: 'tab1Stack',
+                    children: [
+                      {
+                        component: {
+                          name: 'navigation.playground.TextScreen',
+                          passProps: {
+                            text: 'This is a side menu center screen tab 1'
+                          },
+                          // options: {
+                          //   bottomTab: {
+                          //     iconColor: 'red',
+                          //     textColor: 'red',
+                          //     selectedIconColor: 'purple',
+                          //     selectedTextColor: 'purple',
+                          //   }
+                          // }
+                        }
+                      }
+                    ],
+                    options: {
+                      bottomTab: {
+                        iconColor: 'red',
+                        textColor: 'red',
+                        selectedIconColor: 'purple',
+                        selectedTextColor: 'purple',
+                        text: 'Tab 1',
+                        icon: require('../images/one.png'),
+                        testID: testIDs.FIRST_TAB_BAR_BUTTON
+                      }
+                    }
+                  }
+                },
+                {
+                  stack: {
+                    children: [
+                      {
+                        component: {
+                          name: 'navigation.playground.TextScreen',
+                          passProps: {
+                            text: 'This is a side menu center screen tab 2'
+                          }
+                        }
+                      }
+                    ],
+                    options: {
+                      bottomTab: {
+                        text: 'Tab 2',
+                        icon: require('../images/two.png'),
+                        testID: testIDs.SECOND_TAB_BAR_BUTTON
+                      }
+                    }
+                  }
+                },
+                {
+                  stack: {
+                    children: [
+                      {
+                        component: {
+                          name: 'navigation.playground.TextScreen',
+                          passProps: {
+                            text: 'This is a side menu center screen tab 3'
+                          }
+                        }
+                      }
+                    ],
+                    options: {
+                      bottomTab: {
+                        text: 'Tab 3',
+                        icon: require('../images/three.png'),
+                        testID: testIDs.SECOND_TAB_BAR_BUTTON
+                      }
+                    }
+                  }
+                }
+              ],
+              options: {
+                bottomTab: {
+                  textColor: '#AED581',
+                  iconColor: '#AED581',
+                  selectedTextColor: '#90CAF9',
+                  selectedIconColor: '#90CAF9',
+                  fontFamily: 'HelveticaNeue-Italic',
+                  fontSize: 13
+                }
+              }
+            }
+          },
+          right: {
+            component: {
+              name: 'navigation.playground.SideMenuScreen',
+              passProps: {
+                side: 'right'
+              }
+            }
+          }
         }
       }
     });
   }
 
-  onClickScrollViewScreen = () => {
-    Navigation.push(this.props.componentId, {
+  onClickPush = async () => {
+    await Navigation.push(this.props.componentId, {
       component: {
-        name: 'navigation.playground.ScrollViewScreen'
+        name: 'navigation.playground.PushedScreen',
+        options: {
+          layout: {
+
+          },
+          topBar: {
+            title: {
+              text: 'pushed',
+              color: '#0000ff',
+              fontSize: 14
+            },
+            subtitle: {
+              text: 'subtitle',
+              fontSize: 10,
+              color: '#00ff00'
+            }
+          }
+        }
       }
     });
   }
 
-  onClickCustomTransition = () => {
-    Navigation.push(this.props.componentId, {
+  onClickPushContextScreen = async () => {
+    await Navigation.push(this.props.componentId, {
       component: {
-        name: 'navigation.playground.CustomTransitionOrigin'
+        name: 'navigation.playground.ContextScreen',
       }
-    });
+    })
   }
 
-  onClickTopBarTransparent = () => {
-    Navigation.mergeOptions(this.props.componentId, {
-      topBar: {
-        background: {
-          color: 'transparent'
+  onClickPushExternalComponent = async () => {
+    await Navigation.push(this.props.componentId, {
+      externalComponent: {
+        name: 'RNNCustomComponent',
+        passProps: {
+          text: 'This is an external component'
+        },
+        options: {
+          topBar: {
+            title: {
+              text: 'pushed'
+            },
+            visible: true,
+            testID: testIDs.TOP_BAR_ELEMENT
+          }
         }
       }
     });
   }
 
-  onClickTopBarOpaque = () => {
-    Navigation.mergeOptions(this.props.componentId, {
-      topBar: {
-        background: {
-          color: 'white'
-        }
+  onClickLifecycleScreen = () => {
+    Navigation.push(this.props.componentId, {
+      component: {
+        name: 'navigation.playground.LifecycleScreen'
       }
     });
   }
 
-  onClickShowTopBar = () => {
-    Navigation.mergeOptions('TEST', {
-      topBar: {
-        visible: true,
-        animate: true
+  onClickShowStaticLifecycleOverlay = () => {
+    Navigation.showOverlay({
+      component: {
+        name: 'navigation.playground.StaticLifecycleOverlay',
+        options: {
+          overlay: {
+            interceptTouchOutside: false
+          }
+        }
       }
     });
   }
 
-  onClickHideTopBar = () => {
-    Navigation.mergeOptions(this.props.componentId, {
-      topBar: {
-        visible: false,
-        animate: true
+  onClickShowModal = async () => {
+    await Navigation.showModal({
+      stack: {
+        children: [
+          {
+            component: {
+              name: 'navigation.playground.ModalScreen'
+            }
+          }
+        ]
       }
     });
   }
 
-  onClickFab = () => {
-    Navigation.mergeOptions(this.props.componentId, {
-      fab: {
-        id: FAB,
-        visible: false
-        // backgroundColor: 'green'
+  onClickShowRedbox = () => {
+    undefined();
+  }
+
+  onClickShowPreview = async ({ reactTag }) => {
+    await Navigation.push(this.props.componentId, {
+      component: {
+        name: 'navigation.playground.PushedScreen',
+        options: {
+          animations: {
+            push: {
+              enabled: false
+            }
+          },
+          preview: reactTag ? {
+            reactTag,
+            height: 300,
+            commit: true,
+            actions: [{
+              id: 'action-cancel',
+              title: 'Cancel'
+            }, {
+              id: 'action-delete',
+              title: 'Delete',
+              actions: [{
+                id: 'action-delete-sure',
+                title: 'Are you sure?',
+                style: 'destructive'
+              }]
+            }]
+          } : undefined,
+        }
       }
     });
   }
 
-  onClickShowOverlay = async (interceptTouchOutside) => {
-    await Navigation.showOverlay({
+  onClickPushOptionsScreen = () => {
+    Navigation.push(this.props.componentId, {
       component: {
-        name: 'navigation.playground.CustomDialog',
+        name: 'navigation.playground.OptionsScreen',
         options: {
-          layout: {
-            componentBackgroundColor: 'transparent'
+          animations: {
+            push: {
+              enabled: false
+            }
+          }
+        }
+      }
+    });
+  }
+
+  onClickPushTopTabsScreen = () => {
+    Navigation.push(this.props.componentId, {
+      topTabs: {
+        children: [
+          {
+            component: {
+              name: 'navigation.playground.TopTabOptionsScreen',
+              passProps: {
+                title: 'Tab 1',
+                text: 'This is top tab 1'
+              },
+              options: {
+                topTab: {
+                  title: 'Tab 1'
+                },
+                topBar: {
+                  title: {
+                    text: 'One'
+                  }
+                }
+              }
+            }
           },
-          overlay: {
-            interceptTouchOutside: false
+          {
+            component: {
+              name: 'navigation.playground.TopTabScreen',
+              passProps: {
+                title: 'Tab 2',
+                text: 'This is top tab 2'
+              },
+              options: {
+                topTab: {
+                  title: 'Tab 2',
+                  titleFontFamily: 'HelveticaNeue-Italic'
+                },
+                topBar: {
+                  title: {
+                    text: 'Two'
+                  }
+                }
+              }
+            }
+          },
+          {
+            component: {
+              name: 'navigation.playground.TopTabScreen',
+              passProps: {
+                title: 'Tab 3',
+                text: 'This is top tab 3'
+              },
+              options: {
+                topTab: {
+                  title: 'Tab 3'
+                },
+                topBar: {
+                  title: {
+                    text: 'Three'
+                  }
+                }
+              }
+            }
+          }
+        ],
+        options: {
+          topTabs: {
+            selectedTabColor: '#12766b',
+            unselectedTabColor: 'red',
+            fontSize: 6
           }
         }
       }
     });
   }
 
-  onClickPushDefaultOptionsScreen = () => {
-    Navigation.setDefaultOptions({
-      topBar: {
-        visible: false,
-        animate: false
+  onClickBackHandler = () => {
+    Navigation.push(this.props.componentId, {
+      component: {
+        name: 'navigation.playground.BackHandlerScreen'
       }
     });
+  }
 
+  onClickPushOrientationMenuScreen = () => {
     Navigation.push(this.props.componentId, {
       component: {
-        name: 'navigation.playground.PushedScreen'
+        name: 'navigation.playground.OrientationSelectScreen'
       }
     });
   }
 
-  onShowTopBarReactView = () => {
-    Navigation.mergeOptions(this.props.componentId, {
+  onClickProvidedId = () => {
+    Navigation.showModal({
+      stack: {
+        children: [
+          {
+            component: {
+              name: 'navigation.playground.TextScreen',
+              id: 'my unique id'
+            }
+          }
+        ]
+      }
+    });
+    Navigation.mergeOptions('my unique id', {
       topBar: {
         title: {
-          component: {
-            name: 'navigation.playground.CustomTopBar',
-            alignment: 'center'
-          }
+          text: 'User provided id'
         }
       }
     });
   }
 
-  onPush = () => {
-    Navigation.push(this.props.componentId, {
+  onClickComplexLayout = () => {
+    Navigation.showModal({
       component: {
-        name: 'navigation.playground.PushedScreen',
-        options: {
-          topBar: {
-            title: {
-              text: 'pushed'
+        name: 'navigation.playground.ComplexLayout'
+      }
+    });
+  }
+
+  onClickSplitView = () => {
+    Navigation.setRoot({
+      root: {
+        splitView: {
+          id: 'SPLITVIEW_ID',
+          master: {
+            stack: {
+              id: 'MASTER_ID',
+              children: [
+                {
+                  component: {
+                    name: 'navigation.playground.WelcomeScreen'
+                  },
+                },
+              ]
             },
-            subtitle: {
-              text: 'subtitle'
+          },
+          detail: {
+            stack: {
+              id: 'DETAILS_ID',
+              children: [
+                {
+                  component: {
+                    name: 'navigation.playground.WelcomeScreen'
+                  },
+                },
+              ]
             }
-          }
-        }
+          },
+          options: {
+            displayMode: 'auto',
+            primaryEdge: 'leading',
+            minWidth: 150,
+            maxWidth: 300,
+          },
+        },
+      },
+    });
+  }
+  onClickSearchBar = () => {
+    Navigation.push(this.props.componentId, {
+      component: {
+        name: 'navigation.playground.SearchControllerScreen'
       }
     });
   }
 }
 
+module.exports = Options;
+
 const styles = {
   root: {
     flexGrow: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'white'
+  },
+  bar: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'space-between'
   },
   h1: {
     fontSize: 24,
     textAlign: 'center',
-    margin: 10
-  },
-  h2: {
-    fontSize: 12,
-    textAlign: 'center',
-    margin: 10
+    margin: 30
   },
   footer: {
     fontSize: 10,
@@ -350,5 +682,3 @@ const styles = {
     marginTop: 10
   }
 };
-
-module.exports = OptionsScreen;

playground/src/screens/OrientationDetectScreen.js

@@ -4,7 +4,7 @@ const { Component } = require('react');
 const { View, Text, Button } = require('react-native');
 
 const { Navigation } = require('react-native-navigation');
-const testIDs = require('../testIDs');
+const TestIDs = require('../testIDs');
 
 class OrientationDetectScreen extends Component {
   constructor(props) {
@@ -23,11 +23,11 @@ class OrientationDetectScreen extends Component {
     return (
       <View style={styles.root} onLayout={this.detectHorizontal}>
         <Text style={styles.h1}>{`Orientation Screen`}</Text>
-        <Button title='Dismiss' testID={testIDs.DISMISS_BUTTON} onPress={() => Navigation.dismissModal(this.props.componentId)} />
+        <Button title='Dismiss' testID={TestIDs.DISMISS_BTN} onPress={() => Navigation.dismissModal(this.props.componentId)} />
         <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
         {this.state.horizontal ?
-        <Text style={styles.footer} testID={testIDs.LANDSCAPE_ELEMENT}>Landscape</Text> :
-        <Text style={styles.footer} testID={testIDs.PORTRAIT_ELEMENT}>Portrait</Text>}
+        <Text style={styles.footer} testID={TestIDs.LANDSCAPE_ELEMENT}>Landscape</Text> :
+        <Text style={styles.footer} testID={TestIDs.PORTRAIT_ELEMENT}>Portrait</Text>}
       </View>
     );
   }

playground/src/screens/OrientationScreen.js

@@ -0,0 +1,38 @@
+const React = require('react');
+const { Component } = require('react');
+const Root = require('../components/Root');
+const Button = require('../components/Button')
+const { Navigation } = require('react-native-navigation');
+const Screens = require('./Screens');
+const {
+  DEFAULT_ORIENTATION_BTN,
+  LANDSCAPE_PORTRAIT_ORIENTATION_BTN,
+  LANDSCAPE_ORIENTATION_BTN,
+  PORTRAIT_ORIENTATION_BTN
+} = require('../testIDs');
+
+class OrientationScreen extends Component {
+  render() {
+    return (
+      <Root componentId={this.props.componentId}>
+        <Button label='Default' testID={DEFAULT_ORIENTATION_BTN} onPress={() => this.orientation('default')} />
+        <Button label='Landscape and Portrait' testID={LANDSCAPE_PORTRAIT_ORIENTATION_BTN} onPress={() => this.orientation(['landscape', 'portrait'])} />
+        <Button label='Portrait' testID={PORTRAIT_ORIENTATION_BTN} onPress={() => this.orientation('portrait')} />
+        <Button label='Landscape' testID={LANDSCAPE_ORIENTATION_BTN} onPress={() => this.orientation(['landscape'])} />
+      </Root>
+    );
+  }
+
+  orientation(orientation) {
+    Navigation.showModal({
+      component: {
+        name: Screens.OrientationDetect,
+        passProps: {
+          orientation
+        }
+      }
+    });
+  }
+}
+
+module.exports = OrientationScreen;

playground/src/screens/OrientationSelectScreen.js

@@ -1,48 +0,0 @@
-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}>
-        <Text style={styles.h1}>{`Orientation Menu`}</Text>
-        <Button title='default' testID={testIDs.DEFAULT_ORIENTATION_BUTTON} onPress={() => this.onClickOrientationScreen('default')} />
-        <Button title='landscape and portrait' testID={testIDs.LANDSCAPE_PORTRAIT_ORIENTATION_BUTTON} onPress={() => this.onClickOrientationScreen(['landscape', 'portrait'])} />
-        <Button title='portrait only' testID={testIDs.PORTRAIT_ORIENTATION_BUTTON} onPress={() => this.onClickOrientationScreen('portrait')} />
-        <Button title='landscape only' testID={testIDs.LANDSCAPE_ORIENTATION_BUTTON} onPress={() => this.onClickOrientationScreen(['landscape'])} />
-      </View>
-    );
-  }
-
-  onClickOrientationScreen(orientation) {
-    Navigation.showModal({
-      component: {
-        name: 'navigation.playground.OrientationDetectScreen',
-        passProps: {
-          orientation
-        }
-      }
-    });
-  }
-}
-
-module.exports = OrientationSelectScreen;
-
-const styles = {
-  root: {
-    flexGrow: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#f5fcff'
-  },
-  h1: {
-    fontSize: 24,
-    textAlign: 'center',
-    margin: 10
-  }
-};

playground/src/screens/OverlayAlert.js

@@ -0,0 +1,55 @@
+const React = require('react');
+
+const { Text, Button, View, Alert, Platform } = require('react-native');
+const { Navigation } = require('react-native-navigation');
+
+const {
+  OVERLAY_ALERT_HEADER,
+  DISMISS_BTN,
+  SET_ROOT_BUTTON,
+  SET_INTERCEPT_TOUCH
+} = require('../testIDs');
+
+class OverlayAlert extends React.PureComponent {
+  render() {
+    return (
+      <View style={styles.root}>
+        <Text style={styles.title} testID={OVERLAY_ALERT_HEADER}>Test view</Text>
+        <Button title='Dismiss' testID={DISMISS_BTN} onPress={this.dismiss} />
+        <Button title='Set Root' testID={SET_ROOT_BUTTON} onPress={this.setRoot} />
+        <Button title='Set Intercept touch' testID={SET_INTERCEPT_TOUCH} onPress={this.setInterceptTouch} />
+      </View>
+    );
+  }
+
+  dismiss = () => Navigation.dismissOverlay(this.props.componentId);
+  setRoot = () => Navigation.setRoot({
+    root: {
+      component: {
+        name: 'navigation.playground.TextScreen'
+      }
+    }
+  });
+  setInterceptTouch = () => Navigation.mergeOptions(this.props.componentId, {
+    overlay: {
+      interceptTouchOutside: false
+    }
+  });
+}
+
+const styles = {
+  root: {
+    position: 'absolute',
+    backgroundColor: 'green',
+    alignItems: 'center',
+    height: 160,
+    bottom: 0,
+    left: 0,
+    right: 0
+  },
+  title: {
+    marginTop: 8
+  }
+};
+
+module.exports = OverlayAlert;

playground/src/screens/OverlayScreen.js

@@ -0,0 +1,59 @@
+const React = require('react');
+const Root = require('../components/Root');
+const Button = require('../components/Button')
+const { component } = require('../commons/Layouts');
+const Navigation = require('../services/Navigation');
+const {
+  SHOW_OVERLAY_BTN,
+  SHOW_TOUCH_THROUGH_OVERLAY_BTN,
+  ALERT_BUTTON,
+  SET_ROOT_BTN
+} = require('../testIDs');
+const Screens = require('./Screens');
+
+class OverlayScreen extends React.Component {
+  static options() {
+    return {
+      topBar: {
+        title: {
+          text: 'Overlay'
+        }
+      }
+    };
+  }
+
+  render() {
+    return (
+      <Root componentId={this.props.componentId}>
+        <Button label='Alert' testID={ALERT_BUTTON} onPress={() => alert('Alert displayed')} />
+        <Button label='Show overlay' testID={SHOW_OVERLAY_BTN} onPress={() => this.showOverlay(true)} />
+        <Button label='Show touch through overlay' testID={SHOW_TOUCH_THROUGH_OVERLAY_BTN} onPress={() => this.showOverlay(false)} />
+        <Button label='Set Root' testID={SET_ROOT_BTN} onPress={this.setRoot} />
+      </Root>
+    );
+  }
+
+  showOverlay = (interceptTouchOutside) => Navigation.showOverlay(Screens.OverlayAlert, {
+    layout: { componentBackgroundColor: 'transparent' },
+    overlay: { interceptTouchOutside }
+  });
+
+  setRoot = () => Navigation.setRoot({ root: component(Screens.Pushed) })
+
+  // await Navigation.showOverlay({
+  //   component: {
+  //     name: 'navigation.playground.CustomDialog',
+  //     options: {
+  //       layout: {
+  //         componentBackgroundColor: 'transparent'
+  //       },
+  //       overlay: {
+  //         interceptTouchOutside: false
+  //       }
+  //     }
+  //   }
+  // });
+  // });
+}
+
+module.exports = OverlayScreen;

playground/src/screens/PushedScreen.js

@@ -1,30 +1,36 @@
 const _ = require('lodash');
 const React = require('react');
-const {Component} = require('react');
-const {View, Text, Platform} = require('react-native');
-const {Navigation} = require('react-native-navigation');
-const Button = require('./Button');
-const testIDs = require('../testIDs');
-
-class PushedScreen extends Component {
+const { BackHandler } = require('react-native');
+const Navigation = require('../services/Navigation');
+const Root = require('../components/Root');
+const Button = require('../components/Button');
+const {
+  PUSHED_SCREEN_HEADER,
+  TOP_BAR_BTN,
+  PUSH_BTN,
+  POP_BTN,
+  PUSH_NO_ANIM_BTN,
+  POP_TO_FIRST_SCREEN_BTN,
+  POP_TO_ROOT_BTN,
+  ADD_BACK_HANDLER,
+  REMOVE_BACK_HANDLER,
+  SET_STACK_ROOT_BUTTON
+} = require('../testIDs');
+const Screens = require('./Screens');
+
+class PushedScreen extends React.Component {
   static options() {
     return {
-      _statusBar: {
-        visible: false,
-        drawBehind: true
-      },
       topBar: {
-        testID: testIDs.TOP_BAR_ELEMENT,
+        testID: PUSHED_SCREEN_HEADER,
+        title: {
+          text: 'Pushed Screen'
+        },
         rightButtons: {
           id: 'singleBtn',
           text: 'single',
-          testID: testIDs.TOP_BAR_BUTTON
-        },
-        rightButtonColor: 'red',
-       noBorder: true
-      },
-      bottomTabs: {
-        visible: false
+          testID: TOP_BAR_BTN
+        }
       }
     };
   }
@@ -32,367 +38,124 @@ class PushedScreen extends Component {
   constructor(props) {
     super(props);
     Navigation.events().bindComponent(this);
-    if (this.props.simulateLongRunningTask) {
-      this.simulateLongRunningTask();
-    }
-    this.onClickPush = this.onClickPush.bind(this);
-    this.onClickPushBottomTabs = this.onClickPushBottomTabs.bind(this);
-    this.onClickPop = this.onClickPop.bind(this);
-    this.onClickPopPrevious = this.onClickPopPrevious.bind(this);
-    this.onClickPopToFirstPosition = this.onClickPopToFirstPosition.bind(this);
-    this.onClickPopToRoot = this.onClickPopToRoot.bind(this);
-    this.onClickSetStackRoot = this.onClickSetStackRoot.bind(this);
-    this.state = {disabled: false};
-  }
-
-  simulateLongRunningTask() {
-    // tslint:disable-next-line
-    for (let i = 0; i < Math.pow(2, 25); i++);
-  }
-
-  navigationButtonPressed({buttonId}) {
-    if (buttonId === 'backPress') {
-      alert('back button clicked')
-    }
-  }
-
-  listeners = [];
-
-  componentDidMount() {
-    this.listeners.push(
-      Navigation.events().registerComponentDidAppearListener((event) => {
-        if (this.state.previewComponentId === event.componentId) {
-          this.setState({disabled: event.type === 'ComponentDidAppear'});
-        }
-      })
-    );
-    if (Platform.OS === 'ios') {
-      // this.listeners.push(
-      //   Navigation.events().registerNativeEventListener((name, params) => {
-      //     if (name === 'previewContext') {
-      //       const { previewComponentId } = params;
-      //       this.setState({ previewComponentId });
-      //     }
-      //   })
-      // );
-    }
   }
 
-  componentWillUnmount() {
-    this.listeners.forEach(listener => listener.remove && listener.remove());
+  navigationButtonPressed({ buttonId }) {
+    if (buttonId === 'backPress') alert('back button clicked')
   }
 
   render() {
     const stackPosition = this.getStackPosition();
     return (
-      <View style={styles.root}>
-        <Text testID={testIDs.PUSHED_SCREEN_HEADER} style={styles.h1}>{`Pushed Screen`}</Text>
-        <Text style={styles.h2}>{`Stack Position: ${stackPosition}`}</Text>
-        <Button title='Push' testID={testIDs.PUSH_BUTTON} onPress={this.onClickPush} />
-        <Button title='Push bottomTabs' testID={testIDs.PUSH_BOTTOM_TABS_BUTTON} onPress={this.onClickPushBottomTabs} />
-        {Platform.OS === 'ios' && <Button testID={testIDs.SHOW_PREVIEW_BUTTON} onPress={this.onClickPush} onPressIn={this.onClickShowPreview} title='Push Preview' />}
-        <Button title='Pop' testID={testIDs.POP_BUTTON} onPress={this.onClickPop} />
-        <Button title='Pop Previous' testID={testIDs.POP_PREVIOUS_BUTTON} onPress={this.onClickPopPrevious} />
-        <Button title='Pop To Root' testID={testIDs.POP_TO_ROOT} onPress={this.onClickPopToRoot} />
-        <Button title='Set Stack Root' testID={testIDs.SET_STACK_ROOT_BUTTON} onPress={this.onClickSetStackRoot} />
-        <Button title='Push and Wait for Render' testID={testIDs.PUSH_BUTTON_WAIT_FOR_RENDER} onPress={this.onClickPushWaitForRender} />
-        <Button title='Push custom back button' testID={testIDs.PUSH_CUSTOM_BACK_BUTTON} onPress={this.onClickPushCustomBackButton} />
-        {stackPosition > 2 && <Button title='Pop To Stack Position 1' testID={testIDs.POP_STACK_POSITION_ONE_BUTTON} onPress={this.onClickPopToFirstPosition} />}
-        <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
-      </View>
+      <Root componentId={this.props.componentId} footer={`Stack Position: ${stackPosition}`}>
+        <Button label='Push' testID={PUSH_BTN} onPress={this.push} />
+        <Button label='Pop' testID={POP_BTN} onPress={this.pop} />
+        <Button label='Push Without Animation' testID={PUSH_NO_ANIM_BTN} onPress={this.pushWithoutAnimations} />
+        {stackPosition > 2 && <Button label='Pop to First Screen' testID={POP_TO_FIRST_SCREEN_BTN} onPress={this.popToFirstScreen} />}
+        <Button label='Pop to Root' testID={POP_TO_ROOT_BTN} onPress={this.popToRoot} />
+        <Button label='Add BackHandler' testID={ADD_BACK_HANDLER} onPress={this.addBackHandler} />
+        <Button label='Remove BackHandler' testID={REMOVE_BACK_HANDLER} onPress={this.removeBackHandler} />
+        <Button label='Set Stack Root' testID={SET_STACK_ROOT_BUTTON} onPress={this.setStackRoot} />
+      </Root>
     );
   }
 
-  onClickShowPreview = async ({reactTag}) => {
-    await Navigation.push(this.props.componentId, {
-      component: {
-        name: 'navigation.playground.PushedScreen',
-        passProps: {
-          stackPosition: this.getStackPosition() + 1,
-          previousScreenIds: _.concat([], this.props.previousScreenIds || [], this.props.componentId)
-        },
-        options: {
-          topBar: {
-            title: {
-              text: `Pushed ${this.getStackPosition() + 1}`
-            }
-          },
-          animations: {
-            push: {
-              enabled: false
-            }
-          },
-          preview: {
-            reactTag,
-            height: 400,
-            commit: true,
-            actions: [{
-              id: 'action-cancel',
-              title: 'Cancel'
-            }]
+  push = () => Navigation.push(this, {
+    component: {
+      name: Screens.Pushed,
+      passProps: this.createPassProps(),
+      options: {
+        topBar: {
+          title: {
+            text: `Pushed ${this.getStackPosition() + 1}`
           }
         }
       }
-    });
-  }
-
-  async onClickPush() {
-    if (this.state.disabled) {
-      return;
     }
-
-    await Navigation.push(this.props.componentId, {
-      component: {
-        name: 'navigation.playground.PushedScreen',
-        passProps: {
-          stackPosition: this.getStackPosition() + 1,
-          previousScreenIds: _.concat([], this.props.previousScreenIds || [], this.props.componentId)
-        },
-        options: {
-          topBar: {
-            title: {
-              text: `Pushed ${this.getStackPosition() + 1}`
-            }
-          }
+  });
+
+  pop = () => Navigation.pop(this);
+
+  pushWithoutAnimations = () => Navigation.push(this, {
+    component: {
+      name: Screens.Pushed,
+      passProps: this.createPassProps(),
+      options: {
+        animations: {
+          push: { enabled: false },
+          pop: { enabled: false }
         }
       }
-    });
-  }
-
-  async onClickPop() {
-    await Navigation.pop(this.props.componentId);
-  }
-
-  async onClickPopPrevious() {
-    await Navigation.pop(_.last(this.props.previousScreenIds));
-  }
-
-  async onClickPopToFirstPosition() {
-    await Navigation.popTo(this.props.previousScreenIds[0]);
-  }
+    }
+  });
 
-  async onClickPopToRoot() {
-    await Navigation.popToRoot(this.props.componentId);
-  }
+  popToFirstScreen = () => Navigation.popTo(this.props.previousScreenIds[0]);
 
-  async onClickSetStackRoot() {
-    await Navigation.setStackRoot(this.props.componentId, [
-      {
-        component: {
-          name: 'navigation.playground.PushedScreen',
-          passProps: {
-            stackPosition: this.getStackPosition() + 1,
-            previousScreenIds: _.concat([], this.props.previousScreenIds || [], this.props.componentId)
-          },
-          options: {
-            animations: {
-              setStackRoot: {
-                enabled: false
-              }
-            },
-            topBar: {
-              title: {
-                text: `Pushed ${this.getStackPosition() + 1} a`
-              }
-            }
-          }
-        }
-      },
-      {
-        component: {
-          name: 'navigation.playground.PushedScreen',
-          passProps: {
-            stackPosition: this.getStackPosition() + 1,
-            previousScreenIds: _.concat([], this.props.previousScreenIds || [], this.props.componentId)
-          },
-          options: {
-            animations: {
-              setStackRoot: {
-                enabled: false
-              }
-            },
-            topBar: {
-              title: {
-                text: `Pushed ${this.getStackPosition() + 1} b`
-              }
-            }
-          }
-        }
-      }
-    ]);
-  }
+  popToRoot = () => Navigation.popToRoot(this);
 
-  onClickPushWaitForRender = async () => {
-    await Navigation.push(this.props.componentId, {
+  setStackRoot = () => Navigation.setStackRoot(this, [
+    {
       component: {
-        name: 'navigation.playground.PushedScreen',
+        name: Screens.Pushed,
         passProps: {
           stackPosition: this.getStackPosition() + 1,
-          previousScreenIds: _.concat([], this.props.previousScreenIds || [], this.props.componentId),
-          simulateLongRunningTask: true
+          previousScreenIds: _.concat([], this.props.previousScreenIds || [], this.props.componentId)
         },
         options: {
-          layout: {
-            backgroundColor: 'transparent'
+          animations: {
+            setStackRoot: {
+              enabled: false
+            }
           },
           topBar: {
             title: {
-              text: `Pushed ${this.getStackPosition() + 1}`
-            }
-          },
-          animations: {
-            push: {
-              waitForRender: true
+              text: `Pushed ${this.getStackPosition() + 1} a`
             }
           }
         }
       }
-    });
-  }
-
-  onClickPushCustomBackButton = async () => {
-    Navigation.push(this.props.componentId, {
+    },
+    {
       component: {
-        name: 'navigation.playground.PushedScreen',
+        name: Screens.Pushed,
         passProps: {
           stackPosition: this.getStackPosition() + 1,
-          previousScreenIds: _.concat([], this.props.previousScreenIds || [], this.props.componentId),
+          previousScreenIds: _.concat([], this.props.previousScreenIds || [], this.props.componentId)
         },
         options: {
-          topBar: {
-            backButton: {
-              id: 'backPress',
-              icon: require('../../img/navicon_add.png'),
-              visible: true,
-              color: 'black',
-              testID: testIDs.CUSTOM_BACK_BUTTON
-            }
-          }
-        }
-      }
-    });
-  }
-
-  async onClickPushBottomTabs() {
-    await Navigation.push(this.props.componentId, {
-      bottomTabs: {
-        id: 'BottomTabs',
-        children: [
-          {
-            stack: {
-              id: 'TAB1_ID',
-              children: [
-                {
-                  component: {
-                    name: 'navigation.playground.TextScreen',
-                    passProps: {
-                      text: 'This is tab 1',
-                      myFunction: () => 'Hello from a function!'
-                    },
-                    options: {
-                      topBar: {
-                        visible: true,
-                        animate: false,
-                        title: {
-                          text: 'React Native Navigation!'
-                        }
-                      },
-                      bottomTab: {
-                        text: 'Tab 1',
-                        icon: require('../images/one.png'),
-                        selectedIcon: require('../images/one.png'),
-                        testID: testIDs.FIRST_TAB_BAR_BUTTON
-                      }
-                    }
-                  }
-                }
-              ],
-              options: {
-                topBar: {
-                  visible: false
-                }
-              }
-            }
-          },
-          {
-            stack: {
-              children: [
-                {
-                  component: {
-                    name: 'navigation.playground.TextScreen',
-                    passProps: {
-                      text: 'This is tab 2'
-                    }
-                  }
-                }
-              ],
-              options: {
-                bottomTab: {
-                  text: 'Tab 2',
-                  icon: require('../images/two.png'),
-                  testID: testIDs.SECOND_TAB_BAR_BUTTON
-                }
-              }
+          animations: {
+            setStackRoot: {
+              enabled: false
             }
           },
-          {
-            component: {
-              name: 'navigation.playground.TextScreen',
-              passProps: {
-                text: 'This is tab 3',
-                myFunction: () => 'Hello from a function!'
-              },
-              options: {
-                topBar: {
-                  visible: true,
-                  animate: false
-                },
-                bottomTab: {
-                  text: 'Tab 3',
-                  icon: require('../images/one.png'),
-                  selectedIcon: require('../images/one.png')
-                }
-              }
+          topBar: {
+            title: {
+              text: `Pushed ${this.getStackPosition() + 1} b`
             }
           }
-        ],
-        options: {
-          bottomTabs: {
-            titleDisplayMode: 'alwaysShow',
-            testID: testIDs.BOTTOM_TABS_ELEMENT
-          }
         }
       }
+    }
+  ]);
+
+  addBackHandler = () => BackHandler.addEventListener('hardwareBackPress', this.backHandler);
+
+  removeBackHandler = () => BackHandler.removeEventListener('hardwareBackPress', this.backHandler);
+
+  backHandler = () => {
+    this.setState({
+      backPress: 'Back button pressed!'
     });
-  }
+    return true;
+  };
 
-  getStackPosition() {
-    return this.props.stackPosition || 1;
-  }
+  createPassProps = () => {
+    return {
+      stackPosition: this.getStackPosition() + 1,
+      previousScreenIds: _.concat([], this.props.previousScreenIds || [], this.props.componentId)
+    }
+  };
+  getStackPosition = () => this.props.stackPosition || 1;
 }
 
-const styles = {
-  root: {
-    flexGrow: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#f5fcff'
-  },
-  h1: {
-    fontSize: 24,
-    textAlign: 'center',
-    margin: 10
-  },
-  h2: {
-    fontSize: 12,
-    textAlign: 'center',
-    margin: 10
-  },
-  footer: {
-    fontSize: 10,
-    color: '#888',
-    marginTop: 10
-  }
-};
-
 module.exports = PushedScreen;

playground/src/screens/CustomRoundedButton.js → playground/src/screens/RoundedButton.js

@@ -6,11 +6,11 @@ const {
   TouchableOpacity,
   Text,
   Alert,
-  Platform
 } = require('react-native');
+const Colors = require('../commons/Colors');
 const { Navigation } = require('react-native-navigation');
 
-class CustomRoundedButton extends Component {
+class RoundedButton extends Component {
 
   constructor(props) {
     super(props);
@@ -18,23 +18,6 @@ class CustomRoundedButton extends Component {
     this.state = {};
   }
 
-  componentDidAppear() {
-    console.log('RNN', 'CRB.componentDidAppear');
-  }
-
-  componentDidDisappear() {
-    console.log('RNN', `CRB.componentDidDisappear`);
-  }
-
-  componentDidMount() {
-    console.log('RNN', `CRB.componentDidMount`);
-  }
-
-  componentWillUnmount() {
-    this.subscription.remove();
-    console.log('RNN', `CRB.componentWillUnmount`);
-  }
-
   render() {
     return (
       <View style={styles.container}>
@@ -48,7 +31,7 @@ class CustomRoundedButton extends Component {
   }
 }
 
-module.exports = CustomRoundedButton;
+module.exports = RoundedButton;
 
 const styles = StyleSheet.create({
   container: {
@@ -62,11 +45,11 @@ const styles = StyleSheet.create({
     width: 40,
     height: 40,
     borderRadius: 20,
-    backgroundColor: 'red',
+    backgroundColor: Colors.primary,
     justifyContent: 'center',
   },
   text: {
-    color: 'black',
+    color: 'white',
     alignSelf: 'center'
   }
 });

playground/src/screens/Screens.js

@@ -0,0 +1,30 @@
+module.exports = {
+  ExternalComponent: 'ExternalComponent',
+  Pushed: 'Pushed',
+  Layouts: 'Layouts',
+  Options: 'Options',
+  StackScreen: 'StackScreen',
+  Pushed: 'Pushed',
+  Modal: 'Modal',
+  Overlay: 'Overlay',
+  OverlayAlert: 'OverlayAlert',
+  Lifecycle: 'Lifecycle',
+  BackHandler: 'BackHandler',
+  BottomTabs: 'BottomTabs',
+  FirstBottomTabsScreen: 'FirstBottomTabsScreen',
+  SecondBottomTabsScreen: 'SecondBottomTabsScreen',
+  Navigation: 'Navigation',
+  NativeScreen: 'RNNCustomComponent',
+  RoundButton: 'CustomRoundedButton',
+  ReactTitleView: 'ReactTitleView',
+  EventsScreen: 'EventsScreen',
+  EventsOverlay: 'EventsOverlay',
+  SideMenuLeft: 'SideMenuLeft',
+  SideMenuRight: 'SideMenuRight',
+  SideMenuCenter: 'SideMenuCenter',
+  FlatListScreen: 'FlatListScreen',
+  Alert: 'Alert',
+  Orientation: 'Orientation',
+  OrientationDetect: 'OrientationDetect',
+  Search: 'Search'
+}

playground/src/screens/SearchScreen.js

@@ -19,9 +19,8 @@ for(let i = 0; i < 200; i++) {
   ITEMS.push({key: `Item ${i}`});
 }
 
-class SearchControllerScreen extends Component {
+class SearchScreen extends Component {
   static options() {
-   
     return {
       topBar: {
         title: {
@@ -113,7 +112,7 @@ class SearchControllerScreen extends Component {
   }
 }
 
-module.exports = SearchControllerScreen;
+module.exports = SearchScreen;
 
 const styles = StyleSheet.create({
   contentContainer: {},

playground/src/screens/SecondBottomTabScreen.js

@@ -0,0 +1,95 @@
+const React = require('react');
+const Root = require('../components/Root');
+const Button = require('../components/Button')
+const Screens = require('./Screens');
+const Navigation = require('./../services/Navigation');
+const { stack, component } = require('./../commons/Layouts');
+const {
+  SIDE_MENU_INSIDE_BOTTOM_TABS_BTN,
+  PUSH_BTN,
+  PUSHED_BOTTOM_TABS,
+  SIDE_MENU_TAB,
+  FLAT_LIST_BTN
+} = require('../testIDs')
+
+class SecondBottomTabScreen extends React.Component {
+  static options() {
+    return {
+      topBar: {
+        title: {
+          text: 'Second Tab'
+        }
+      },
+      bottomTab: {
+        icon: require('../../img/star.png'),
+        text: 'Tab 2'
+      }
+    };
+  }
+
+  render() {
+    return (
+      <Root componentId={this.props.componentId}>
+        <Button label='Push BottomTabs' testID={PUSH_BTN} onPress={this.pushBottomTabs} />
+        <Button label='SideMenu inside BottomTabs' testID={SIDE_MENU_INSIDE_BOTTOM_TABS_BTN} onPress={this.sideMenuInsideBottomTabs} />
+      </Root>
+    );
+  }
+
+  pushBottomTabs = () => Navigation.push(this, {
+    bottomTabs: {
+      children: [
+        component(Screens.Pushed, {
+          bottomTab: {
+            icon: require('../../img/whatshot.png'),
+            text: 'Tab 1',
+            testID: PUSHED_BOTTOM_TABS
+          }
+        }),
+        component(Screens.Pushed, {
+          bottomTab: {
+            icon: require('../../img/star.png'),
+            text: 'Tab 2'
+          }
+        })
+      ]
+    }
+  });
+
+  sideMenuInsideBottomTabs = () => {
+    Navigation.showModal({
+      bottomTabs: {
+        children: [
+          {
+            sideMenu: {
+              left: { ...component(Screens.SideMenuLeft) },
+              center: stack(Screens.SideMenuCenter),
+              options: {
+                bottomTab: {
+                  text: 'SideMenu',
+                  icon: require('../../img/sideMenu.png'),
+                  testID: SIDE_MENU_TAB
+                }
+              }
+            }
+          },
+          {
+            sideMenu: {
+              left: { ...component(Screens.SideMenuLeft) },
+              center: stack(Screens.FlatListScreen),
+              options: {
+                bottomTab: {
+                  text: 'FlatList',
+                  icon: require('../../img/list.png'),
+                  testID: FLAT_LIST_BTN
+                }
+              }
+            }
+          }
+        ]
+      }
+    });
+  }
+}
+
+module.exports = SecondBottomTabScreen;

playground/src/screens/SideMenuCenterScreen.js

@@ -0,0 +1,40 @@
+const React = require('react');
+const Root = require('../components/Root');
+const Button = require('../components/Button')
+const Navigation = require('../services/Navigation');
+const {
+  OPEN_LEFT_SIDE_MENU_BTN,
+  OPEN_RIGHT_SIDE_MENU_BTN,
+  CENTER_SCREEN_HEADER
+} = require('../testIDs');
+const Screens = require('./Screens');
+
+class SideMenuCenterScreen extends React.Component {
+  static options() {
+    return {
+      topBar: {
+        testID: CENTER_SCREEN_HEADER,
+        title: {
+          text: 'Center'
+        }
+      }
+    };
+  }
+
+  render() {
+    return (
+      <Root componentId={this.props.componentId}>
+        <Button label='Open Left' testID={OPEN_LEFT_SIDE_MENU_BTN} onPress={() => this.open('left')} />
+        <Button label='Open Right' testID={OPEN_RIGHT_SIDE_MENU_BTN} onPress={() => this.open('right')} />
+      </Root>
+    );
+  }
+
+  open = (side) => Navigation.mergeOptions(this, {
+    sideMenu: {
+      [side]: { visible: true }
+    }
+  });
+}
+
+module.exports = SideMenuCenterScreen;

playground/src/screens/SideMenuLeftScreen.js

@@ -0,0 +1,46 @@
+const React = require('react');
+const Root = require('../components/Root');
+const Button = require('../components/Button')
+const Colors = require('../commons/Colors');
+const Navigation = require('../services/Navigation');
+const Screens = require('./Screens');
+const {
+  LEFT_SIDE_MENU_PUSH_BTN,
+  CLOSE_LEFT_SIDE_MENU_BTN,
+  LEFT_SIDE_MENU_PUSH_AND_CLOSE_BTN
+} = require('../testIDs');
+
+class SideMenuLeftScreen extends React.Component {
+  render() {
+    return (
+      <Root componentId={this.props.componentId} style={{ backgroundColor: Colors.background }}>
+        <Button label='Push' testID={LEFT_SIDE_MENU_PUSH_BTN} onPress={this.push} />
+        <Button label='Push and Close' testID={LEFT_SIDE_MENU_PUSH_AND_CLOSE_BTN} onPress={this.pushAndClose} />
+        <Button label='Close' testID={CLOSE_LEFT_SIDE_MENU_BTN} onPress={this.close} />
+      </Root>
+    );
+  }
+
+  push = () => Navigation.push('SideMenuCenter', Screens.Pushed);
+
+  pushAndClose = () => Navigation.push('SideMenuCenter', {
+    component: {
+      name: Screens.Pushed,
+      options: {
+        sideMenu: {
+          left: {
+            visible: false
+          }
+        }
+      }
+    }
+  });
+
+  close = () => Navigation.mergeOptions(this, {
+    sideMenu: {
+      left: { visible: false }
+    }
+  });
+}
+
+module.exports = SideMenuLeftScreen;

playground/src/screens/SideMenuRightScreen.js

@@ -0,0 +1,26 @@
+const React = require('react');
+const Root = require('../components/Root');
+const Button = require('../components/Button')
+const Colors = require('../commons/Colors');
+const Navigation = require('../services/Navigation');
+const {
+  CLOSE_RIGHT_SIDE_MENU_BTN
+} = require('../testIDs');
+
+class SideMenuRightScreen extends React.Component {
+  render() {
+    return (
+      <Root componentId={this.props.componentId} style={{backgroundColor: Colors.background}}>
+        <Button label='Close' testID={CLOSE_RIGHT_SIDE_MENU_BTN} onPress={this.close} />
+      </Root>
+    );
+  }
+
+  close = () => Navigation.mergeOptions(this, {
+    sideMenu: {
+      right: { visible: false }
+    }
+  });
+}
+
+module.exports = SideMenuRightScreen;

playground/src/screens/StackScreen.js

@@ -0,0 +1,78 @@
+const React = require('react');
+const Root = require('../components/Root');
+const Button = require('../components/Button');
+const Screens = require('./Screens');
+const Navigation = require('../services/Navigation');
+const {stack, component} = require('../commons/Layouts');
+const {
+  PUSH_BTN,
+  STACK_SCREEN_HEADER,
+  PUSH_LIFECYCLE_BTN,
+  POP_NONE_EXISTENT_SCREEN_BTN,
+  PUSH_CUSTOM_BACK_BTN,
+  CUSTOM_BACK_BTN,
+  SEARCH_BTN,
+  SET_STACK_ROOT_BTN
+} = require('../testIDs');
+
+class StackScreen extends React.Component {
+  static options() {
+    return {
+      topBar: {
+        testID: STACK_SCREEN_HEADER,
+        title: {
+          text: 'Stack'
+        }
+      }
+    }
+  }
+
+  state = {
+    backPress: ''
+  };
+
+  render() {
+    return (
+      <Root componentId={this.props.componentId}>
+        <Button label='Push' testID={PUSH_BTN} onPress={this.push} />
+        <Button label='Push Lifecycle Screen' testID={PUSH_LIFECYCLE_BTN} onPress={this.pushLifecycleScreen} />
+        <Button label='Pop None Existent Screen' testID={POP_NONE_EXISTENT_SCREEN_BTN} onPress={this.popNoneExistent} />
+        <Button label='Push Custom Back Button' testID={PUSH_CUSTOM_BACK_BTN} onPress={this.pushCustomBackButton} />
+        <Button label='Set Stack Root' testID={SET_STACK_ROOT_BTN} onPress={this.setStackRoot} />
+        <Button label='Search' testID={SEARCH_BTN} onPress={this.search} />
+      </Root>
+    );
+  }
+
+  push = () => Navigation.push(this, Screens.Pushed);
+
+  pushLifecycleScreen = () => Navigation.push(this, Screens.Lifecycle);
+
+  popNoneExistent = () => Navigation.pop('noneExistentComponentId');
+
+  pushCustomBackButton = () => Navigation.push(this, {
+    component: {
+      name: Screens.Pushed,
+      options: {
+        topBar: {
+          backButton: {
+            id: 'backPress',
+            icon: require('../../img/navicon_add.png'),
+            visible: true,
+            color: 'black',
+            testID: CUSTOM_BACK_BTN
+          }
+        }
+      }
+    }
+  });
+
+  search = () => Navigation.push(this, Screens.Search);
+
+  setStackRoot = () => Navigation.setStackRoot(this, stack([
+    component(Screens.Pushed, { topBar: { title: { text: 'Screen A' } } }),
+    component(Screens.Pushed, { topBar: { title: { text: 'Screen B' } } }),
+  ]));
+}
+
+module.exports = StackScreen;

playground/src/screens/StaticEventsScreen.js

@@ -0,0 +1,42 @@
+const React = require('react');
+const Navigation = require('../services/Navigation');
+const Root = require('../components/Root');
+const Button = require('../components/Button');
+const {
+  PUSH_BTN,
+  POP_BTN,
+  STATIC_EVENTS_OVERLAY_BTN,
+  MODAL_BTN
+} = require('../testIDs');
+const Screens = require('./Screens');
+
+class StaticEventsScreen extends React.Component {
+  render() {
+    return (
+      <Root componentId={this.props.componentId}>
+        <Button label='Show Overlay' testID={STATIC_EVENTS_OVERLAY_BTN} onPress={this.showEventsOverlay} />
+        <Button label='Push' testID={PUSH_BTN} onPress={this.push} />
+        <Button label='Pop' testID={POP_BTN} onPress={this.pop} />
+        <Button label='Show Modal' testID={MODAL_BTN} onPress={this.showModal} />
+      </Root>
+    );
+  }
+
+  showModal = () => {
+    Navigation.showModal({
+      component: {
+        name: Screens.Modal
+      }
+    });
+  }
+
+  showEventsOverlay = () => Navigation.showOverlay(Screens.EventsOverlay, {
+    overlay: {
+      interceptTouchOutside: false
+    }
+  });
+  push = () => Navigation.push(this, Screens.Pushed);
+  pop = () => Navigation.pop(this);
+}
+
+module.exports = StaticEventsScreen;

playground/src/screens/StaticLifecycleOverlay.js

@@ -2,9 +2,16 @@ const React = require('react');
 const { Component } = require('react');
 const { View, Text, TouchableOpacity } = require('react-native');
 const { Navigation } = require('react-native-navigation');
-const testIDs = require('../testIDs');
+const TestIDs = require('../testIDs');
 
 class StaticLifecycleOverlay extends Component {
+  static options() {
+    return {
+      layout: {
+        componentBackgroundColor: 'transparent'
+      }
+    }
+  }
   constructor(props) {
     super(props);
     this.state = {
@@ -83,7 +90,7 @@ class StaticLifecycleOverlay extends Component {
         style={styles.dismissBtn}
         onPress={() => Navigation.dismissOverlay(this.props.componentId)}
       >
-        <Text testID={testIDs.DISMISS_BUTTON} style={{ color: 'red', alignSelf: 'center' }}>X</Text>
+        <Text testID={TestIDs.DISMISS_BTN} style={{ color: 'red', alignSelf: 'center' }}>X</Text>
       </TouchableOpacity>
     );
   }

playground/src/screens/index.js

@@ -1,72 +1,58 @@
 const React = require('react');
 const { Navigation } = require('react-native-navigation');
-const WelcomeScreen = require('./WelcomeScreen');
-const TextScreen = require('./TextScreen');
-const PushedScreen = require('./PushedScreen');
-const LifecycleScreen = require('./LifecycleScreen');
-const StaticLifecycleOverlay = require('./StaticLifecycleOverlay');
-const ModalScreen = require('./ModalScreen');
-const OptionsScreen = require('./OptionsScreen');
-const OrientationSelectScreen = require('./OrientationSelectScreen');
-const OrientationDetectScreen = require('./OrientationDetectScreen');
 const ScrollViewScreen = require('./ScrollViewScreen');
 const CustomTransitionOrigin = require('./CustomTransitionOrigin');
 const CustomTransitionDestination = require('./CustomTransitionDestination');
-const CustomDialog = require('./CustomDialog');
 const CustomDialogWithScroll = require('./complexlayouts/CustomDialogWithScroll');
-const BandHandlerScreen = require('./BackHandlerScreen');
-const SideMenuScreen = require('./SideMenuScreen');
 const TopTabScreen = require('./TopTabScreen');
 const TopTabOptionsScreen = require('./TopTabOptionsScreen');
-const CustomTopBar = require('./CustomTopBar');
-const Alert = require('./Alert');
-const BackHandlerModalScreen = require('./BackHandlerModalScreen');
 const CustomTextButton = require('./CustomTextButton');
-const CustomRoundedButton = require('./CustomRoundedButton');
 const TopBarBackground = require('./TopBarBackground');
-const ComplexLayout = require('./ComplexLayout');
-const SearchScreen = require('./SearchScreen');
 const KeyboardScreen = require('./KeyboardScreen');
-const BottomTabSideMenuScreen = require('./complexlayouts/BottomTabSideMenuScreen');
-const FlatListScreen = require('./FlatListScreen');
 const ContextScreen = require('./ContextScreen');
 const { ContextProvider } = require('../context');
+const Screens = require('./Screens');
 
 function registerScreens() {
+  Navigation.registerComponent(Screens.Layouts, () => require('./LayoutsScreen'));
+  Navigation.registerComponent(Screens.Options, () => require('./OptionsScreen'));
+  Navigation.registerComponent(Screens.StackScreen, () => require('./StackScreen'));
+  Navigation.registerComponent(Screens.Pushed, () => require('./PushedScreen'));
+  Navigation.registerComponent(Screens.Modal, () => require('./ModalScreen'))
+  Navigation.registerComponent(Screens.Navigation, () => require('./NavigationScreen'));
+  Navigation.registerComponent(Screens.FirstBottomTabsScreen, () => require('./FirstBottomTabScreen'));
+  Navigation.registerComponent(Screens.SecondBottomTabsScreen, () => require('./SecondBottomTabScreen'));
+  Navigation.registerComponent(Screens.Lifecycle, () => require('./LifecycleScreen'));
+  Navigation.registerComponent(Screens.Overlay, () => require('./OverlayScreen'));
+  Navigation.registerComponent(Screens.OverlayAlert, () => require('./OverlayAlert'));
+  Navigation.registerComponent(Screens.RoundButton, () => require('./RoundedButton'));
+  Navigation.registerComponent(Screens.ReactTitleView, () => require('./CustomTopBar'));
+  Navigation.registerComponent(Screens.EventsScreen, () => require('./StaticEventsScreen'));
+  Navigation.registerComponent(Screens.EventsOverlay, () => require('./StaticLifecycleOverlay'));
+  Navigation.registerComponent(Screens.SideMenuLeft, () => require('./SideMenuLeftScreen'));
+  Navigation.registerComponent(Screens.SideMenuCenter, () => require('./SideMenuCenterScreen'));
+  Navigation.registerComponent(Screens.SideMenuRight, () => require('./SideMenuRightScreen'));
+  Navigation.registerComponent(Screens.FlatListScreen, () => require('./FlatListScreen'));
+  Navigation.registerComponent(Screens.Alert, () => require('./Alert'));
+  Navigation.registerComponent(Screens.Orientation, () => require('./OrientationScreen'));
+  Navigation.registerComponent(Screens.OrientationDetect, () => require('./OrientationDetectScreen'));
+  Navigation.registerComponent(Screens.Search, () => require('./SearchScreen'));
+
   Navigation.registerComponent(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
   Navigation.registerComponent(`navigation.playground.CustomTransitionOrigin`, () => CustomTransitionOrigin);
   Navigation.registerComponent(`navigation.playground.ScrollViewScreen`, () => ScrollViewScreen);
-  Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
-  Navigation.registerComponent(`navigation.playground.ModalScreen`, () => ModalScreen);
-  Navigation.registerComponent(`navigation.playground.LifecycleScreen`, () => LifecycleScreen);
-  Navigation.registerComponent(`navigation.playground.StaticLifecycleOverlay`, () => StaticLifecycleOverlay);
-  Navigation.registerComponent(`navigation.playground.TextScreen`, () => TextScreen);
-  Navigation.registerComponent('navigation.playground.PushedScreen', () => PushedScreen);
-  Navigation.registerComponent('navigation.playground.ContextScreen',() => (props) =>
+  Navigation.registerComponent('navigation.playground.ContextScreen', () => (props) =>
     <ContextProvider>
       <ContextScreen {...props} />
     </ContextProvider>,
     () => ContextScreen);
-  Navigation.registerComponent(`navigation.playground.OptionsScreen`, () => OptionsScreen);
-  Navigation.registerComponent(`navigation.playground.OrientationSelectScreen`, () => OrientationSelectScreen);
-  Navigation.registerComponent(`navigation.playground.OrientationDetectScreen`, () => OrientationDetectScreen);
   Navigation.registerComponent('navigation.playground.CustomDialog', () => CustomDialog);
   Navigation.registerComponent('navigation.playground.CustomDialogWithScroll', () => CustomDialogWithScroll);
-  Navigation.registerComponent('navigation.playground.BackHandlerScreen', () => BandHandlerScreen);
-  Navigation.registerComponent('navigation.playground.SideMenuScreen', () => SideMenuScreen);
   Navigation.registerComponent('navigation.playground.TopTabScreen', () => TopTabScreen);
   Navigation.registerComponent('navigation.playground.TopTabOptionsScreen', () => TopTabOptionsScreen);
-  Navigation.registerComponent('navigation.playground.CustomTopBar', () => CustomTopBar);
-  Navigation.registerComponent('navigation.playground.alert', () => Alert);
-  Navigation.registerComponent('navigation.playground.BackHandlerModalScreen', () => BackHandlerModalScreen);
-  Navigation.registerComponent('navigation.playground.ComplexLayout', () => ComplexLayout);
   Navigation.registerComponent('CustomTextButton', () => CustomTextButton);
-  Navigation.registerComponent('CustomRoundedButton', () => CustomRoundedButton);
   Navigation.registerComponent('TopBarBackground', () => TopBarBackground);
-  Navigation.registerComponent('navigation.playground.SearchControllerScreen', () => SearchScreen);
   Navigation.registerComponent('navigation.playground.KeyboardScreen', () => KeyboardScreen);
-  Navigation.registerComponent('complexLayout.bottomTabThatOpensSideMenu', () => BottomTabSideMenuScreen);
-  Navigation.registerComponent('navigation.playground.FlatListScreen', () => FlatListScreen);
 }
 
 module.exports = {

playground/src/services/Navigation.js

@@ -0,0 +1,52 @@
+const { isString, get } = require('lodash');
+const { stack, component } = require('../commons/Layouts');
+const { Navigation } = require('react-native-navigation');
+
+const push = (selfOrCompId, screen) => Navigation.push(compId(selfOrCompId), isString(screen) ? component(screen) : screen);
+
+const pushExternalComponent = (self, name, passProps) => Navigation.push(self.props.componentId, {
+  externalComponent: {
+    name,
+    passProps
+  }
+});
+
+const pop = (selfOrCompId) => Navigation.pop(compId(selfOrCompId));
+
+const showModal = (screen) => Navigation.showModal(isString(screen) ? stack(screen) : screen);
+
+const dismissModal = (selfOrCompId) => Navigation.dismissModal(compId(selfOrCompId));
+
+const dismissAllModals = () => Navigation.dismissAllModals();
+
+const showOverlay = (name, options) => Navigation.showOverlay(component(name, options));
+
+const dismissOverlay = (name) => Navigation.dismissOverlay(name);
+
+const popToRoot = (self) => Navigation.popToRoot(self.props.componentId);
+
+const mergeOptions = (self, options) => Navigation.mergeOptions(self.props.componentId, options);
+
+const setStackRoot = (self, root) => Navigation.setStackRoot(self.props.componentId, root)
+
+const compId = (selfOrCompId) => {
+  return get(selfOrCompId, 'props.componentId', selfOrCompId);
+}
+
+module.exports = {
+  mergeOptions,
+  push,
+  pushExternalComponent,
+  pop,
+  popToRoot,
+  showModal,
+  dismissModal,
+  dismissAllModals,
+  showOverlay,
+  dismissOverlay,
+  events: Navigation.events.bind(Navigation),
+  popTo: Navigation.popTo.bind(Navigation),
+  setDefaultOptions: Navigation.setDefaultOptions.bind(Navigation),
+  setRoot: Navigation.setRoot.bind(Navigation),
+  setStackRoot
+}

playground/src/testIDs.js

@@ -1,92 +1,132 @@
 
 module.exports = {
+  // Layouts
+  STACK_BTN: 'STACK_BUTTON',
+  BOTTOM_TABS_BTN: 'BOTTOM_TABS_BUTTON',
+  EXTERNAL_COMP_BTN: 'EXTERNAL_COMPONENT_BUTTON',
+  LAYOUTS_TAB: 'LAYOUTS_TAB',
+  NAVIGATION_TAB: 'NAVIGATION_TAB',
+  OPTIONS_TAB: 'OPTIONS_TAB',
+  SIDE_MENU_INSIDE_BOTTOM_TABS_BTN: 'SIDE_MENU_INSIDE_BOTTOM_TABS',
+  OVERLAY_BTN: 'OVERLAY_BTN',
+  SIDE_MENU_BTN: 'SIDE_MENU_BTN',
+  MODAL_BTN: 'SHOW_MODAL_BUTTON',
+  DISMISS_MODAL_BTN: 'DISMISS_MODAL_BUTTON',
+  MODAL_SCREEN_HEADER: 'MODAL_SCREEN_HEADER',
+  ALERT_BUTTON: 'ALERT_BUTTON',
+  OVERLAY_ALERT_HEADER: 'OVERLAY_ALERT_HEADER',
+  SHOW_OVERLAY_BTN: 'SHOW_OVERLAY_BTN',
+  SHOW_TOUCH_THROUGH_OVERLAY_BTN: 'SHOW_TOUCH_THROUGH_OVERLAY_BTN',
+  DISMISS_BTN: 'DISMISS_BTN',
+  STACK_SCREEN_HEADER: 'STACK_SCREEN_HEADER',
+  PUSH_NO_ANIM_BTN: 'PUSH_NO_ANIM_BTN',
+  POP_TO_FIRST_SCREEN_BTN: 'POP_TO_FIRST_SCREEN_BTN',
+  POP_NONE_EXISTENT_SCREEN: 'POP_NONE_EXISTENT_SCREEN',
+  MULTI_CHILD_STACK_BTN: 'MULTI_CHILD_STACK_BTN',
+  EXTERNAL_COMP_SCREEN_HEADER: 'EXTERNAL_COMPONENT_SCREEN_HEADER',
+  TOP_BAR: 'TOP_BAR',
+  PUSH_BTN: 'PUSH_BUTTON',
+  SHOW_STATIC_EVENTS_SCREEN: 'SHOW_STATIC_EVENTS_SCREEN',
+  POP_BTN: 'POP_BUTTON',
+  BACK_HANDLER_BTN: 'BACK_HANDLER_BUTTON',
+  POP_TO_ROOT_BTN: 'POP_TO_ROOT',
+  POP_NONE_EXISTENT_SCREEN_BTN: 'POP_NONE_EXISTENT_SCREEN_BTN',
+  TOP_BAR_BTN: 'TOP_BAR_BUTTON',
+  CUSTOM_BACK_BTN: 'CUSTOM_BACK_BUTTON',
+  PUSH_CUSTOM_BACK_BTN: 'PUSH_CUSTOM_BACK_BTN',
+  SWITCH_TAB_BY_INDEX_BTN: 'SWITCH_TAB_BY_INDEX_BTN',
+  SWITCH_TAB_BY_COMPONENT_ID_BTN: 'SWITCH_TAB_BY_COMPONENT_ID_BTN',
+  PUSHED_BOTTOM_TABS: 'PUSHED_BOTTOM_TABS',
+  CHANGE_TITLE_BTN: 'CHANGE_TITLE_BTN',
+  SHOW_TOP_BAR_BTN: 'SHOW_TOP_BAR_BUTTON',
+  HIDE_TOP_BAR_BTN: 'HIDE_TOP_BAR_BUTTON',
+  SET_BADGE_BTN: 'SET_BADGE_BTN',
+  CLEAR_BADGE_BTN: 'CLEAR_BADGE_BTN',
+  BOTTOM_TABS: 'BOTTOM_TABS',
+  HIDE_TABS_BTN: 'HIDE_TABS_BTN',
+  SHOW_TABS_BTN: 'SHOW_TABS_BTN',
+  HIDE_TABS_PUSH_BTN: 'HIDE_TABS_PUSH_BTN',
+  ROUND_BUTTON: 'ROUND_BUTTON',
+  BUTTON_ONE: 'BUTTON_ONE',
+  LEFT_BUTTON: 'LEFT_BUTTON',
+  HIDE_TOPBAR_DEFAULT_OPTIONS: 'HIDE_TOPBAR_DEFAULT_OPTIONS',
+  SET_TOPBAR_REACT_VIEW: 'SET_TOPBAR_REACT_VIEW',
+  SHOW_YELLOW_BOX_BTN: 'SHOW_YELLOW_BOX_BTN',
+  SET_REACT_TITLE_VIEW: 'SET_REACT_TITLE_VIEW',
+  STATIC_EVENTS_OVERLAY_BTN: 'STATIC_EVENTS_OVERLAY_BTN',
+  PUSH_LIFECYCLE_BTN: 'PUSH_LIFECYCLE_BTN',
+  MODAL_LIFECYCLE_BTN: 'MODAL_LIFECYCLE_BTN',
+  DISMISS_ALL_PREVIOUS_MODAL_BTN: 'DISMISS_ALL_PREVIOUS_MODAL_BTN',
+  DISMISS_PREVIOUS_MODAL_BTN: 'DISMISS_PREVIOUS_MODAL_BTN',
+  DISMISS_UNKNOWN_MODAL_BTN: 'DISMISS_UNKNOWN_MODAL_BTN',
+  PUSH_TO_TEST_DID_DISAPPEAR_BTN: 'PUSH_TO_TEST_DID_DISAPPEAR_BTN',
+  SET_ROOT_BTN: 'SET_ROOT_BTN',
+  ADD_BACK_HANDLER: 'ADD_BACK_HANDLER',
+  REMOVE_BACK_HANDLER: 'REMOVE_BACK_HANDLER',
+  OPEN_LEFT_SIDE_MENU_BTN: 'OPEN_LEFT_SIDE_MENU_BTN',
+  OPEN_RIGHT_SIDE_MENU_BTN: 'OPEN_RIGHT_SIDE_MENU_BUTTON',
+  CLOSE_LEFT_SIDE_MENU_BTN: 'CLOSE_LEFT_SIDE_MENU_BTN',
+  CLOSE_RIGHT_SIDE_MENU_BTN: 'CLOSE_RIGHT_SIDE_MENU_BTN',
+  SIDE_MENU_PUSH_BTN: 'SIDE_MENU_PUSH_BUTTON',
+  LEFT_SIDE_MENU_PUSH_BTN: 'LEFT_SIDE_MENU_PUSH_BUTTON',
+  LEFT_SIDE_MENU_PUSH_AND_CLOSE_BTN: 'LEFT_SIDE_MENU_PUSH_AND_CLOSE_BTN',
+  RIGHT_SIDE_MENU_PUSH_BTN: 'RIGHT_SIDE_MENU_PUSH_BUTTON',
+  CENTER_SCREEN_HEADER: 'CENTER_SCREEN_HEADER',
+  SIDE_MENU_TAB: 'SIDE_MENU_TAB',
+  FLAT_LIST_BTN: 'FLAT_LIST_BTN',
+  SHOW_ORIENTATION_SCREEN: 'SHOW_ORIENTATION_SCREEN',
+  DEFAULT_ORIENTATION_BTN: 'DEFAULT_ORIENTATION_BTN',
+  LANDSCAPE_PORTRAIT_ORIENTATION_BTN: 'LANDSCAPE_PORTRAIT_ORIENTATION_BTN',
+  PORTRAIT_ORIENTATION_BTN: 'PORTRAIT_ORIENTATION_BTN',
+  LANDSCAPE_ORIENTATION_BTN: 'LANDSCAPE_ORIENTATION_BTN',
+  DISMISS_BTN: 'DISMISS_BTN',
+  SEARCH_BTN: 'SEARCH_BTN',
+  SET_STACK_ROOT_BTN: 'SET_STACK_ROOT_BTN',
 
   // Buttons
   TAB_BASED_APP_BUTTON: `TAB_BASED_APP_BUTTON`,
   TAB_BASED_APP_SIDE_BUTTON: `TAB_BASED_APP_SIDE_BUTTON`,
-  PUSH_LIFECYCLE_BUTTON: `PUSH_LIFECYCLE_BUTTON`,
   PUSH_STATIC_LIFECYCLE_BUTTON: `PUSH_STATIC_LIFECYCLE_BUTTON`,
-  PUSH_BUTTON: `PUSH_BUTTON`,
   PUSH_CONTEXT_SCREEN_BUTTON: `PUSH_CONTEXT_SCREEN_BUTTON`,
-  SHOW_YELLOW_BOX: `SHOW_YELLOW_BOX`,
-  SIDE_MENU_PUSH_BUTTON: `SIDE_MENU_PUSH_BUTTON`,
-  LEFT_SIDE_MENU_PUSH_BUTTON: `leftSIDE_MENU_PUSH_BUTTON`,
-  RIGHT_SIDE_MENU_PUSH_BUTTON: `rightSIDE_MENU_PUSH_BUTTON`,
   PUSH_OPTIONS_BUTTON: `PUSH_OPTIONS_BUTTON`,
   PUSH_DEFAULT_OPTIONS_BUTTON: `PUSH_DEFAULT_OPTIONS_BUTTON`,
-  SHOW_TOPBAR_REACT_VIEW: `SHOW_TOPBAR_REACT_VIEW`,
-  BACK_HANDLER_BUTTON: `BACK_HANDLER_BUTTON`,
-  CUSTOM_BACK_BUTTON: `CUSTOM_BACK_BUTTON`,
-  SHOW_MODAL_BUTTON: `SHOW_MODAL_BUTTON`,
   SHOW_REDBOX_BUTTON: `SHOW_REDBOX_BUTTON`,
-  ORIENTATION_BUTTON: `ORIENTATION_BUTTON`,
+  ORIENTATION_BTN: `ORIENTATION_BUTTON`,
   PROVIDED_ID: `PROVIDED_ID`,
-  DISMISS_MODAL_BUTTON: `DISMISS_MODAL_BUTTON`,
-  DISMISS_UNKNOWN_MODAL_BUTTON: `DISMISS_UNKNOWN_MODAL_BUTTON`,
-  DISMISS_ALL_MODALS_BUTTON: `DISMISS_ALL_MODALS_BUTTON`,
-  DISMISS_PREVIOUS_MODAL_BUTTON: `DISMISS_PREVIOUS_MODAL_BUTTON`,
-  DISMISS_ALL_PREVIOUS_MODAL_BUTTON: `DISMISS_ALL_PREVIOUS_MODAL_BUTTON`,
-  DISMISS_FIRST_MODAL_BUTTON: `DISMISS_FIRST_MODAL_BUTTON`,
-  DEFAULT_ORIENTATION_BUTTON: `DEFAULT_ORIENTATION_BUTTON`,
-  LANDSCAPE_PORTRAIT_ORIENTATION_BUTTON: `LANDSCAPE_PORTRAIT_ORIENTATION_BUTTON`,
-  PORTRAIT_ORIENTATION_BUTTON: `PORTRAIT_ORIENTATION_BUTTON`,
-  LANDSCAPE_ORIENTATION_BUTTON: `LANDSCAPE_ORIENTATION_BUTTON`,
-  DISMISS_BUTTON: `DISMISS_BUTTON`,
-  POP_BUTTON: `POP_BUTTON`,
+  DISMISS_ALL_MODALS_BTN: `DISMISS_ALL_MODALS_BUTTON`,
+  DISMISS_FIRST_MODAL_BTN: `DISMISS_FIRST_MODAL_BUTTON`,
   POP_PREVIOUS_BUTTON: `POP_PREVIOUS_BUTTON`,
-  POP_TO_ROOT: `POP_TO_ROOT`,
   POP_STACK_POSITION_ONE_BUTTON: `POP_STACK_POSITION_ONE_BUTTON`,
-  SWITCH_SECOND_TAB_BUTTON: `SWITCH_SECOND_TAB_BUTTON`,
-  SWITCH_FIRST_TAB_BUTTON: `SWITCH_FIRST_TAB_BUTTON`,
   DYNAMIC_OPTIONS_BUTTON: `DYNAMIC_OPTIONS_BUTTON`,
-  SHOW_TOP_BAR_BUTTON: `SHOW_TOP_BAR_BUTTON`,
-  HIDE_TOP_BAR_BUTTON: `HIDE_TOP_BAR_BUTTON`,
-  TOP_BAR_BUTTON: `TOP_BAR_BUTTON`,
   SCROLLVIEW_SCREEN_BUTTON: `SCROLLVIEW_SCREEN_BUTTON`,
   HIDE_FAB: `HIDE_FAB`,
   SHOW_SNACKBAR_BUTTON: `SHOW_SNACKBAR_BUTTON`,
   TOGGLE_TOP_BAR_HIDE_ON_SCROLL: `TOGGLE_TOP_BAR_HIDE_ON_SCROLL`,
   SET_TAB_BADGE_BUTTON: `SET_TAB_BADGE_BUTTON`,
   SET_TAB_BADGE_BUTTON_NULL: `SET_TAB_BADGE_BUTTON_NULL`,
-  PUSH_TO_TEST_DID_DISAPPEAR_BUTTON: `PUSH_TO_TEST_DID_DISAPPEAR_BUTTON`,
   PUSH_BUTTON_WAIT_FOR_RENDER: `PUSH_AND_WAIT_FOR_RENDER`,
   PUSH_CUSTOM_BACK_BUTTON: `PUSH_CUSTOM_BACK_BUTTON`,
-  SHOW_LEFT_SIDE_MENU_BUTTON: `SHOW_LEFT_SIDE_MENU_BUTTON`,
-  SHOW_RIGHT_SIDE_MENU_BUTTON: `SHOW_RIGHT_SIDE_MENU_BUTTON`,
-  HIDE_LEFT_SIDE_MENU_BUTTON: `HIDE_LEFT_SIDE_MENU_BUTTON`,
-  HIDE_RIGHT_SIDE_MENU_BUTTON: `HIDE_RIGHT_SIDE_MENU_BUTTON`,
-  HIDE_BOTTOM_TABS_BUTTON: `HIDE_BOTTOM_TABS_BUTTON`,
   SHOW_BOTTOM_TABS_BUTTON: `SHOW_BOTTOM_TABS_BUTTON`,
   FIRST_TAB_BAR_BUTTON: `FIRST_TAB_BAR_BUTTON`,
-  SECOND_TAB_BAR_BUTTON: `SECOND_TAB_BAR_BUTTON`,
-  THIRD_TAB_BAR_BUTTON: `THIRD_TAB_BAR_BUTTON`,
-  SHOW_OVERLAY_BUTTON: `SHOW_OVERLAY_BUTTON`,
+  SECOND_TAB_BAR_BTN: `SECOND_TAB_BAR_BUTTON`,
+  THIRD_TAB_BAR_BTN: `THIRD_TAB_BAR_BUTTON`,
   SHOW_TOUCH_THROUGH_OVERLAY_SCROLLER: `SHOW_TOUCH_THROUGH_OVERLAY_SCROLLER`,
-  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`,
-  PUSH_EXTERNAL_COMPONENT_BUTTON: `PUSH_EXTERNAL_COMPONENT_BUTTON`,
   COMPLEX_LAYOUT_BUTTON: `COMPLEX_LAYOUT_BUTTON`,
   EXTERNAL_COMPONENT_IN_STACK: `EXTERNAL_COMPONENT_IN_STACK`,
-  EXTERNAL_COMPONENT_IN_DEEP_STACK: `EXTERNAL_COMPONENT_IN_DEEP_STACK`,
-  SET_STACK_ROOT_BUTTON: `SET_STACK_ROOT_BUTTON`,
-  MODAL_LIFECYCLE_BUTTON: `MODAL_LIFECYCLE_BUTTON`,
   SPLIT_VIEW_BUTTON: `SPLIT_VIEW_BUTTON`,
   SHOW_PREVIEW_BUTTON: `SHOW_PREVIEW_BUTTON`,
-  SHOW_TOPBAR_SEARCHBAR: `SHOW_TOPBAR_SEARCHBAR`,
   SEARCH_RESULT_ITEM: `SEARCH_RESULT_ITEM`,
-  HIDE_BOTTOM_TABS_ON_PUSH_BUTTON: `HIDE_BOTTOM_TABS_ON_PUSH_BUTTON`,
   SIDE_MENU_LAYOUT_INSIDE_BOTTOM_TAB: `SIDE_MENU_LAYOUT_INSIDE_BOTTOM_TAB`,
-  OPEN_SIDE_MENU: `OPEN_SIDE_MENU`,
-  SET_ROOT_BUTTON: `SET_ROOT_BUTTON`,
   SET_INTERCEPT_TOUCH: `SET_INTERCEPT_TOUCH`,
   PUSH_BOTTOM_TABS_BUTTON: `PUSH_BOTTOM_TABS_BUTTON`,
-  
+  SET_STACK_ROOT_BUTTON: `SET_STACK_ROOT_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`,
 
@@ -95,6 +135,5 @@ module.exports = {
   PUSHED_SCREEN_HEADER: `PUSHED_SCREEN_HEADER`,
   OPTIONS_SCREEN_HEADER: `OPTIONS_SCREEN_HEADER`,
   MODAL_SCREEN: `MODAL_SCREEN`,
-  CENTERED_TEXT_HEADER: `CENTERED_TEXT_HEADER`,
-  DIALOG_HEADER: `DIALOG_HEADER`
+  CENTERED_TEXT_HEADER: `CENTERED_TEXT_HEADER`
 };