adding example content

example-redux/package.json

@@ -1,11 +1,12 @@
 {
-  "name": "exampleRedux",
+  "name": "example-redux",
   "version": "0.0.1",
   "private": true,
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start"
   },
   "dependencies": {
-    "react-native": "^0.21.0"
+    "react-native": "^0.21.0",
+    "react-native-navigation": "latest"
   }
 }

example/index.ios.js

@@ -1,52 +1 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- */
-'use strict';
-import React, {
-  AppRegistry,
-  Component,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
-
-class example extends Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.ios.js
-        </Text>
-        <Text style={styles.instructions}>
-          Press Cmd+R to reload,{'\n'}
-          Cmd+D or shake for dev menu
-        </Text>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
-
-AppRegistry.registerComponent('example', () => example);
+import App from './src/app';

example/ios/example.xcodeproj/project.pbxproj

@@ -22,6 +22,7 @@
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
+		CCCF226F1C9379C300455574 /* libReactNativeControllers.a in Frameworks */ = {isa = PBXBuildFile; fileRef = CCCF226E1C9379B000455574 /* libReactNativeControllers.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -102,20 +103,27 @@
 			remoteGlobalIDString = 58B5119B1A9E6C1200147676;
 			remoteInfo = RCTText;
 		};
+		CCCF226D1C9379B000455574 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = CCCF225F1C9379AF00455574 /* ReactNativeControllers.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = D8AFADBD1BEE6F3F00A4592D;
+			remoteInfo = ReactNativeControllers;
+		};
 /* End PBXContainerItemProxy section */
 
 /* Begin PBXFileReference section */
-		008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; name = main.jsbundle; path = main.jsbundle; sourceTree = "<group>"; };
-		00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = ../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj; sourceTree = "<group>"; };
-		00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = ../node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj; sourceTree = "<group>"; };
-		00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = ../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj; sourceTree = "<group>"; };
-		00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = ../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj; sourceTree = "<group>"; };
-		00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = ../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj; sourceTree = "<group>"; };
+		008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = main.jsbundle; sourceTree = "<group>"; };
+		00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = "../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj"; sourceTree = "<group>"; };
+		00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = "../node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj"; sourceTree = "<group>"; };
+		00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = "../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj"; sourceTree = "<group>"; };
+		00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = "../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj"; sourceTree = "<group>"; };
+		00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = "../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj"; sourceTree = "<group>"; };
 		00E356EE1AD99517003FC87E /* exampleTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = exampleTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		00E356F21AD99517003FC87E /* exampleTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = exampleTests.m; sourceTree = "<group>"; };
-		139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = ../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj; sourceTree = "<group>"; };
-		139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = ../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj; sourceTree = "<group>"; };
+		139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = "../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj"; sourceTree = "<group>"; };
+		139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = "../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj"; sourceTree = "<group>"; };
 		13B07F961A680F5B00A75B9A /* example.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = example.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = example/AppDelegate.h; sourceTree = "<group>"; };
 		13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = example/AppDelegate.m; sourceTree = "<group>"; };
@@ -123,9 +131,10 @@
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = example/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = example/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = example/main.m; sourceTree = "<group>"; };
-		146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = ../node_modules/react-native/React/React.xcodeproj; sourceTree = "<group>"; };
-		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = ../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj; sourceTree = "<group>"; };
-		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = ../node_modules/react-native/Libraries/Text/RCTText.xcodeproj; sourceTree = "<group>"; };
+		146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../node_modules/react-native/React/React.xcodeproj"; sourceTree = "<group>"; };
+		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
+		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
+		CCCF225F1C9379AF00455574 /* ReactNativeControllers.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = ReactNativeControllers.xcodeproj; path = "../node_modules/react-native-controllers/ios/ReactNativeControllers.xcodeproj"; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -140,6 +149,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				CCCF226F1C9379C300455574 /* libReactNativeControllers.a in Frameworks */,
 				146834051AC3E58100842450 /* libReact.a in Frameworks */,
 				00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */,
 				00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */,
@@ -272,6 +282,7 @@
 				832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
 				00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */,
 				139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
+				CCCF225F1C9379AF00455574 /* ReactNativeControllers.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -305,6 +316,14 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		CCCF22601C9379AF00455574 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				CCCF226E1C9379B000455574 /* libReactNativeControllers.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -411,6 +430,10 @@
 					ProductGroup = 146834001AC3E56700842450 /* Products */;
 					ProjectRef = 146833FF1AC3E56700842450 /* React.xcodeproj */;
 				},
