playground working

integration/SingleScreen.test.js

@@ -11,7 +11,7 @@ describe('single screen integration', () => {
   xit('startApp directs to native with constructed hirarchy for single screens', () => {
     mockNativeNavigation.startApp = jest.fn();
     Navigation.startApp({
-      container: {
+      root: {
         key: 'com.integration.MyFirstScreen'
       }
     });

playground/commands.json

@@ -1,26 +1,26 @@
 {
   "singleScreenApp": {
-    "container": {
+    "root": {
       "key": "com.example.FirstTabScreen"
     }
   },
   "tabBasedApp": {
     "tabs": [{
-             "container": {
+             "root": {
               "key": "com.example.FirstTabScreen"
              }
              }, {
-             "container": {
+             "root": {
               "key": "com.example.SecondTabScreen"
              }
              }, {
-             "container": {
+             "root": {
               "key": "com.example.FirstTabScreen"
              }
              }]
   },
   "singleWithLeftSideMenu": {
-    "container": {
+    "root": {
       "key": "com.example.MyScreen"
     },
     "sideMenu": {
@@ -30,7 +30,7 @@
     }
   },
   "singleWithRightSideMenu": {
-    "container": {
+    "root": {
       "key": "com.example.MyScreen"
     },
     "sideMenu": {
@@ -40,7 +40,7 @@
     }
   },
   "singleWithBothMenus": {
-    "container": {
+    "root": {
       "key": "com.example.MyScreen"
     },
     "sideMenu": {
@@ -54,15 +54,15 @@
   },
   "tabBasedWithSideMenu": {
     "tabs": [{
-             "container": {
+             "root": {
               "key": "com.example.FirstTabScreen"
              }
              }, {
-             "container": {
+             "root": {
               "key": "com.example.SecondTabScreen"
              }
              }, {
-             "container": {
+             "root": {
               "key": "com.example.FirstTabScreen"
              }
              }],

playground/e2e/app.test.js

@@ -0,0 +1,9 @@
+describe('app', function() {
+  beforeEach(function(done) {
+    global.simulator.relaunchApp(done);
+  });
+
+  it('shows welcome screen', function() {
+    expect(element(by.label('React Native Navigation!'))).toBeVisible();
+  });
+});

playground/e2e/init.js

@@ -1,9 +1,10 @@
 /*eslint-disable*/
+require('babel-polyfill');
 const detox = require('detox');
 const config = require('../package.json').detox;
 
 before(function(done) {
-  this.timeout(120000);
+  this.timeout(60000);
   detox.config(config);
   detox.start(done);
 });

playground/e2e/sanity.test.js

@@ -1,9 +0,0 @@
-describe('sanity', function() {
-  beforeEach(function(done) {
-    global.simulator.reloadReactNativeApp(done);
-  });
-
-  it('should have screen one showing', function() {
-    expect(element(by.label('Screen One'))).toBeVisible();
-  });
-});

playground/ios/playground/AppDelegate.m

@@ -25,14 +25,14 @@
   // **********************************************
   // *** DON'T MISS: THIS IS HOW WE BOOTSTRAP *****
   // **********************************************
-  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
+  /*self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
   self.window.backgroundColor = [UIColor whiteColor];
-  [[RCCManager sharedInstance] initBridgeWithBundleURL:jsCodeLocation];
+  [[RCCManager sharedInstance] initBridgeWithBundleURL:jsCodeLocation];*/
 
-  /*
+  
   // original RN bootstrap - remove this part
   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
-                                                      moduleName:@"playground"
+                                                      moduleName:@"com.example.WelcomeScreen"
                                                initialProperties:nil
                                                    launchOptions:launchOptions];
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
@@ -40,9 +40,9 @@
   rootViewController.view = rootView;
   self.window.rootViewController = rootViewController;
   [self.window makeKeyAndVisible];
-  */
   
 
+
   return YES;
 }
 

playground/package.json

@@ -24,8 +24,18 @@
       "sessionId": "playground"
     },
     "ios-simulator": {
-      "app": "ios/DerivedData/playground/Build/Products/Debug_Detox-iphonesimulator/playground.app",
+      "app": "ios/DerivedData/playground/Build/Products/Release_Detox-iphonesimulator/playground.app",
       "device": "iPhone 7, iOS 10.2"
     }
+  },
+  "babel": {
+    "env": {
+      "test": {
+        "presets": [
+          "react-native"
+        ],
+        "retainLines": true
+      }
+    }
   }
 }

playground/scripts/e2e.ios.js

@@ -15,7 +15,7 @@ function kill(process) {
 function buildProjForDetox() {
   exec(`RCT_NO_LAUNCH_PACKAGER=true \
           cd ios && xcodebuild \
-            -scheme playground_Detox clean build \
+            -scheme playground_release_Detox build \
             -project playground.xcodeproj \
             -sdk iphonesimulator \
             -derivedDataPath ./DerivedData/playground`);
@@ -25,7 +25,7 @@ function e2e() {
   try {
     kill(`detox-server`);
     cp.exec(`./node_modules/.bin/detox-server > ./detox-server.log 2>&1`);
-    exec(`BABEL_ENV=test ./node_modules/mocha/bin/mocha e2e --recursive --timeout 120000`);
+    exec(`BABEL_ENV=test ./node_modules/mocha/bin/mocha e2e --recursive --timeout 120000 --compilers js:babel-register`);
   } finally {
     kill(`detox-server`);
     kill(`Simulator`);

playground/src/__screens/CollapsingTopBarScreen.android.js

@@ -1,133 +0,0 @@
-import React, {Component} from 'react';
-import {
-  Text,
-  View,
-  ScrollView,
-  TouchableOpacity,
-  StyleSheet,
-} from 'react-native';
-
-// collapsingToolBarImage: require('../../img/gyro_header.jpg'),
-// collapsingToolBarImage: "https://static.wixstatic.com/media/ec14061b42d1dc5b809367f7cfda8eff.jpg/v1/fill/w_1002,h_499,q_80/ec14061b42d1dc5b809367f7cfda8eff.webp",
-
-export default class ThirdTabScreen extends Component {
-  static navigatorStyle = {
-    drawUnderTabBar: true,
-    navBarButtonColor: '#ffffff',
-    navBarTextColor: '#ffffff',
-    collapsingToolBarImage: require('../../img/gyro_header.jpg'),
-    collapsingToolBarCollapsedColor: '#0f2362',
-    navBarBackgroundColor: '#eeeeee'
-  };
-
-  static navigatorButtons = {
-    rightButtons: [
-      {
-        title: 'Edit',
-        id: 'edit'
-      },
-      {
-        icon: require('../../img/navicon_add.png'),
-        id: 'add'
-      }
-    ]
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      navBarVisibility: 'shown'
-    }
-  }
-  render() {
-    return (
-        <ScrollView style={styles.container}>
-          <View style={{flex: 1, backgroundColor: '#ffffff'}}>
-            <Text style={styles.button}>Row 0</Text>
-            <Text style={styles.button}>Row 1</Text>
-            <Text style={styles.button}>Row 2</Text>
-            <Text style={styles.button}>Row 3</Text>
-            <Text style={styles.button}>Row 4</Text>
-            <Text style={styles.button}>Row 5</Text>
-            <Text style={styles.button}>Row 6</Text>
-            <Text style={styles.button}>Row 7</Text>
-            <Text style={styles.button}>Row 8</Text>
-
-            <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
-              <Text style={styles.button}>Push Plain Screen</Text>
-            </TouchableOpacity>
-
-            <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
-              <Text style={styles.button}>Push Styled Screen</Text>
-            </TouchableOpacity>
-
-            <TouchableOpacity onPress={ this.onPushStyled2Press.bind(this) }>
-              <Text style={styles.button}>Push Styled Screen 2</Text>
-            </TouchableOpacity>
-
-            <TouchableOpacity onPress={ this.onModalPress.bind(this) }>
-              <Text style={styles.button}>Show Modal Screen</Text>
-            </TouchableOpacity>
-
-            <TouchableOpacity onPress={ this.onToggleNavBarPressed.bind(this) }>
-              <Text style={styles.button}>Toggle Navigation Bar</Text>
-            </TouchableOpacity>
-          </View>
-        </ScrollView>
-    );
-  }
-  onPushPress() {
-    this.props.navigator.push({
-      title: "More",
-      container: "example.PushedScreen"
-    });
-  }
-  onPushStyledPress() {
-    this.props.navigator.push({
-      title: "Styled",
-      container: "example.StyledScreen"
-    });
-  }
-  onPushStyled2Press () {
-    this.props.navigator.push({
-      title: "Styled",
-      titleImage: require('../../img/two.png'),
-      container: "example.StyledScreen"
-    });
-  }
-  onModalPress() {
-    this.props.navigator.showModal({
-      title: "Modal",
-      container: "example.ModalScreen"
-    });
-  }
-
-  onToggleNavBarPressed() {
-    this.state.navBarVisibility = (this.state.navBarVisibility === 'shown') ? 'hidden' : 'shown';
-    this.props.navigator.toggleNavBar({
-      to: this.state.navBarVisibility,
-      animated: true  // true is default
-    });
-  }
-
-  componentDidUpdate() {
-    console.error('this is an error: ' + Math.random());
-    this.state.navBarState = 'shown';
-  }
-
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-    backgroundColor: '#eeeeee'
-  },
-  button: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop:30,
-    color: 'blue'
-  }
-});

playground/src/__screens/FirstTabScreen.js

@@ -1,158 +0,0 @@
-import React, {Component} from 'react';
-import {
-  Text,
-  View,
-  TouchableOpacity,
-  StyleSheet,
-  Alert,
-  Platform
-} from 'react-native';
-import {Navigation} from 'react-native-navigation';
-
-export default class FirstTabScreen extends Component {
-  static navigatorButtons = {
-    leftButtons: [{
-      icon: require('../../img/navicon_menu.png'),
-      id: 'menu'
-    }],
-    rightButtons: [
-      {
-        title: 'Edit',
-        id: 'edit'
-      },
-      {
-        icon: require('../../img/navicon_add.png'),
-        id: 'add'
-      }
-    ]
-  };
-  static navigatorStyle = {
-    navBarBackgroundColor: '#4dbce9',
-    navBarTextColor: '#ffff00',
-    navBarSubtitleTextColor: '#ff0000',
-    navBarButtonColor: '#ffffff',
-    statusBarTextColorScheme: 'light',
-    tabBarBackgroundColor: '#4dbce9',
-    tabBarButtonColor: '#ffffff',
-    tabBarSelectedButtonColor: '#ffff00'
-  };
-
-  constructor(props) {
-    super(props);
-    // if you want to listen on navigator events, set this up
-    //this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
-  }
-
-  onNavigatorEvent(event) {
-    if (event.id === 'menu') {
-      this.props.navigator.toggleDrawer({
-        side: 'left',
-        animated: true
-      });
-    }
-    if (event.id === 'edit') {
-      Alert.alert('NavBar', 'Edit button pressed');
-    }
-    if (event.id === 'add') {
-      Alert.alert('NavBar', 'Add button pressed');
-    }
-  }
-
-  render() {
-    return (
-      <View style={{flex: 1, padding: 40}}>
-        <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
-          <Text style={styles.button}>Push Plain Screen</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
-          <Text style={styles.button}>Push Styled Screen</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onModalPress.bind(this) }>
-          <Text style={styles.button}>Show Modal Screen</Text>
-        </TouchableOpacity>
-
-        {
-          Platform.OS === 'ios' ?
-            <TouchableOpacity onPress={ this.onLightBoxPress.bind(this) }>
-              <Text style={styles.button}>Show LightBox</Text>
-            </TouchableOpacity> : false
-        }
-
-        {
-          Platform.OS === 'ios' ?
-            <TouchableOpacity onPress={ this.onInAppNotificationPress.bind(this) }>
-              <Text style={styles.button}>Show In-App Notification</Text>
-            </TouchableOpacity> : false
-        }
-
-        <TouchableOpacity onPress={ this.onStartSingleScreenApp.bind(this) }>
-          <Text style={styles.button}>Show Single Screen App</Text>
-        </TouchableOpacity>
-      </View>
-    );
-  }
-
-  onPushPress() {
-    this.props.navigator.push({
-      title: "More",
-      container: "com.example.PushedScreen"
-    });
-  }
-
-  onPushStyledPress() {
-    this.props.navigator.push({
-      title: "Styled",
-      container: "com.example.StyledScreen"
-    });
-  }
-
-  onModalPress() {
-    this.props.navigator.showModal({
-      title: "Modal",
-      container: "com.example.ModalScreen"
-    });
-  }
-
-  onLightBoxPress() {
-    this.props.navigator.showLightBox({
-      container: "com.example.LightBoxScreen",
-      style: {
-        backgroundBlur: "dark"
-      },
-      passProps: {
-        greeting: 'hey there'
-      },
-    });
-  }
-
-  onInAppNotificationPress() {
-    this.props.navigator.showInAppNotification({
-      container: "com.example.NotificationScreen"
-    });
-  }
-
-  onStartSingleScreenApp() {
-    Navigation.startSingleScreenApp({
-      container: {
-        container: 'com.example.FirstTabScreen'
-      },
-      drawer: {
-        left: {
-          container: 'com.example.SideMenu'
-        }
-      }
-    });
-  }
-}
-
-const styles = StyleSheet.create({
-  button: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop: 10,
-    color: 'blue'
-  }
-});

playground/src/__screens/LightBoxScreen.js

@@ -1,63 +0,0 @@
-import React, {Component} from 'react';
-import {
-  StyleSheet,
-  Text,
-  View,
-  TouchableOpacity,
-  Dimensions
-} from 'react-native';
-
-export default class LightBoxScreen extends Component {
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          This is a LightBox!
-        </Text>
-        {
-          this.props.greeting &&
-            <Text style={[styles.welcome, {fontSize: 16, marginTop: 20}]}>
-              {this.props.greeting}
-            </Text>
-        }
-        <TouchableOpacity onPress={() => this.onDismissPress()}>
-          <Text style={styles.button}>Dismiss</Text>
-        </TouchableOpacity>
-      </View>
-    );
-  }
-  onDismissPress() {
-    this.props.navigator.dismissLightBox();
-  }
-}
-
-var styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: Dimensions.get('window').width * 0.8,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white',
-    borderRadius: 10
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-  button: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop:10,
-    color: 'blue'
-  }
-});

playground/src/__screens/ModalScreen.js

@@ -1,83 +0,0 @@
-import React, {Component} from 'react';
-import {
-  Text,
-  View,
-  ScrollView,
-  TouchableOpacity,
-  StyleSheet
-} from 'react-native';
-
-export default class ModalScreen extends Component {
-  static navigatorButtons = {
-    leftButtons: [{
-      title: 'Close',
-      id: 'close'
-    }]
-  };
-  constructor(props) {
-    super(props);
-    // if you want to listen on navigator events, set this up
-    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
-  }
-  render() {
-    return (
-      <View style={styles.container}>
-
-        <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
-          <Text style={styles.button}>Push Plain Screen</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
-          <Text style={styles.button}>Push Styled Screen</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onClosePress.bind(this) }>
-          <Text style={styles.button}>Close Modal</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onCloseAllPress.bind(this) }>
-          <Text style={styles.button}>Close All Modals</Text>
-        </TouchableOpacity>
-
-      </View>
-    );
-  }
-  onNavigatorEvent(event) {
-    if (event.id == 'close') {
-      this.props.navigator.dismissModal();
-    }
-  }
-  onPushPress() {
-    this.props.navigator.push({
-      title: "More",
-      container: "com.example.PushedScreen"
-    });
-  }
-  onPushStyledPress() {
-    this.props.navigator.push({
-      title: "More",
-      container: "com.example.StyledScreen"
-    });
-  }
-  onClosePress() {
-    this.props.navigator.dismissModal();
-  }
-  onCloseAllPress() {
-    this.props.navigator.dismissAllModals();
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'white',
-    padding: 20
-  },
-  button: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop:10,
-    color: 'blue'
-  }
-});

playground/src/__screens/NotificationScreen.js

@@ -1,52 +0,0 @@
-import React, {Component} from 'react';
-import {
-  StyleSheet,
-  Text,
-  View,
-  TouchableOpacity,
-  Dimensions
-} from 'react-native';
-
-export default class NotificationScreen extends Component {
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          This is a Notification!
-        </Text>
-        <TouchableOpacity onPress={ this.onDismissPress.bind(this) }>
-          <Text style={styles.button}>Dismiss</Text>
-        </TouchableOpacity>
-      </View>
-    );
-  }
-  onDismissPress() {
-    this.props.navigator.dismissInAppNotification();
-  }
-}
-
-var styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: Dimensions.get('window').width,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#d6e7ad'
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-    paddingTop: 20
-  },
-  button: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop:10,
-    color: '#4692ad'
-  }
-});

