aksonov · aksonov · May 20, 2016 · May 11, 2016 · May 12, 2016 · May 12, 2016
diff --git a/Example/Example.js b/Example/Example.js
@@ -46,11 +46,25 @@ const reducerCreate = params=>{
     }
 };
 
+// define this based on the styles/dimensions you use
+const getSceneStyle = function (props) {
+  return {
+    flex: 1,
+    marginTop: props.hideNavBar ? 0 : 64,
+    marginBottom: props.hideTabBar ? 0 : 49.5,
+    backgroundColor: '#fff',
+    shadowColor: null,
+    shadowOffset: null,
+    shadowOpacity: null,
+    shadowRadius: null,
+  };
+}
+
 export default class Example extends React.Component {
     render() {
-        return <Router createReducer={reducerCreate}>
+        return <Router createReducer={reducerCreate} getSceneStyle={getSceneStyle}>
             <Scene key="modal" component={Modal} >
-                <Scene key="root" hideNavBar={true}>
+                <Scene key="root" hideNavBar={true} hideTabBar={true}>
                     <Scene key="echo" clone component={EchoView} />
                     <Scene key="register" component={Register} title="Register"/>
                     <Scene key="register2" component={Register} title="Register2" duration={1}/>
@@ -67,12 +81,12 @@ export default class Example extends React.Component {
                                 <Scene key="tab1_2" component={TabView} title="Tab #1_2" titleStyle={{color:"black"}}/>
                             </Scene>
                             <Scene key="tab2" initial={true} title="Tab #2" icon={TabIcon}>
-                                <Scene key="tab2_1" component={TabView} title="Tab #2_1"/>
+                                <Scene key="tab2_1" component={TabView} title="Tab #2_1" renderRightButton={()=><Right/>} />
                                 <Scene key="tab2_2" component={TabView} title="Tab #2_2" onLeft={()=>alert("Left button!")} leftTitle="Left" duration={1} panHandlers={null}/>
                             </Scene>
                             <Scene key="tab3" component={TabView} title="Tab #3" hideTabBar={true} icon={TabIcon}/>
                             <Scene key="tab4" component={TabView} title="Tab #4" hideNavBar={true} icon={TabIcon}/>
-                            <Scene key="tab5" component={TabView} title="Tab #5" icon={TabIcon} renderRightButton={()=><Right/>}/>
+                            <Scene key="tab5" component={TabView} title="Tab #5" hideTabBar={true} hideNavBar={true} icon={TabIcon}/>
                         </Scene>
                     </Scene>
                 </Scene>

diff --git a/Example/README.md b/Example/README.md
@@ -0,0 +1,14 @@
+## Example App
+
+Normally, after a code change to react-native-router-flux src files,
+you must remove the node_modules/react-native-router-flux directory
+and npm install.  The react-native packager wont follow symlinks.
+
+To assist development, this command watches and rsyncs changes:
+
+```
+npm run sync-rnrf
+```
+
+Leave a terminal open running this command when running the Example
+app and making react-native-router-flux src changes.
diff --git a/Example/components/EchoView.js b/Example/components/EchoView.js
@@ -9,12 +9,18 @@ const styles = StyleSheet.create({
         justifyContent: "center",
         alignItems: "center",
         backgroundColor: "#F5FCFF",
+        borderWidth: 2,
+        borderColor: 'red',
     },
     instructions: {
         textAlign: "center",
         color: "#333333",
         marginBottom: 5,
     },
+    smaller: {
+        marginBottom: 5,
+        fontSize: 12,
+    },
 });
 
 
@@ -24,7 +30,36 @@ export default class extends React.Component {
             <View style={[styles.container, this.props.sceneStyle]}>
                 <Text style={styles.instructions}>key: {this.props.navigationState.key}</Text>
                 <Text style={styles.instructions}>sceneKey: {this.props.navigationState.sceneKey}</Text>
-                <Button onPress={Actions.echo}>push new scene</Button>
+                <Button
+                  onPress={() => Actions.echo()}
+                  style={styles.smaller}
+                >
+                  push new scene hideNavBar=inherit hideTabBar=inherit
+                </Button>
+                <Button
+                  onPress={() => Actions.echo({ hideNavBar: true, hideTabBar: true })}
+                  style={styles.smaller}
+                >
+                  push new scene hideNavBar=true hideTabBar=true
+                </Button>
+                <Button
+                  onPress={() => Actions.echo({ hideNavBar: true, hideTabBar: false })}
+                  style={styles.smaller}
+                >
+                  push new scene hideNavBar=true hideTabBar=false
+                </Button>
+                <Button
+                  onPress={() => Actions.echo({ hideNavBar: false, hideTabBar: true })}
+                  style={styles.smaller}
+                >
+                  push new scene hideNavBar=false hideTabBar=true
+                </Button>
+                <Button
+                  onPress={() => Actions.echo({ hideNavBar: false, hideTabBar: false })}
+                  style={styles.smaller}
+                >
+                  push new scene hideNavBar=false hideTabBar=false
+                </Button>
                 <Button onPress={Actions.pop}>pop</Button>
             </View>
         );

diff --git a/Example/components/Launch.js b/Example/components/Launch.js
@@ -4,28 +4,28 @@ import Button from "react-native-button";
 import {Actions} from "react-native-router-flux";
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        backgroundColor: "transparent",
-    }
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "transparent",
+  }
 });
 
 class Launch extends React.Component {
-    render(){
-        return (
-            <View {...this.props}  style={styles.container}>
-                <Text>Launch page</Text>
-                <Button onPress={()=>Actions.login({data:"Custom data", title:"Custom title" })}>Go to Login page</Button>
-                <Button onPress={Actions.register}>Go to Register page</Button>
-                <Button onPress={Actions.register2}>Go to Register page without animation</Button>
-                <Button onPress={()=>Actions.error("Error message")}>Popup error</Button>
-                <Button onPress={Actions.tabbar}>Go to TabBar page</Button>
-               <Button onPress={Actions.pop}>back</Button>
-            </View>
-        );
-    }
+  render(){
+    return (
+      <View {...this.props}  style={styles.container}>
+        <Text>Launch page</Text>
+        <Button onPress={()=>Actions.login({data:"Custom data", title:"Custom title" })}>Go to Login page</Button>
+        <Button onPress={Actions.register}>Go to Register page</Button>
+        <Button onPress={Actions.register2}>Go to Register page without animation</Button>
+        <Button onPress={()=>Actions.error("Error message")}>Popup error</Button>
+        <Button onPress={Actions.tabbar}>Go to TabBar page</Button>
+        <Button onPress={Actions.pop}>back</Button>
+      </View>
+    );
+  }
 }
 
 module.exports = Launch;
