release 0.1.0, redux support, explicit setOnNavigatorEvent, simplified API - no more direct work with Screen

RELEASES.md

@@ -0,0 +1,3 @@
+# Release Notes
+
+### 0.1.0

example-redux/README.md

@@ -0,0 +1,17 @@
+# example-redux
+
+A simple usage example for an app based on redux. If you're not using redux, take a look at [example](../example) (without redux). The non-redux example will also include more examples of pure navigation features since we don't want to maintain two full examples. Make sure to look at it as well.
+
+## Installation - iOS
+
+* In the `example/` folder, run `npm install`
+
+> Make sure you're using npm ver 3. If you normally use npm ver 2 on your system and reluctant to upgrade, you can install [npm 3 alongside 2](https://www.npmjs.com/package/npm3). For more details see https://github.com/wix/react-native-navigation/issues/1. In addition, redux also causes some issues with npm 2. If you have to use npm 2 on this project, fix those by running `npm run fix_npm2` in your project directory after running `npm install`.
+
+* Open `example/ios/example.xcodeproj` in Xcode and press the play button
+
+## Folder Structure
+
+* `screens/` - all your app screens, every screen is a redux connected ("smart") component
+* `components/` - all react sub-components, they are not aware of redux ("dumb") and get everything by props
+* `reducers/` - all of your redux goodness (reducts and their actions) goes here, all business logic should be here

example-redux/index.android.js

@@ -16,13 +16,7 @@ class exampleRedux extends Component {
     return (
       <View style={styles.container}>
         <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.android.js
-        </Text>
-        <Text style={styles.instructions}>
-          Shake or press menu button for dev menu
+          Coming Soon
         </Text>
       </View>
     );

example-redux/index.ios.js

@@ -1,52 +1,3 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- */
-'use strict';
-import React, {
-  AppRegistry,
-  Component,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
+import App from './src/app';
 
-class exampleRedux 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('exampleRedux', () => exampleRedux);
+const app = new App();

example-redux/ios/exampleRedux.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 */; };
+		CCCF23211C9C238500455574 /* libReactNativeControllers.a in Frameworks */ = {isa = PBXBuildFile; fileRef = CCCF23201C9C236100455574 /* libReactNativeControllers.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -102,20 +103,27 @@
 			remoteGlobalIDString = 58B5119B1A9E6C1200147676;
 			remoteInfo = RCTText;
 		};
+		CCCF231F1C9C236100455574 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = CCCF23111C9C236100455574 /* 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 /* exampleReduxTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = exampleReduxTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		00E356F21AD99517003FC87E /* exampleReduxTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = exampleReduxTests.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 /* exampleRedux.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = exampleRedux.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = exampleRedux/AppDelegate.h; sourceTree = "<group>"; };
 		13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = exampleRedux/AppDelegate.m; sourceTree = "<group>"; };
@@ -123,9 +131,10 @@
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = exampleRedux/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = exampleRedux/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = exampleRedux/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>"; };
+		CCCF23111C9C236100455574 /* 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 = (
+				CCCF23211C9C238500455574 /* 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 */,
+				CCCF23111C9C236100455574 /* ReactNativeControllers.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -305,6 +316,14 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		CCCF23121C9C236100455574 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				CCCF23201C9C236100455574 /* libReactNativeControllers.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -411,6 +430,10 @@
 					ProductGroup = 146834001AC3E56700842450 /* Products */;
 					ProjectRef = 146833FF1AC3E56700842450 /* React.xcodeproj */;
 				},
+				{
+					ProductGroup = CCCF23121C9C236100455574 /* Products */;
+					ProjectRef = CCCF23111C9C236100455574 /* ReactNativeControllers.xcodeproj */;
+				},
 			);
 			projectRoot = "";
 			targets = (
@@ -491,6 +514,13 @@
 			remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		CCCF23201C9C236100455574 /* libReactNativeControllers.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libReactNativeControllers.a;
+			remoteRef = CCCF231F1C9C236100455574 /* 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 = "exampleRedux/Info.plist";
+				INFOPLIST_FILE = exampleRedux/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_NAME = exampleRedux;
@@ -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 = "exampleRedux/Info.plist";
+				INFOPLIST_FILE = exampleRedux/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_NAME = exampleRedux;

example-redux/ios/exampleRedux/AppDelegate.m

@@ -1,14 +1,13 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- */
-
 #import "AppDelegate.h"
 
+// **********************************************
+// *** DON'T MISS: THE NEXT LINE IS IMPORTANT ***
+// **********************************************
+#import "RCCManager.h"
+
+// IMPORTANT: if you're getting an Xcode error that RCCManager.h isn't found, you've probably ran "npm install"
+// with npm ver 2. You'll need to "npm install" with npm 3 (see https://github.com/wix/react-native-navigation/issues/1)
+
 #import "RCTRootView.h"
 
 @implementation AppDelegate
@@ -16,41 +15,31 @@
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
   NSURL *jsCodeLocation;
-
-  /**
-   * Loading JavaScript code - uncomment the one you want.
-   *
-   * OPTION 1
-   * Load from development server. Start the server from the repository root:
-   *
-   * $ npm start
-   *
-   * To run on device, change `localhost` to the IP address of your computer
-   * (you can get this by typing `ifconfig` into the terminal and selecting the
-   * `inet` value under `en0:`) and make sure your computer and iOS device are
-   * on the same Wi-Fi network.
-   */
-
   jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
-
-  /**
-   * OPTION 2
-   * Load from pre-bundled file on disk. The static bundle is automatically
-   * generated by "Bundle React Native code and images" build step.
-   */
-
-//   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
-
-  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
-                                                      moduleName:@"exampleRedux"
-                                               initialProperties:nil
-                                                   launchOptions:launchOptions];
-
+  // jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+  
+  
+  // **********************************************
+  // *** DON'T MISS: THIS IS HOW WE BOOTSTRAP *****
+  // **********************************************
   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];