+				{
+					ProductGroup = CCCF22601C9379AF00455574 /* Products */;
+					ProjectRef = CCCF225F1C9379AF00455574 /* ReactNativeControllers.xcodeproj */;
+				},
 			);
 			projectRoot = "";
 			targets = (
@@ -491,6 +514,13 @@
 			remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		CCCF226E1C9379B000455574 /* libReactNativeControllers.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libReactNativeControllers.a;
+			remoteRef = CCCF226D1C9379B000455574 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 /* End PBXReferenceProxy section */
 
 /* Begin PBXResourcesBuildPhase section */
@@ -526,7 +556,6 @@
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
 			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/packager/react-native-xcode.sh";
-			showEnvVarsInLog = 1;
 		};
 /* End PBXShellScriptBuildPhase section */
 
@@ -617,8 +646,9 @@
 					"$(inherited)",
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../node_modules/react-native/React/**",
+					"$(SRCROOT)/../node_modules/react-native-controllers/ios/**",
 				);
-				INFOPLIST_FILE = "example/Info.plist";
+				INFOPLIST_FILE = example/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_NAME = example;
@@ -633,8 +663,9 @@
 					"$(inherited)",
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../node_modules/react-native/React/**",
+					"$(SRCROOT)/../node_modules/react-native-controllers/ios/**",
 				);
-				INFOPLIST_FILE = "example/Info.plist";
+				INFOPLIST_FILE = example/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_NAME = example;

example/ios/example/AppDelegate.m

@@ -8,7 +8,7 @@
  */
 
 #import "AppDelegate.h"
-
+#import "RCCManager.h" // <---- NOTICE ME
 #import "RCTRootView.h"
 
 @implementation AppDelegate
@@ -41,16 +41,10 @@
 
 //   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
 
-  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
-                                                      moduleName:@"example"
-                                               initialProperties:nil
-                                                   launchOptions:launchOptions];
-
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
-  UIViewController *rootViewController = [UIViewController new];
-  rootViewController.view = rootView;
-  self.window.rootViewController = rootViewController;
-  [self.window makeKeyAndVisible];
+  self.window.backgroundColor = [UIColor whiteColor];
+  [[RCCManager sharedIntance] initBridgeWithBundleURL:jsCodeLocation]; //<---- NOTICE ME
+  
   return YES;
 }
 

example/package.json

@@ -6,6 +6,7 @@
     "start": "node node_modules/react-native/local-cli/cli.js start"
   },
   "dependencies": {
-    "react-native": "^0.21.0"
+    "react-native": "^0.21.0",
+    "react-native-navigation": "latest"
   }
 }

example/src/app.js

@@ -0,0 +1,36 @@
+import { Navigation } from 'react-native-navigation';
+
+import './screens/FirstTabScreen';
+import './screens/SecondTabScreen';
+import './screens/ThirdTabScreen';
+
+Navigation.startTabBasedApp({
+  tabs: [
+    {
+      title: 'One',
+      screen: 'example.FirstTabScreen',
+      icon: require('../img/one.png'),
+      selectedIcon: require('../img/one_selected.png'),
+      screenTitle: 'Screen One'
+    },
+    {
+      title: 'Two',
+      screen: 'example.SecondTabScreen',
+      icon: require('../img/two.png'),
+      selectedIcon: require('../img/two_selected.png'),
+      screenTitle: 'Screen Two'
+    },
+    {
+      title: 'Three',
+      screen: 'example.ThirdTabScreen',
+      icon: require('../img/three.png'),
+      selectedIcon: require('../img/three_selected.png'),
+      screenTitle: 'Screen Three',
+      navigatorStyle: {
+        navBarBackgroundColor: '#26ade4',
+        navBarTextColor: '#f0f0f0',
+        navBarButtonColor: '#ffffff'
+      }
+    }
+  ]
+});

example/src/screens/FirstTabScreen.js

@@ -0,0 +1,61 @@
+import React, {
+  Text,
+  View,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet
+} from 'react-native';
+
+// important imports, the magic is here
+import { Navigation, Screen } from 'react-native-navigation';
+
+// need to import every screen we push
+import './PushedScreen';
+import './StyledScreen';
+
+// instead of React.Component, we extend Screen (imported above)
+class FirstTabScreen extends Screen {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <View style={{flex: 1, 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>
+
+      </View>
+    );
+  }
+  onPushPress() {
+    this.navigator.push({
+      title: "More",
+      screen: "example.PushedScreen"
+    });
+  }
+  onPushStyledPress() {
+    this.navigator.push({
+      title: "More",
+      screen: "example.StyledScreen"
+    });
+  }
+}
+
+const styles = StyleSheet.create({
+  button: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginBottom: 10,
+    marginTop:10,
+    color: 'blue'
+  }
+});
+
+// every screen must be registered with a unique name
+Navigation.registerScreen('example.FirstTabScreen', () => FirstTabScreen);

example/src/screens/PushedScreen.js