playground/src/__screens/PushedScreen.js

@@ -1,81 +0,0 @@
-import React, {Component} from 'react';
-import {
-  Text,
-  View,
-  ScrollView,
-  TouchableOpacity,
-  StyleSheet
-} from 'react-native';
-
-export default class PushedScreen extends Component {
-  static navigatorStyle = {
-    drawUnderTabBar: true
-  };
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    return (
-      <View style={styles.container}>
-        <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
-          <Text style={styles.button}>Push Plain Screen</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
-          <Text style={styles.button}>Push Styled Screen</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onPopPress.bind(this) }>
-          <Text style={styles.button}>Pop Screen</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onPopToRootPress.bind(this) }>
-          <Text style={styles.button}>Pop To Root</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onResetToPress.bind(this) }>
-          <Text style={styles.button}>Reset To</Text>
-        </TouchableOpacity>
-      </View>
-    );
-  }
-  onPushPress() {
-    this.props.navigator.push({
-      title: "More",
-      container: "example.PushedScreen"
-    });
-  }
-  onPushStyledPress() {
-    this.props.navigator.push({
-      title: "More",
-      container: "com.example.StyledScreen"
-    });
-  }
-  onPopPress() {
-    this.props.navigator.pop();
-  }
-  onPopToRootPress() {
-    this.props.navigator.popToRoot();
-  }
-  onResetToPress() {
-    this.props.navigator.resetTo({
-      title: "New Root",
-      container: "com.example.ThirdTabScreen"
-    });
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-    backgroundColor: 'white'
-  },
-  button: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop:10,
-    color: 'blue'
-  }
-});