+  
+  /*
+   // original RN bootstrap - remove this part
+   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];
+   */
+  
+  
   return YES;
 }
 

example-redux/ios/exampleRedux/Info.plist

@@ -15,7 +15,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.0</string>
+	<string>1.0.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
@@ -35,14 +35,13 @@
 		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
-	<false/>
+	<true/>
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string></string>
-  <key>NSAppTransportSecurity</key>
-  <dict>
-    <!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
-    <key>NSAllowsArbitraryLoads</key>
-    <true/>
-  </dict>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSAllowsArbitraryLoads</key>
+		<true/>
+	</dict>
 </dict>
 </plist>

example-redux/package.json

@@ -3,10 +3,18 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "start": "node node_modules/react-native/local-cli/cli.js start"
+    "start": "node node_modules/react-native/local-cli/cli.js start",
+    "fix_npm2": "npm run _fix_npm2_step1; npm run _fix_npm2_step2",
+    "_fix_npm2_step1": "rm -rf node_modules/react-native/node_modules/react; rm -rf node_modules/react-native/node_modules/fbjs; rm -rf node_modules/react/node_modules/fbjs",
+    "_fix_npm2_step2": "cd node_modules; find . -name .babelrc | grep -v packager | xargs rm"
   },
   "dependencies": {
     "react-native": "^0.21.0",
+    "fbjs": "^0.6.1",
+    "react-redux": "^4.0.6",
+    "redux": "^3.0.5",
+    "redux-thunk": "^1.0.3",
+    "seamless-immutable": "^5.0.1",
     "react-native-navigation": "latest"
   }
 }

example-redux/src/app.js

@@ -0,0 +1,70 @@
+import { createStore, applyMiddleware, combineReducers } from 'redux';
+import { Provider } from 'react-redux';
+import { Navigation } from 'react-native-navigation';
+import thunk from 'redux-thunk';
+import * as reducers from './reducers';
+import * as appActions from './reducers/app/actions';
+
+// redux related book keeping
+const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
+const reducer = combineReducers(reducers);
+const store = createStoreWithMiddleware(reducer);
+
+// screen related book keeping
+import { registerScreens } from './screens';
+registerScreens(store, Provider);
+
+// notice that this is just a simple class, it's not a React component
+export default class App {
+  constructor() {
+    // since react-redux only works on components, we need to subscribe this class manually
+    store.subscribe(this.onStoreUpdate.bind(this));
+    store.dispatch(appActions.appInitialized());
+  }
+  onStoreUpdate() {
+    const { root } = store.getState().app;
+    // handle a root change
+    // if your app doesn't change roots in runtime, you can remove onStoreUpdate() altogether
+    if (this.currentRoot !== root) {
+      this.currentRoot = root;
+      this.startApp(root);
+    }
+  }
+  startApp(root) {
+    switch (root) {
+      case 'login':
+        Navigation.startSingleScreenApp({
+          screen: {
+            screen: 'example.LoginScreen',
+            title: 'Login',
+            navigatorStyle: {}
+          }
+        });
+        return;
+      case 'after-login':
+        Navigation.startTabBasedApp({
+          tabs: [
+            {
+              label: 'One',
+              screen: 'example.FirstTabScreen',
+              icon: require('../img/one.png'),
+              selectedIcon: require('../img/one_selected.png'),
+              title: 'Screen One',
+              navigatorStyle: {}
+            },
+            {
+              label: 'Two',
+              screen: 'example.SecondTabScreen',
+              icon: require('../img/two.png'),
+              selectedIcon: require('../img/two_selected.png'),
+              title: 'Screen Two',
+              navigatorStyle: {}
+            }
+          ]
+        });
+        return;
+      default:
+        console.error('Unknown app root');
+    }
+  }
+}