@@ -0,0 +1,68 @@
+import React, {
+  Text,
+  View,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet
+} from 'react-native';
+
+// important imports, the magic is here
+import { Navigation, Screen } from 'react-native-navigation';
+
+// need to import every screen we push
+import './PushedScreen';
+import './StyledScreen';
+
+// instead of React.Component, we extend Screen (imported above)
+class PushedScreen extends Screen {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <View style={{flex: 1, 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>
+
+      </View>
+    );
+  }
+  onPushPress() {
+    this.navigator.push({
+      title: "More",
+      screen: "example.PushedScreen"
+    });
+  }
+  onPushStyledPress() {
+    this.navigator.push({
+      title: "More",
+      screen: "example.StyledScreen"
+    });
+  }
+  onPopPress() {
+    this.navigator.pop();
+  }
+}
+
+const styles = StyleSheet.create({
+  button: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginBottom: 10,
+    marginTop:10,
+    color: 'blue'
+  }
+});
+
+// every screen must be registered with a unique name
+Navigation.registerScreen('example.PushedScreen', () => PushedScreen);

example/src/screens/SecondTabScreen.js

@@ -0,0 +1,26 @@
+import React, {
+  Text,
+  View,
+  ScrollView,
+  TouchableOpacity
+} from 'react-native';
+
+// important imports, the magic is here
+import { Navigation, Screen } from 'react-native-navigation';
+
+// instead of React.Component, we extend Screen (imported above)
+class SecondTabScreen extends Screen {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <View style={{flex: 1, padding: 20}}>
+        <Text>Second Tab Screen</Text>
+      </View>
+    );
+  }
+}
+
+// every screen must be registered with a unique name
+Navigation.registerScreen('example.SecondTabScreen', () => SecondTabScreen);

example/src/screens/StyledScreen.js

@@ -0,0 +1,79 @@
+import React, {
+  Text,
+  View,
+  ScrollView,
+  TouchableOpacity,
+  Image,
+  StyleSheet
+} from 'react-native';
+
+// important imports, the magic is here
+import { Navigation, Screen } from 'react-native-navigation';
+
+// need to import every screen we push
+import './PushedScreen';
+import './StyledScreen';
+
+// instead of React.Component, we extend Screen (imported above)
+class StyledScreen extends Screen {
+  static navigatorStyle = {
+    drawUnderNavBar: true,
+    drawUnderTabBar: true
+  };
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <ScrollView style={{flex: 1}}>
+
+        <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>
+
+        </View>
+
+      </ScrollView>
+    );
+  }
+  onPushPress() {
+    this.navigator.push({
+      title: "More",
+      screen: "example.PushedScreen"
+    });
+  }
+  onPushStyledPress() {
+    this.navigator.push({
+      title: "More",
+      screen: "example.StyledScreen"
+    });
+  }
+  onPopPress() {
+    this.navigator.pop();
+  }
+}
+
+const styles = StyleSheet.create({
+  button: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginBottom: 10,
+    marginTop:10,
+    color: 'blue'
+  }
+});
+
+// every screen must be registered with a unique name
+Navigation.registerScreen('example.StyledScreen', () => StyledScreen);

example/src/screens/ThirdTabScreen.js

@@ -0,0 +1,26 @@
+import React, {
+  Text,
+  View,
+  ScrollView,
+  TouchableOpacity
+} from 'react-native';
+
+// important imports, the magic is here
+import { Navigation, Screen } from 'react-native-navigation';
+
+// instead of React.Component, we extend Screen (imported above)
+class ThirdTabScreen extends Screen {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <View style={{flex: 1, padding: 20}}>
+        <Text>Third Tab Screen</Text>
+      </View>
+    );
+  }
+}
+
+// every screen must be registered with a unique name
+Navigation.registerScreen('example.ThirdTabScreen', () => ThirdTabScreen);

src/platformSpecific.ios.js

@@ -22,6 +22,10 @@ function startTabBasedApp(params) {
         {
           params.tabs.map(function(tab, index) {
             const navigatorID = appID + '_nav' + index;
+            if (!tab.screen) {
+              console.error('startTabBasedApp(params): every tab must include a screen property, take a look at tab#' + (index+1));
+              return;
+            }
             const screenClass = Navigation.getRegisteredScreen(tab.screen);
             if (!screenClass) {
               console.error('Cannot create screen ' + tab.screen + '. Are you it was registered with Navigation.registerScreen?');
@@ -62,6 +66,10 @@ function startSingleScreenApp(params) {
     render: function() {
       const screen = params.screen;
       const navigatorID = appID + '_nav';
+      if (!screen.screen) {
+        console.error('startSingleScreenApp(params): screen must include a screen property');
+        return;
+      }
       const screenClass = Navigation.getRegisteredScreen(screen.screen);
       if (!screenClass) {
         console.error('Cannot create screen ' + screen.screen + '. Are you it was registered with Navigation.registerScreen?');