playground/src/__screens/SecondTabScreen.js

@@ -1,146 +0,0 @@
-import React, {Component} from 'react';
-import {
-  Text,
-  View,
-  ScrollView,
-  TouchableOpacity,
-  StyleSheet,
-  Alert
-} from 'react-native';
-
-export default class SecondTabScreen extends Component {
-  static navigatorStyle: {
-    drawUnderTabBar: true,
-    navBarBackgroundColor: '#4dbce9',
-    navBarTextColor: '#ffff00',
-    navBarSubtitleTextColor: '#ff0000',
-    navBarButtonColor: '#ffffff',
-    statusBarTextColorScheme: 'light'
-  };
-
-  constructor(props) {
-    super(props);
-    this.buttonsCounter = 0;
-    // if you want to listen on navigator events, set this up
-    //this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
-  }
-
-  render() {
-    return (
-      <View style={styles.container}>
-
-        <TouchableOpacity onPress={ this.onChangeButtonsPress.bind(this) }>
-          <Text style={styles.button}>Change Buttons</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onChangeTitlePress.bind(this) }>
-          <Text style={styles.button}>Change Title</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onSwitchTabPress.bind(this) }>
-          <Text style={styles.button}>Switch To Tab#1</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onSetTabBadgePress.bind(this) }>
-          <Text style={styles.button}>Set Tab Badge</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onToggleTabsPress.bind(this) }>
-          <Text style={styles.button}>Toggle Tabs</Text>
-        </TouchableOpacity>
-
-      </View>
-    );
-  }
-  onChangeTitlePress() {
-    this.props.navigator.setTitle({
-      title: Math.round(Math.random() * 100000).toString()
-    });
-  }
-  onChangeButtonsPress() {
-    let buttons;
-    if (this.buttonsCounter % 3 == 0) {
-      buttons = [
-        {
-          title: 'Edit',
-          id: 'edit',
-          disabled: true
-        },
-        {
-          icon: require('../../img/navicon_add.png'),
-          id: 'add'
-        }
-      ];
-    } else if (this.buttonsCounter % 3 == 1) {
-      buttons = [{
-        title: 'Save',
-        id: 'save'
-      }];
-    } else {
-      buttons = [];
-    }
-    this.buttonsCounter++;
-
-    this.props.navigator.setButtons({
-      rightButtons: buttons,
-      animated: true
-    });
-  }
-  onSwitchTabPress() {
-    this.props.navigator.switchToTab({
-      tabIndex: 0
-    });
-  }
-  onSetTabBadgePress() {
-    this.props.navigator.setTabBadge({
-      badge: 12
-    });
-  }
-  onToggleTabsPress() {
-    this.props.navigator.toggleTabs({
-      to: this.tabsHidden ? 'shown' : 'hidden'
-    });
-    this.tabsHidden = !this.tabsHidden;
-  }
-  onNavigatorEvent(event) {
-    // handle a deep link
-    if (event.type == 'DeepLink') {
-      const parts = event.link.split('/');
-      if (parts[0] == 'tab2') {
-        this.props.navigator.resetTo({
-          title: "Replaced Root",
-          container: parts[1],
-          animated: true
-        });
-        this.props.navigator.switchToTab();
-      }
-    }
-    // handle a button press
-    if (event.type == 'NavBarButtonPress') {
-      if (event.id == 'edit') {
-        Alert.alert('NavBar', 'Dynamic Edit button pressed');
-      }
-      if (event.id == 'add') {
-        Alert.alert('NavBar', 'Dynamic Add button pressed');
-      }
-      if (event.id == 'save') {
-        Alert.alert('NavBar', 'Dynamic Save button pressed');
-      }
-    }
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-    backgroundColor: 'white'
-  },
-  button: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop:10,
-    color: 'blue'
-  }
-});