example-redux/src/components/ExampleComponent.js

@@ -0,0 +1,15 @@
+import React, {
+  Component,
+  Text
+} from 'react-native';
+
+export default class ExampleComponent extends Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <Text>I am a regular non-redux aware component</Text>
+    );
+  }
+}

example-redux/src/reducers/app/actionTypes.js

@@ -0,0 +1,2 @@
+export const INITIALIZED = 'example.app.INITIALIZED';
+export const ROOT_CHANGED = 'example.app.ROOT_CHANGED';

example-redux/src/reducers/app/actions.js

@@ -0,0 +1,20 @@
+import * as types from './actionTypes';
+
+export function appInitialized() {
+  return async function(dispatch, getState) {
+    // since all business logic should be inside redux actions
+    // this is a good place to put your app initialization code
+    dispatch(changeAppRoot('login'));
+  };
+}
+
+export function changeAppRoot(root) {
+  return {type: types.ROOT_CHANGED, root: root};
+}
+
+export function login() {
+  return async function(dispatch, getState) {
+    // login logic would go here, and when it's done, we switch app roots
+    dispatch(changeAppRoot('after-login'));
+  };
+}

example-redux/src/reducers/app/reducer.js

@@ -0,0 +1,17 @@
+import * as types from './actionTypes';
+import Immutable from 'seamless-immutable';
+
+const initialState = Immutable({
+  root: undefined // 'login' / 'after-login'
+});
+
+export default function app(state = initialState, action = {}) {
+  switch (action.type) {
+    case types.ROOT_CHANGED:
+      return state.merge({
+        root: action.root
+      });
+    default:
+      return state;
+  }
+}

example-redux/src/reducers/counter/actionTypes.js

@@ -0,0 +1,2 @@
+export const INCREMENT = 'example.counter.INCREMENT';
+export const DECREMENT = 'example.counter.DECREMENT';

example-redux/src/reducers/counter/actions.js

@@ -0,0 +1,9 @@
+import * as types from './actionTypes';
+
+export function increment() {
+  return {type: types.INCREMENT};
+}
+
+export function decrement() {
+  return {type: types.DECREMENT};
+}

example-redux/src/reducers/counter/reducer.js

@@ -0,0 +1,21 @@
+import * as types from './actionTypes';
+import Immutable from 'seamless-immutable';
+
+const initialState = Immutable({
+  count: 0
+});
+
+export default function counter(state = initialState, action = {}) {
+  switch (action.type) {
+    case types.INCREMENT:
+      return state.merge({
+        count: state.count + 1
+      });
+    case types.DECREMENT:
+      return state.merge({
+        count: state.count - 1
+      });
+    default:
+      return state;
+  }
+}

example-redux/src/reducers/index.js

@@ -0,0 +1,7 @@
+import app from './app/reducer';
+import counter from './counter/reducer';
+
+export {
+  app,
+  counter
+};

example-redux/src/screens/FirstTabScreen.js

@@ -0,0 +1,93 @@
+import React, {
+  Component,
+  Text,
+  View,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+  AlertIOS
+} from 'react-native';
+import { connect } from 'react-redux';
+import * as counterActions from '../reducers/counter/actions';
+
+// this is a traditional React component connected to the redux store
+class FirstTabScreen extends Component {
+  static navigatorButtons = {
+    rightButtons: [
+      {
+        title: 'Edit',
+        id: 'edit'
+      },
+      {
+        icon: require('../../img/navicon_add.png'),
+        id: 'add'
+      }
+    ]
+  };
+  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 == 'edit') {
+      AlertIOS.alert('NavBar', 'Edit button pressed');
+    }
+    if (event.id == 'add') {
+      AlertIOS.alert('NavBar', 'Add button pressed');
+    }
+  }
+  render() {
+    return (
+      <View style={{flex: 1, padding: 20}}>
+
+        <Text style={styles.text}>
+          <Text style={{fontWeight: '500'}}>Same Counter: </Text> {this.props.counter.count}
+        </Text>
+
+        <TouchableOpacity onPress={ this.onIncrementPress.bind(this) }>
+          <Text style={styles.button}>Increment Counter</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
+          <Text style={styles.button}>Push Screen</Text>
+        </TouchableOpacity>
+
+      </View>
+    );
+  }
+  onIncrementPress() {
+    this.props.dispatch(counterActions.increment());
+  }
+  onPushPress() {
+    this.props.navigator.push({
+      title: "More",
+      screen: "example.PushedScreen"
+    });
+  }
+}
+
+const styles = StyleSheet.create({
+  text: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginBottom: 10,
+    marginTop:10,
+  },
+  button: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginBottom: 10,
+    marginTop:10,
+    color: 'blue'
+  }
+});
+
+// which props do we want to inject, given the global state?
+function mapStateToProps(state) {
+  return {
+    counter: state.counter
+  };
+}
+
+export default connect(mapStateToProps)(FirstTabScreen);