diff --git a/Example/components/NavigationDrawer.js b/Example/components/NavigationDrawer.js
@@ -24,7 +24,7 @@ class NavigationDrawer extends React.Component {
           main: { opacity: Math.max(0.54, 1 - ratio) },
         })}
       >
-        <DefaultRenderer navigationState={children[0]} />
+        <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
       </Drawer>
     );
   }

diff --git a/Example/components/TabIcon.js b/Example/components/TabIcon.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import { PropTypes, Text } from 'react-native';
+import {PropTypes} from "react";
+import {Text} from "react-native";
 
 const propTypes = {
   selected: PropTypes.string,

diff --git a/Example/components/TabView.js b/Example/components/TabView.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import { PropTypes, StyleSheet, Text, View } from 'react-native';
+import {PropTypes} from "react";
+import {StyleSheet, Text, View} from "react-native";
 import Button from 'react-native-button';
 import { Actions } from 'react-native-router-flux';
 
@@ -19,13 +20,15 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
+    borderWidth: 2,
+    borderColor: 'red',
   },
 });
 
 const TabView = (props, context) => {
   const drawer = context.drawer;
   return (
-    <View style={[styles.container, props.sceneStyle]}>
+    <View style={[styles.container, props.sceneStyle ]}>
       <Text>Tab {props.title}</Text>
       {props.name === 'tab1_1' &&
         <Button onPress={Actions.tab1_2}>next screen for tab1_1</Button>

diff --git a/Example/components/TabView2.js b/Example/components/TabView2.js
diff --git a/Example/iOS/Example.xcodeproj/project.pbxproj b/Example/iOS/Example.xcodeproj/project.pbxproj
@@ -105,27 +105,27 @@
 /* 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>"; };
 		13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = "<group>"; };
 		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>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -526,7 +526,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 */
 
@@ -618,9 +617,12 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../node_modules/react-native/React/**",
 				);
-				INFOPLIST_FILE = "Example/Info.plist";
+				INFOPLIST_FILE = Example/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				OTHER_LDFLAGS = "-ObjC";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+				);
 				PRODUCT_NAME = Example;
 			};
 			name = Debug;
@@ -634,9 +636,12 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../node_modules/react-native/React/**",
 				);
-				INFOPLIST_FILE = "Example/Info.plist";
+				INFOPLIST_FILE = Example/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				OTHER_LDFLAGS = "-ObjC";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+				);
 				PRODUCT_NAME = Example;
 			};
 			name = Release;

diff --git a/Example/index.ios.js b/Example/index.ios.js
@@ -1,5 +1,8 @@
 import { AppRegistry } from 'react-native';
 
+// @todo remove when RN upstream is fixed
+console.ignoredYellowBox = ['Warning: Failed propType: SceneView'];
+
 import Example from './Example';
 
 AppRegistry.registerComponent('Example', () => Example);
diff --git a/Example/package.json b/Example/package.json
@@ -3,14 +3,18 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "start": "node_modules/react-native/packager/packager.sh"
+    "start": "node_modules/react-native/packager/packager.sh",
+    "sync-rnrf": "rm -rf ./node_modules/react-native-router-flux; sane '/usr/bin/rsync -v -a --exclude .git --exclude Example --exclude node_modules ../ ./node_modules/react-native-router-flux/' .. --glob='{**/*.json,**/*.js}'"
   },
   "dependencies": {
-    "react": "^0.14.7",
-    "react-native": "0.22.2",
-    "react-native-button": "^1.2.1",
-    "react-native-drawer": "^1.16.7",
-    "react-native-modalbox": "^1.3.0",
+    "react": "^15.0.2",
+    "react-native": "^0.26.0",
+    "react-native-button": "github:ide/react-native-button",
+    "react-native-drawer": "^2.2.2",
+    "react-native-modalbox": "^1.3.3",
     "react-native-router-flux": "file:../"
+  },
+  "devDependencies": {
+    "sane": "^1.3.4"
   }
 }
diff --git a/README.md b/README.md
@@ -34,7 +34,7 @@ Router for React Native based on new React Native Navigation API.
 
 - **Highly Customizable Navigation Bar** - Show/hide the navbar depending on Scene or even the state of a Scene (e.g. Edit/Save navbar for edit mode).
 
-- **Tab Bar Support** using [react-native-tabs](https://github.com/aksonov/react-native-tabs) (see demo).
+- **Tab Bar Support** using [react-native-tab-navigator](https://github.com/exponentjs/react-native-tab-navigator) (see Example app).
 
 - **Nested Navigators** (e.g. Each tab can have its own navigator, nested in a root navigator).
 

diff --git a/index.js b/index.js
@@ -8,6 +8,7 @@ import Scene from './src/Scene';
 import Switch from './src/Switch';
 import TabBar from './src/TabBar';
 import getInitialState from './src/State';
+import Util from './src/Util';
 
 export {
   Actions,
@@ -20,4 +21,5 @@ export {
   Switch,
   TabBar,
   getInitialState,
+  Util,
 };