playground/src/__screens/SideMenu.js

@@ -1,79 +0,0 @@
-import React, {Component} from 'react';
-import {
-  Text,
-  View,
-  ScrollView,
-  TouchableOpacity,
-  StyleSheet,
-  AlertIOS
-} from 'react-native';
-
-export default class SideMenu extends Component {
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.title}>Side Menu</Text>
-
-        <TouchableOpacity onPress={ this.onReplaceTab2Press.bind(this) }>
-          <Text style={styles.button}>Replace Tab#2 Root</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onModalPress.bind(this) }>
-          <Text style={styles.button}>Show Modal Screen</Text>
-        </TouchableOpacity>
-      </View>
-    );
-  }
-  onReplaceTab2Press() {
-    this._toggleDrawer();
-    // push/pop navigator actions affect the navigation stack of the current screen only.
-    // since side menu actions are normally directed at sibling tabs, push/pop will
-    // not help us. the recommended alternative is to use deep links for this purpose
-    this.props.navigator.handleDeepLink({
-      link: "tab2/example.PushedScreen"
-    });
-  }
-
-  onModalPress() {
-    this._toggleDrawer();
-    this.props.navigator.showModal({
-      title: "Modal",
-      container: "example.ModalScreen"
-    });
-  }
-
-  _toggleDrawer() {
-    this.props.navigator.toggleDrawer({
-      to: 'closed',
-      side: 'left',
-      animated: true
-    });
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    backgroundColor: 'white',
-    justifyContent: 'center',
-    width: 300
-  },
-  title: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop:10,
-    fontWeight: '500'
-  },
-  button: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop:10,
-    color: 'blue'
-  }
-});

