Merge pull request #536 from cridenour/feature/react-native-24

[WIP] Get Example app working with React 0.24+

Author: aksonov

Example/.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

Example/.flowconfig

@@ -42,6 +42,12 @@
 # Ignore Website
 .*/website/.*
 
+# Ignore generators
+.*/local-cli/generator.*
+
+# Ignore BUCK generated folders
+.*\.buckd/
+
 .*/node_modules/is-my-json-valid/test/.*\.json
 .*/node_modules/iconv-lite/encodings/tables/.*\.json
 .*/node_modules/y18n/test/.*\.json
@@ -59,6 +65,7 @@
 .*/node_modules/isemail/.*\.json
 .*/node_modules/tr46/.*\.json
 
+
 [include]
 
 [libs]
@@ -86,4 +93,4 @@ suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-2]\\|1[0-9]\\|[0-9
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
 [version]
-0.22.0
+^0.22.0

Example/.gitignore

@@ -32,3 +32,9 @@ local.properties
 #
 node_modules/
 npm-debug.log
+
+# BUCK
+buck-out/
+\.buckd/
+android/app/libs
+android/keystores/debug.keystore

Example/Example.js

@@ -59,7 +59,7 @@ export default class Example extends React.Component {
                         <Scene key="loginModal" component={Login} title="Login"/>
                         <Scene key="loginModal2" hideNavBar={true} component={Login2} title="Login2" panHandlers={null} duration={1}/>
                     </Scene>
-                    <Scene key="tabbar" component={NavigationDrawer}>
+                    <Scene key="tabbar" component={NavigationDrawer} panHandlers={null}>
                         <Scene key="main" tabs={true} >
                             <Scene key="tab1"  title="Tab #1" icon={TabIcon} navigationBarStyle={{backgroundColor:"red"}} titleStyle={{color:"white"}}>
                                 <Scene key="tab1_1" component={TabView} title="Tab #1_1" onRight={()=>alert("Right button")} rightTitle="Right" />

Example/android/app/BUCK

@@ -0,0 +1,66 @@
+import re
+
+# To learn about Buck see [Docs](https://buckbuild.com/).
+# To run your application with Buck:
+# - install Buck
+# - `npm start` - to start the packager
+# - `cd android`
+# - `cp ~/.android/debug.keystore keystores/debug.keystore`
+# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
+# - `buck install -r android/app` - compile, install and run application
+#
+
+lib_deps = []
+for jarfile in glob(['libs/*.jar']):
+  name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile)
+  lib_deps.append(':' + name)
+  prebuilt_jar(
+    name = name,
+    binary_jar = jarfile,
+  )
+
+for aarfile in glob(['libs/*.aar']):
+  name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile)
+  lib_deps.append(':' + name)
+  android_prebuilt_aar(
+    name = name,
+    aar = aarfile,
+  )
+
+android_library(
+  name = 'all-libs',
+  exported_deps = lib_deps
+)
+
+android_library(
+  name = 'app-code',
+  srcs = glob([
+    'src/main/java/**/*.java',
+  ]),
+  deps = [
+    ':all-libs',
+    ':build_config',
+    ':res',
+  ],
+)
+
+android_build_config(
+  name = 'build_config',
+  package = 'com.example',
+)
+
+android_resource(
+  name = 'res',
+  res = 'src/main/res',
+  package = 'com.example',
+)
+
+android_binary(
+  name = 'app',
+  package_type = 'debug',
+  manifest = 'src/main/AndroidManifest.xml',
+  keystore = '//android/keystores:debug',
+  deps = [
+    ':app-code',
+  ],
+)

Example/android/app/build.gradle

@@ -9,7 +9,7 @@ import com.android.build.OutputFile
  * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
  * bundle directly from the development server. Below you can see all the possible configurations
  * and their defaults. If you decide to add a configuration block, make sure to add it before the
- * `apply from: "react.gradle"` line.
+ * `apply from: "../../node_modules/react-native/react.gradle"` line.
  *
  * project.ext.react = [
  *   // the name of the generated asset file containing your JS bundle
@@ -59,7 +59,7 @@ import com.android.build.OutputFile
  * ]
  */
 