example-redux/src/screens/LoginScreen.js

@@ -0,0 +1,69 @@
+import React, {
+  Component,
+  Text,
+  View,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+  AlertIOS
+} from 'react-native';
+import { connect } from 'react-redux';
+import * as counterActions from '../reducers/counter/actions';
+import * as appActions from '../reducers/app/actions';
+
+// this is a traditional React component connected to the redux store
+class LoginScreen extends Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <View style={{flex: 1, padding: 20}}>
+
+        <Text style={styles.text}>
+          <Text style={{fontWeight: '500'}}>Counter: </Text> {this.props.counter.count}
+        </Text>
+
+        <TouchableOpacity onPress={ this.onIncrementPress.bind(this) }>
+          <Text style={styles.button}>Increment Counter</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={ this.onLoginPress.bind(this) }>
+          <Text style={styles.button}>Login</Text>
+        </TouchableOpacity>
+
+      </View>
+    );
+  }
+  onIncrementPress() {
+    this.props.dispatch(counterActions.increment());
+  }
+  onLoginPress() {
+    this.props.dispatch(appActions.login());
+  }
+}
+
+const styles = StyleSheet.create({
+  text: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginBottom: 10,
+    marginTop:10,
+  },
+  button: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginBottom: 10,
+    marginTop:10,
+    color: 'blue'
+  }
+});
+
+// which props do we want to inject, given the global state?
+function mapStateToProps(state) {
+  return {
+    counter: state.counter
+  };
+}
+
+export default connect(mapStateToProps)(LoginScreen);

example-redux/src/screens/PushedScreen.js

@@ -0,0 +1,77 @@
+import React, {
+  Component,
+  Text,
+  View,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet
+} from 'react-native';
+import { connect } from 'react-redux';
+import * as counterActions from '../reducers/counter/actions';
+
+// this is a traditional React component connected to the redux store
+class PushedScreen extends Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <View style={{flex: 1, padding: 20}}>
+
+        <Text style={styles.text}>
+          <Text style={{fontWeight: '500'}}>Counter: </Text> {this.props.counter.count}
+        </Text>
+
+        <TouchableOpacity onPress={ this.onIncrementPress.bind(this) }>
+          <Text style={styles.button}>Increment Counter</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
+          <Text style={styles.button}>Push Another</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={ this.onPopPress.bind(this) }>
+          <Text style={styles.button}>Pop Screen</Text>
+        </TouchableOpacity>
+
+      </View>
+    );
+  }
+  onIncrementPress() {
+    this.props.dispatch(counterActions.increment());
+  }
+  onPushPress() {
+    this.props.navigator.push({
+      title: "More",
+      screen: "example.PushedScreen"
+    });
+  }
+  onPopPress() {
+    this.props.navigator.pop();
+  }
+}
+
+const styles = StyleSheet.create({
+  text: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginBottom: 10,
+    marginTop:10,
+  },
+  button: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginBottom: 10,
+    marginTop:10,
+    color: 'blue'
+  }
+});
+
+// which props do we want to inject, given the global state?
+function mapStateToProps(state) {
+  return {
+    counter: state.counter
+  };
+}
+
+export default connect(mapStateToProps)(PushedScreen);

example-redux/src/screens/SecondTabScreen.js

@@ -0,0 +1,74 @@
+import React, {
+  Component,
+  Text,
+  Image,
+  View,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+  AlertIOS
+} from 'react-native';
+import { connect } from 'react-redux';
+import * as counterActions from '../reducers/counter/actions';
+
+// this is a traditional React component connected to the redux store
+class SecondTabScreen extends Component {
+  static navigatorStyle = {
+    drawUnderNavBar: true,
+    drawUnderTabBar: true,
+    navBarTranslucent: true
+  };
+  constructor(props) {
+    super(props);
+    this.buttonsCounter = 0;
+  }
+  render() {
+    return (
+      <ScrollView style={{flex: 1}}>
+
+        <Image style={{width: undefined, height: 100}} source={require('../../img/colors.png')} />
+
+        <View style={{padding: 20}}>
+
+          <Text style={styles.text}>
+            <Text style={{fontWeight: '500'}}>Here Too: </Text> {this.props.counter.count}
+          </Text>
+
+          <TouchableOpacity onPress={ this.onIncrementPress.bind(this) }>
+            <Text style={styles.button}>Increment Counter</Text>
+          </TouchableOpacity>
+
+        </View>
+
+      </ScrollView>
+    );
+  }
+  onIncrementPress() {
+    this.props.dispatch(counterActions.increment());
+  }
+}
+
+const styles = StyleSheet.create({
+  text: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginBottom: 10,
+    marginTop:10,
+  },
+  button: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginBottom: 10,
+    marginTop:10,
+    color: 'blue'
+  }
+});
+
+// which props do we want to inject, given the global state?
+function mapStateToProps(state) {
+  return {
+    counter: state.counter
+  };
+}
+
+export default connect(mapStateToProps)(SecondTabScreen);