playground/src/__screens/StyledScreen.js

@@ -1,121 +0,0 @@
-import React, {Component} from 'react';
-import {
-  Text,
-  View,
-  ScrollView,
-  TouchableOpacity,
-  Image,
-  StyleSheet,
-  Alert,
-  Platform
-} from 'react-native';
-
-export default class StyledScreen extends Component {
-  static navigatorStyle = {
-    drawUnderNavBar: true,
-    drawUnderTabBar: true,
-    navBarTranslucent: true
-  };
-  static navigatorButtons = {
-    rightButtons: [{
-      icon: require('../../img/navicon_edit.png'),
-      id: 'compose',
-      testID: 'e2e_is_awesome'
-    }]
-  };
-  constructor(props) {
-    super(props);
-    // if you want to listen on navigator events, set this up
-    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
-  }
-  render() {
-    return (
-      <ScrollView style={styles.container}>
-        <Image style={{width: undefined, height: 100}} source={require('../../img/colors.png')} />
-
-        <View style={{padding: 20}}>
-          <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
-            <Text style={styles.button}>Push Plain Screen</Text>
-          </TouchableOpacity>
-
-          <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
-            <Text style={styles.button}>Push Styled Screen</Text>
-          </TouchableOpacity>
-
-          <TouchableOpacity onPress={ this.onPopPress.bind(this) }>
-            <Text style={styles.button}>Pop Screen</Text>
-          </TouchableOpacity>
-
-          <TouchableOpacity onPress={ this.onSetSubtitlePress.bind(this) }>
-            <Text style={styles.button}>Set Subtitle</Text>
-          </TouchableOpacity>
-
-          <TouchableOpacity onPress={ this.onSetTitleImagePress.bind(this) }>
-            <Text style={styles.button}>Set Title Image</Text>
-          </TouchableOpacity>
-        </View>
-
-      </ScrollView>
-    );
-  }
-  onNavigatorEvent(event) {
-    if (event.id == 'compose') {
-      Alert.alert('NavBar', 'Compose button pressed');
-    }
-  }
-  onPushPress() {
-    this.props.navigator.push({
-      title: "More",
-      container: "com.example.PushedScreen"
-    });
-  }
-  onPushStyledPress() {
-    this.props.navigator.push({
-      title: "More",
-      container: "com.example.StyledScreen"
-    });
-  }
-  onPopPress() {
-    this.props.navigator.pop();
-  }
-
-  onSetSubtitlePress() {
-    if (Platform.OS === 'android') {
-      this.props.navigator.setSubTitle({
-        subtitle: 'Subtitle'
-      });
-    } else {
-      this.props.navigator.setTitle({
-        title: 'title',
-        subtitle: 'subtitle',
-        navigatorStyle: {
-          navBarSubtitleTextColor: '#ff00ff',
-          navBarTextColor: '#ffff00'
-
-        }
-      })
-    }
-  }
-
-  onSetTitleImagePress() {
-    this.props.navigator.setTitle({
-      title: 'title',
-      titleImage: require('../../img/one.png'),
-    })
-  }
-
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'white'
-  },
-  button: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop:10,
-    color: 'blue'
-  }
-});