-apply from: "react.gradle"
+apply from: "../../node_modules/react-native/react.gradle"
 
 /**
  * Set this to true to create two separate APKs instead of one:
@@ -124,3 +124,10 @@ dependencies {
     compile "com.android.support:appcompat-v7:23.0.1"
     compile "com.facebook.react:react-native:+"  // From node_modules
 }
+
+// Run this once to be able to run the application with BUCK
+// puts all compile dependencies into folder libs for BUCK to use
+task copyDownloadableDepsToLibs(type: Copy) {
+  from configurations.compile
+  into 'libs'
+}

Example/package.json

@@ -7,7 +7,7 @@
   },
   "dependencies": {
     "react": "^0.14.7",
-    "react-native": "^0.22.2",
+    "react-native": "^0.24.0-rc5",
     "react-native-button": "^1.2.1",
     "react-native-drawer": "^1.16.7",
     "react-native-modalbox": "^1.3.0",

src/DefaultRenderer.js

@@ -9,10 +9,14 @@
 import React, {Component, Animated, PropTypes, StyleSheet, View, NavigationExperimental} from "react-native";
 const {
     AnimatedView: NavigationAnimatedView,
-    Card: NavigationCard,
-    RootContainer: NavigationRootContainer,
-    Header: NavigationHeader,
-    } = NavigationExperimental;
+    Card: NavigationCard
+} = NavigationExperimental;
+
+const {
+    CardStackPanResponder: NavigationCardStackPanResponder,
+    CardStackStyleInterpolator: NavigationCardStackStyleInterpolator
+} = NavigationCard;
+
 import TabBar from "./TabBar";
 import NavBar from "./NavBar";
 import Actions from './Actions';
@@ -59,13 +63,13 @@ export default class DefaultRenderer extends Component {
             return null;
         }
         let Component = navigationState.component;
-        if (navigationState.tabs && !Component){
+        if (navigationState.tabs && !Component) {
             Component = TabBar;
         }
         if (Component) {
             return (
                 <View style={[{flex: 1}, navigationState.sceneStyle]}>
-                    <Component {...navigationState} navigationState={navigationState} />
+                    <Component {...navigationState} navigationState={navigationState}/>
                 </View>
             )
         }
@@ -75,7 +79,6 @@ export default class DefaultRenderer extends Component {
 
         let applyAnimation = selected.applyAnimation || navigationState.applyAnimation;
         let style = selected.style || navigationState.style;
-        let direction = selected.direction || navigationState.direction || "horizontal";
 
         let optionals = {};
         if (applyAnimation) {
@@ -85,7 +88,11 @@ export default class DefaultRenderer extends Component {
             if (duration === null || duration === undefined) duration = navigationState.duration;
             if (duration !== null && duration !== undefined) {
                 optionals.applyAnimation = function (pos, navState) {
-                    Animated.timing(pos, {toValue: navState.index, duration}).start();
+                    if (duration === 0) {
+                        pos.setValue(navState.index);
+                    } else {
+                        Animated.timing(pos, {toValue: navState.index, duration}).start();
+                    }
                 };
             }
         }
@@ -95,7 +102,6 @@ export default class DefaultRenderer extends Component {
                 navigationState={navigationState}
                 style={[styles.animatedView, style]}
                 renderOverlay={this._renderHeader}
-                direction={direction}
                 renderScene={this._renderCard}
                 {...optionals}
             />
@@ -104,25 +110,40 @@ export default class DefaultRenderer extends Component {
 
     _renderHeader(/*NavigationSceneRendererProps*/ props) {
         return <NavBar
-                {...props}
-                getTitle={state => state.title}
-            />;
+            {...props}
+            getTitle={state => state.title}
+        />;
     }
 
     _renderCard(/*NavigationSceneRendererProps*/ props) {
-        const { key, direction, panHandlers, getSceneStyle } = props.scene.navigationState;
+        const {key, direction, getSceneStyle} = props.scene.navigationState;
+        let {panHandlers, animationStyle} = props.scene.navigationState;
+
+        // Since we always need to pass a style for the direction, we can avoid #526
+        let style = {};
+        if (getSceneStyle) style = getSceneStyle(props);
 
-        const optionals = {};
-        if (getSceneStyle) optionals.style = getSceneStyle(props);
+        const isVertical = direction === "vertical";
+
+        if (typeof(animationStyle) === 'undefined') {
+            animationStyle = (isVertical ?
+                NavigationCardStackStyleInterpolator.forVertical(props) :
+                NavigationCardStackStyleInterpolator.forHorizontal(props));
+        }
+
+        if (typeof(panHandlers) === 'undefined') {
+            panHandlers = panHandlers || (isVertical ?
+                    NavigationCardStackPanResponder.forVertical(props) :
+                    NavigationCardStackPanResponder.forHorizontal(props));
+        }
 
         return (
             <NavigationCard
                 {...props}
                 key={'card_' + key}
-                direction={direction || 'horizontal'}
+                style={[animationStyle, style]}
                 panHandlers={panHandlers}
                 renderScene={this._renderScene}
-                {...optionals}
             />
         );
     }
@@ -136,6 +157,6 @@ export default class DefaultRenderer extends Component {
 const styles = StyleSheet.create({
     animatedView: {
         flex: 1,
-        backgroundColor:"transparent"
+        backgroundColor: "transparent"
     },
 });