example-redux/src/screens/index.js

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

example/README.md

@@ -1,9 +1,11 @@
 # example
 
+A simple usage example. If you're using redux, take a look at [example-redux](../example-redux).
+
 ## Installation - iOS
 
 * In the `example/` folder, run `npm install`
 
-> Make sure you're using npm ver 3. If you normally use npm ver 2 on your system and reluctant to upgrade, you can install [npm 3 alongside 2](https://www.npmjs.com/package/npm3).
+> Make sure you're using npm ver 3. If you normally use npm ver 2 on your system and reluctant to upgrade, you can install [npm 3 alongside 2](https://www.npmjs.com/package/npm3). For more details see https://github.com/wix/react-native-navigation/issues/1
 
 * Open `example/ios/example.xcodeproj` in Xcode and press the play button

example/index.android.js

@@ -16,13 +16,7 @@ class example extends Component {
     return (
       <View style={styles.container}>
         <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.android.js
-        </Text>
-        <Text style={styles.instructions}>
-          Shake or press menu button for dev menu
+          Coming Soon
         </Text>
       </View>
     );

example/ios/example/Info.plist

@@ -15,7 +15,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.0</string>
+	<string>1.0.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>

example/src/app.js

@@ -1,10 +1,10 @@
 import { Navigation } from 'react-native-navigation';
 
-import './screens/FirstTabScreen';
-import './screens/SecondTabScreen';
-import './screens/ThirdTabScreen';
-import './screens/SideMenu';
+// screen related book keeping
+import { registerScreens } from './screens';
+registerScreens();
 
+// this will start our app
 Navigation.startTabBasedApp({
   tabs: [
     {

example/src/screens/FirstTabScreen.js

@@ -1,4 +1,5 @@
 import React, {
+  Component,
   Text,
   View,
   ScrollView,
@@ -7,16 +8,7 @@ import React, {
   AlertIOS
 } 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';
-import './ModalScreen';
-
-// instead of React.Component, we extend Screen (imported above)
-class FirstTabScreen extends Screen {
+export default class FirstTabScreen extends Component {
   static navigatorButtons = {
     leftButtons: [{
       icon: require('../../img/navicon_menu.png'),
@@ -35,10 +27,12 @@ class FirstTabScreen extends Screen {
   };
   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.navigator.toggleDrawer({
+      this.props.navigator.toggleDrawer({
         side: 'left',
         animated: true
       });
@@ -70,19 +64,19 @@ class FirstTabScreen extends Screen {
     );
   }
   onPushPress() {
-    this.navigator.push({
+    this.props.navigator.push({
       title: "More",
       screen: "example.PushedScreen"
     });
   }
   onPushStyledPress() {
-    this.navigator.push({
+    this.props.navigator.push({
       title: "Styled",
       screen: "example.StyledScreen"
     });
   }
   onModalPress() {
-    this.navigator.showModal({
+    this.props.navigator.showModal({
       title: "Modal",
       screen: "example.ModalScreen"
     });
@@ -98,6 +92,3 @@ const styles = StyleSheet.create({
     color: 'blue'
   }
 });
-
-// every screen must be registered with a unique name
-Navigation.registerScreen('example.FirstTabScreen', () => FirstTabScreen);

example/src/screens/ModalScreen.js

@@ -1,4 +1,5 @@
 import React, {
+  Component,
   Text,
   View,
   ScrollView,
@@ -6,15 +7,7 @@ import React, {
   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 ModalScreen extends Screen {
+export default class ModalScreen extends Component {
   static navigatorButtons = {
     leftButtons: [{
       title: 'Close',
@@ -23,6 +16,8 @@ class ModalScreen extends Screen {
   };
   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 (
@@ -45,23 +40,23 @@ class ModalScreen extends Screen {
   }
   onNavigatorEvent(event) {
     if (event.id == 'close') {
-      this.navigator.dismissModal();
+      this.props.navigator.dismissModal();
     }
   }
   onPushPress() {
-    this.navigator.push({
+    this.props.navigator.push({
       title: "More",
       screen: "example.PushedScreen"
     });
   }
   onPushStyledPress() {
-    this.navigator.push({
+    this.props.navigator.push({
       title: "More",
       screen: "example.StyledScreen"
     });
   }
   onClosePress() {
-    this.navigator.dismissModal();
+    this.props.navigator.dismissModal();
   }
 }
 
@@ -74,6 +69,3 @@ const styles = StyleSheet.create({
     color: 'blue'
   }
 });
-
-// every screen must be registered with a unique name
-Navigation.registerScreen('example.ModalScreen', () => ModalScreen);

example/src/screens/PushedScreen.js

@@ -1,4 +1,5 @@
 import React, {
+  Component,
   Text,
   View,
   ScrollView,
@@ -6,15 +7,7 @@ import React, {
   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 {
+export default class PushedScreen extends Component {
   constructor(props) {
     super(props);
   }
@@ -46,25 +39,25 @@ class PushedScreen extends Screen {
     );
   }
   onPushPress() {
-    this.navigator.push({
+    this.props.navigator.push({
       title: "More",
       screen: "example.PushedScreen"
     });
   }
   onPushStyledPress() {
-    this.navigator.push({
+    this.props.navigator.push({
       title: "More",
       screen: "example.StyledScreen"
     });
   }
   onPopPress() {
-    this.navigator.pop();
+    this.props.navigator.pop();
   }
   onPopToRootPress() {
-    this.navigator.popToRoot();
+    this.props.navigator.popToRoot();
   }
   onResetToPress() {
-    this.navigator.resetTo({
+    this.props.navigator.resetTo({
       title: "New Root",
       screen: "example.PushedScreen"
     });
@@ -80,6 +73,3 @@ const styles = StyleSheet.create({
     color: 'blue'
   }
 });
-
-// every screen must be registered with a unique name
-Navigation.registerScreen('example.PushedScreen', () => PushedScreen);

example/src/screens/SecondTabScreen.js

@@ -1,4 +1,5 @@
 import React, {
+  Component,
   Text,
   View,
   ScrollView,
@@ -7,14 +8,12 @@ import React, {
   AlertIOS
 } 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 {
+export default class SecondTabScreen extends Component {
   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 (
@@ -32,7 +31,7 @@ class SecondTabScreen extends Screen {
     );
   }
   onChangeTitlePress() {
-    this.navigator.setTitle({
+    this.props.navigator.setTitle({
       title: Math.round(Math.random() * 100000).toString()
     });
   }
@@ -59,7 +58,7 @@ class SecondTabScreen extends Screen {
     }
     this.buttonsCounter++;
 
-    this.navigator.setButtons({
+    this.props.navigator.setButtons({
       rightButtons: buttons,
       animated: true
     });
@@ -86,6 +85,3 @@ const styles = StyleSheet.create({
     color: 'blue'
   }
 });
-
-// every screen must be registered with a unique name
-Navigation.registerScreen('example.SecondTabScreen', () => SecondTabScreen);

example/src/screens/SideMenu.js

@@ -1,4 +1,5 @@
 import React, {
+  Component,
   Text,
   View,
   ScrollView,
@@ -7,11 +8,7 @@ import React, {
   AlertIOS
 } 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 SideMenu extends Screen {
+export default class SideMenu extends Component {
   constructor(props) {
     super(props);
   }
@@ -35,6 +32,3 @@ const styles = StyleSheet.create({
     color: 'blue'
   }
 });
-
-// every screen must be registered with a unique name
-Navigation.registerScreen('example.SideMenu', () => SideMenu);

example/src/screens/StyledScreen.js

@@ -1,4 +1,5 @@
 import React, {
+  Component,
   Text,
   View,
   ScrollView,
@@ -8,15 +9,7 @@ import React, {
   AlertIOS
 } 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 {
+export default class StyledScreen extends Component {
   static navigatorStyle = {
     drawUnderNavBar: true,
     drawUnderTabBar: true,
@@ -31,6 +24,8 @@ class StyledScreen extends Screen {
   };
   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 (
@@ -63,19 +58,19 @@ class StyledScreen extends Screen {
     }
   }
   onPushPress() {
-    this.navigator.push({
+    this.props.navigator.push({
       title: "More",
       screen: "example.PushedScreen"
     });
   }
   onPushStyledPress() {
-    this.navigator.push({
+    this.props.navigator.push({
       title: "More",
       screen: "example.StyledScreen"
     });
   }
   onPopPress() {
-    this.navigator.pop();
+    this.props.navigator.pop();
   }
 }
 
@@ -88,6 +83,3 @@ const styles = StyleSheet.create({
     color: 'blue'
   }
 });
-
-// every screen must be registered with a unique name
-Navigation.registerScreen('example.StyledScreen', () => StyledScreen);

example/src/screens/ThirdTabScreen.js

@@ -1,4 +1,5 @@
 import React, {
+  Component,
   Text,
   View,
   ScrollView,
@@ -6,16 +7,7 @@ import React, {
   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';
-import './ModalScreen';
-
-// instead of React.Component, we extend Screen (imported above)
-class ThirdTabScreen extends Screen {
+export default class ThirdTabScreen extends Component {
   constructor(props) {
     super(props);
   }
@@ -39,19 +31,19 @@ class ThirdTabScreen extends Screen {
     );
   }
   onPushPress() {
-    this.navigator.push({
+    this.props.navigator.push({
       title: "More",
       screen: "example.PushedScreen"
     });
   }
   onPushStyledPress() {
-    this.navigator.push({
+    this.props.navigator.push({
       title: "Styled",
       screen: "example.StyledScreen"
     });
   }
   onModalPress() {
-    this.navigator.showModal({
+    this.props.navigator.showModal({
       title: "Modal",
       screen: "example.ModalScreen"
     });
@@ -67,6 +59,3 @@ const styles = StyleSheet.create({
     color: 'blue'
   }
 });
-
-// every screen must be registered with a unique name
-Navigation.registerScreen('example.ThirdTabScreen', () => ThirdTabScreen);

example/src/screens/index.js

@@ -0,0 +1,20 @@
+import { Navigation } from 'react-native-navigation';
+
+import FirstTabScreen from './FirstTabScreen';
+import SecondTabScreen from './SecondTabScreen';
+import ThirdTabScreen from './ThirdTabScreen';
+import PushedScreen from './PushedScreen';
+import StyledScreen from './StyledScreen';
+import ModalScreen from './ModalScreen';
+import SideMenu from './SideMenu';
+
+// 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.ThirdTabScreen', () => ThirdTabScreen);
+  Navigation.registerComponent('example.PushedScreen', () => PushedScreen);
+  Navigation.registerComponent('example.StyledScreen', () => StyledScreen);
+  Navigation.registerComponent('example.ModalScreen', () => ModalScreen);
+  Navigation.registerComponent('example.SideMenu', () => SideMenu);
+}

package.json

@@ -7,7 +7,7 @@
     "type": "git",
     "url": "https://github.com/wix/react-native-navigation.git"
   },
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "React Native Navigation - truly native navigation for iOS and Android",
   "nativePackage": true,
   "bugs": {
@@ -22,5 +22,8 @@
   },
   "dependencies": {
     "react-native-controllers": "^1.2.3"
+  },
+  "optionalDependencies": {
+    "react-redux": "*"
   }
 }

src/Navigation.js

@@ -1,5 +1,6 @@
-import { AppRegistry } from 'react-native';
+import React, { AppRegistry } from 'react-native';
 import platformSpecific from './platformSpecific';
+import Screen from './Screen';
 
 const registeredScreens = {};
 
@@ -8,6 +9,45 @@ function registerScreen(screenID, generator) {
   AppRegistry.registerComponent(screenID, generator);
 }
 
+function registerComponent(screenID, generator, store = undefined, Provider = undefined) {
+  if (store && Provider) return _registerComponentRedux(screenID, generator, store, Provider);
+  else return _registerComponentNoRedux(screenID, generator);
+}
+
+function _registerComponentNoRedux(screenID, generator) {
+  const generatorWrapper = function() {
+    const InternalComponent = generator();
+    return class extends Screen {
+      static navigatorStyle = InternalComponent.navigatorStyle || {};
+      static navigatorButtons = InternalComponent.navigatorButtons || {};
+      render() {
+        return (
+          <InternalComponent navigator={this.navigator} {...this.props} />
+        );
+      }
+    };
+  }
+  registerScreen(screenID, generatorWrapper);
+}
+
+function _registerComponentRedux(screenID, generator, store, Provider) {
+  const generatorWrapper = function() {
+    const InternalComponent = generator();
+    return class extends Screen {
+      static navigatorStyle = InternalComponent.navigatorStyle || {};
+      static navigatorButtons = InternalComponent.navigatorButtons || {};
+      render() {
+        return (
+          <Provider store={store}>
+            <InternalComponent navigator={this.navigator} {...this.props} />
+          </Provider>
+        );
+      }
+    };
+  }
+  registerScreen(screenID, generatorWrapper);
+}
+
 function getRegisteredScreen(screenID) {
   const generator = registeredScreens[screenID];
   if (!generator) {
@@ -28,6 +68,7 @@ function dismissModal(params = {}) {
 export default Navigation = {
   registerScreen,
   getRegisteredScreen,
+  registerComponent,
   showModal,
   dismissModal,
   startTabBasedApp: platformSpecific.startTabBasedApp,

src/Screen.js

@@ -3,9 +3,11 @@ import platformSpecific from './platformSpecific';
 import Navigation from './Navigation';
 
 class Navigator {
-  constructor(navigatorID, screenInstance) {
+  constructor(navigatorID, navigatorEventID) {
     this.navigatorID = navigatorID;
-    this.screenInstance = screenInstance;
+    this.navigatorEventID = navigatorEventID;
+    this.navigatorEventHandler = null;
+    this.navigatorEventSubscription = null;
   }
   push(params = {}) {
     return platformSpecific.navigatorPush(this, params);
@@ -26,8 +28,7 @@ class Navigator {
     return Navigation.dismissModal(params);
   }
   setButtons(params = {}) {
-    const navigatorEventID = this.screenInstance.listenOnNavigatorEvents();
-    return platformSpecific.navigatorSetButtons(this, navigatorEventID, params);
+    return platformSpecific.navigatorSetButtons(this, this.navigatorEventID, params);
   }
   setTitle(params = {}) {
     return platformSpecific.navigatorSetTitle(this, params);
@@ -35,6 +36,22 @@ class Navigator {
   toggleDrawer(params = {}) {
     return platformSpecific.navigatorToggleDrawer(this, params);
   }
+  setOnNavigatorEvent(callback) {
+    this.navigatorEventHandler = callback;
+    if (!this.navigatorEventSubscription) {
+      this.navigatorEventSubscription = NativeAppEventEmitter.addListener(this.navigatorEventID, (event) => this.onNavigatorEvent(event));
+    }
+  }
+  onNavigatorEvent(event) {
+    if (this.navigatorEventHandler) {
+      this.navigatorEventHandler(event);
+    }
+  }
+  cleanup() {
+    if (this.navigatorEventSubscription) {
+      this.navigatorEventSubscription.remove();
+    }
+  }
 }
 
 export default class Screen extends Component {
@@ -43,23 +60,13 @@ export default class Screen extends Component {
   constructor(props) {
     super(props);
     if (props.navigatorID) {
-      this.navigator = new Navigator(props.navigatorID, this);
-    }
-    if (props.listenForEvents) {
-      this.listenOnNavigatorEvents();
+      this.navigator = new Navigator(props.navigatorID, props.navigatorEventID);
     }
   }
-  listenOnNavigatorEvents() {
-    if (!this.navigatorEventSubscription) {
-      this.navigatorEventSubscription = NativeAppEventEmitter.addListener(this.props.navigatorEventID, (event) => this.onNavigatorEvent(event));
-    }
-    return this.props.navigatorEventID;
-  }
-  onNavigatorEvent(event) {}
   componentWillUnmount() {
-    this.navigator = undefined;
-    if (this.navigatorEventSubscription) {
-      this.navigatorEventSubscription.remove();
+    if (this.navigator) {
+      this.navigator.cleanup();
+      this.navigator = undefined;
     }
   }
 }

src/platformSpecific.ios.js

@@ -58,8 +58,7 @@ function startTabBasedApp(params) {
                   passProps={{
                     navigatorID: navigatorID,
                     screenInstanceID: screenInstanceID,
-                    navigatorEventID: navigatorEventID,
-                    listenForEvents: !!(navigatorButtons.leftButtons || navigatorButtons.rightButtons)
+                    navigatorEventID: navigatorEventID
                   }}
                   style={navigatorStyle}
                   leftButtons={navigatorButtons.leftButtons}
@@ -122,8 +121,7 @@ function startSingleScreenApp(params) {
           passProps={{
             navigatorID: navigatorID,
             screenInstanceID: screenInstanceID,
-            navigatorEventID: navigatorEventID,
-            listenForEvents: !!(navigatorButtons.leftButtons || navigatorButtons.rightButtons)
+            navigatorEventID: navigatorEventID
           }}
           style={navigatorStyle}
           leftButtons={navigatorButtons.leftButtons}
@@ -177,7 +175,6 @@ function navigatorPush(navigator, params) {
   passProps.navigatorID = navigator.navigatorID;
   passProps.screenInstanceID = screenInstanceID;
   passProps.navigatorEventID = navigatorEventID;
-  passProps.listenForEvents = !!(navigatorButtons.leftButtons || navigatorButtons.rightButtons);
   Controllers.NavigationControllerIOS(navigator.navigatorID).push({
     title: params.title,
     component: params.screen,
@@ -217,7 +214,6 @@ function navigatorResetTo(navigator, params) {
   passProps.navigatorID = navigator.navigatorID;
   passProps.screenInstanceID = screenInstanceID;
   passProps.navigatorEventID = navigatorEventID;
-  passProps.listenForEvents = !!(navigatorButtons.leftButtons || navigatorButtons.rightButtons);
   Controllers.NavigationControllerIOS(navigator.navigatorID).resetTo({
     title: params.title,
     component: params.screen,
@@ -279,7 +275,6 @@ function showModal(params) {
       passProps.navigatorID = navigatorID;
       passProps.screenInstanceID = screenInstanceID;
       passProps.navigatorEventID = navigatorEventID;
-      passProps.listenForEvents = !!(navigatorButtons.leftButtons || navigatorButtons.rightButtons);
       return (
         <NavigationControllerIOS
           id={navigatorID}