playground/src/__screens/index.android.js

@@ -1,20 +0,0 @@
-import {Navigation} from 'react-native-navigation';
-
-import FirstTabScreen from './FirstTabScreen';
-import SecondTabScreen from './SecondTabScreen';
-import PushedScreen from './PushedScreen';
-import StyledScreen from './StyledScreen';
-import SideMenu from './SideMenu';
-import ModalScreen from './ModalScreen';
-import CollapsingTopBarScreen from './CollapsingTopBarScreen';
-
-// register all screens of the app (including internal ones)
-export function registerScreens() {
-  Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);
-  Navigation.registerComponent('example.SecondTabScreen', () => SecondTabScreen);
-  Navigation.registerComponent('example.PushedScreen', () => PushedScreen);
-  Navigation.registerComponent('example.StyledScreen', () => StyledScreen);
-  Navigation.registerComponent('example.ModalScreen', () => ModalScreen);
-  Navigation.registerComponent('example.SideMenu', () => SideMenu);
-  Navigation.registerComponent('example.CollapsingTopBarScreen', () => CollapsingTopBarScreen);
-}

playground/src/__screens/index.ios.js

@@ -1,28 +0,0 @@
-import {Navigation} from 'react-native-navigation';
-
-import FirstTabScreen from './FirstTabScreen';
-import SecondTabScreen from './SecondTabScreen';
-import PushedScreen from './PushedScreen';
-import StyledScreen from './StyledScreen';
-import SideMenu from './SideMenu';
-import ModalScreen from './ModalScreen';
-import NotificationScreen from './NotificationScreen';
-import LightBoxScreen from './LightBoxScreen';
-
-// register all screens of the app (including internal ones)
-export function registerScreens() {
-  Navigation.registerComponent('com.example.FirstTabScreen', () => FirstTabScreen);
-  Navigation.registerComponent('com.example.SecondTabScreen', () => SecondTabScreen);
-  Navigation.registerComponent('com.example.PushedScreen', () => PushedScreen);
-  Navigation.registerComponent('com.example.StyledScreen', () => StyledScreen);
-  Navigation.registerComponent('com.example.ModalScreen', () => ModalScreen);
-  Navigation.registerComponent('com.example.NotificationScreen', () => NotificationScreen);
-  Navigation.registerComponent('com.example.SideMenu', () => SideMenu);
-  Navigation.registerComponent('com.example.LightBoxScreen', () => LightBoxScreen);
-	
-  Navigation.registerComponent('com.example.MyScreen', () => FirstTabScreen);
-  Navigation.registerComponent('com.example.Menu', () => SideMenu);
-  Navigation.registerComponent('com.example.Menu1', () => SideMenu);
-  Navigation.registerComponent('com.example.Menu2', () => SideMenu);
-	
-}

playground/src/app.js

@@ -1,10 +1,38 @@
-import Navigation from 'react-native-navigation';
+import React, {Component} from 'react';
+import {AppRegistry, View, Text} from 'react-native';
+
+//import Navigation from 'react-native-navigation';
+
+const styles = {
+  root: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5fcff'
+  },
+  h1: {
+    fontSize: 24,
+    textAlign: 'center',
+    margin: 10
+  }
+};
+
+class WelcomeScreen extends Component {
+  render() {
+    return (
+      <View style={styles.root}>
+        <Text style={styles.h1}>{`React Native Navigation!`}</Text>
+      </View>
+    );
+  }
+}
 
 export function start() {
-  Navigation.startApp({
-    container: {
-      key: 'com.example.WelcomeScreen'
-    }
-  });
+  AppRegistry.registerComponent('com.example.WelcomeScreen', () => WelcomeScreen);
+  //Navigation.startApp({
+  //  container: {
+  //    key: 'com.example.WelcomeScreen'
+  //  }
+  //});
 }
 

src/commands/Commands.test.js

@@ -9,11 +9,11 @@ describe('Commands', () => {
     it('receives params object', () => {
       uut.startApp({
         containerKey: {
-          container: 'example.MyContainer'
+          root: 'example.MyContainer'
         },
         drawer: {
           left: {
-            container: 'example.SideMenu'
+            root: 'example.SideMenu'
           }
         }
       });