Merge branch 'ticketea-android-support'

Author: jsdf

README.md

@@ -91,6 +91,11 @@ var ArticlesScreen = React.createClass({
   How often `ListView` produces scroll events, in ms. Defaults to a fairly low 
   value, try setting it higher if you encounter performance issues. Keep in mind
   that a higher value will make the pulldown-to-refresh behaviour less responsive.
+- `colors: array of strings`
+  Colors to be used for pull to refresh indicator in Android
+- `progressBackgroundColor: string`
+  Color to be used for pull to refresh indicator background in Android
+
 
 ### ControlledRefreshableListView
 Low level component used by `RefreshableListView`. Use this directly if you want 

lib/ControlledRefreshableListView.js

@@ -4,10 +4,12 @@ var {
   StyleSheet,
   View,
   Platform,
+  PullToRefreshViewAndroid,
 } = React
 var ListView = require('./ListView')
 var createElementFrom = require('./createElementFrom')
 var RefreshingIndicator = require('./RefreshingIndicator')
+var scrollToCompat = require('./scrollToCompat')
 
 const SCROLL_EVENT_THROTTLE = 32
 const MIN_PULLDOWN_DISTANCE = 40
@@ -27,6 +29,8 @@ const LISTVIEW_REF = 'listview'
 
 var ControlledRefreshableListView = React.createClass({
   propTypes: {
+    colors: PropTypes.array,
+    progressBackgroundColor: PropTypes.string,
     onRefresh: PropTypes.func.isRequired,
     isRefreshing: PropTypes.bool.isRequired,
     waitingForRelease: PropTypes.bool,
@@ -63,6 +67,8 @@ var ControlledRefreshableListView = React.createClass({
       scrollEventThrottle: SCROLL_EVENT_THROTTLE,
       ignoreInertialScroll: true,
       refreshingIndicatorComponent: RefreshingIndicator,
+      pullingPrompt: 'Pull to refresh',
+      holdingPrompt: 'Release to refresh',
     }
   },
   getInitialState() {
@@ -81,9 +87,11 @@ var ControlledRefreshableListView = React.createClass({
       if (
         this.isReleaseUpdate(this.props, this.state, nextProps, nextState)
       ) {
-        this.getScrollResponder().scrollWithoutAnimationTo(
+        scrollToCompat(
+          this.getScrollResponder(),
           -(this.lastContentInsetTop + REFRESHING_INDICATOR_HEIGHT),
-          this.lastContentOffsetX
+          this.lastContentOffsetX,
+          false
         )
       }
     }
@@ -93,13 +101,18 @@ var ControlledRefreshableListView = React.createClass({
       if (
         this.isReleaseUpdate(prevProps, prevState, this.props, this.state)
       ) {
-        this.getScrollResponder().scrollWithoutAnimationTo(
+        scrollToCompat(
+          this.getScrollResponder(),
           -(this.lastContentInsetTop),
-          this.lastContentOffsetX
+          this.lastContentOffsetX,
+          false
         )
       }
     }
   },
+  handlePullToRefreshViewAndroidRef(swipeRefreshLayout) {
+    this.swipeRefreshLayout = swipeRefreshLayout
+  },
   handleScroll(e) {
     var scrollY = e.nativeEvent.contentInset.top + e.nativeEvent.contentOffset.y
     this.lastScrollY = scrollY
@@ -184,39 +197,56 @@ var ControlledRefreshableListView = React.createClass({
       pullingIndicator,
       holdingIndicator,
       refreshingIndicator,
-      pullingPrompt: pullingPrompt || 'Pull to refresh',
-      holdingPrompt: holdingPrompt || 'Release to refresh',
+      pullingPrompt: pullingPrompt,
+      holdingPrompt: holdingPrompt,
       refreshingPrompt: refreshingPrompt || refreshDescription,
       isTouching: this.isTouching,
       isWaitingForRelease: this.isWaitingForRelease(),
     }
     return createElementFrom(this.props.refreshingIndicatorComponent, refreshingIndicatorProps)
   },
   render() {
-    return (
-      <View style={[stylesheet.container]}>
-        <View style={[stylesheet.fillParent]}>
-          {this.renderRefreshingIndicator()}
-        </View>
-        <View style={[stylesheet.fillParent]}>
+    if (Platform.OS === 'android') {
+      return (
+        <PullToRefreshViewAndroid
+          ref={this.handlePullToRefreshViewAndroidRef}
+          onRefresh={this.props.onRefresh}
+          colors={this.props.colors}
+          progressBackgroundColor={this.props.progressBackgroundColor}
+          style={stylesheet.container}
+        >
           <ListView
             {...this.props}
             ref={LISTVIEW_REF}
-            contentContainerStyle={this.getContentContainerStyle()}
-            onScroll={this.handleScroll}
-            scrollEventThrottle={this.props.scrollEventThrottle}
-            onResponderGrant={this.handleResponderGrant}
-            onResponderRelease={this.handleResponderRelease}
           />
+        </PullToRefreshViewAndroid>
+      )
+    } else {
+      return (
+        <View style={[stylesheet.container]}>
+          <View style={[stylesheet.fillParent]}>
+            {this.renderRefreshingIndicator()}
+          </View>
+          <View style={[stylesheet.fillParent]}>
+            <ListView
+              {...this.props}
+              ref={LISTVIEW_REF}
+              contentContainerStyle={this.getContentContainerStyle()}
+              onScroll={this.handleScroll}
+              scrollEventThrottle={this.props.scrollEventThrottle}
+              onResponderGrant={this.handleResponderGrant}
+              onResponderRelease={this.handleResponderRelease}
+            />
+          </View>
         </View>
-      </View>
-    )
+      )
+    }
   },
 })
 
 var stylesheet = StyleSheet.create({
   container: {
-    // flex: 1,
+    flex: 1,
   },
   fillParent: {
     backgroundColor: 'transparent',
@@ -226,22 +256,6 @@ var stylesheet = StyleSheet.create({
     right: 0,
     bottom: 0,
   },
-  // offsetParent: {
-  //   position: 'relative',
-  // },
-  // positionTopLeft: {
-  //   position: 'absolute',
-  //   top: 0,
-  //   left: 0,
-  // },
-  // fill: {
-  //   flex: 1
-  // },
-  // center: {
-  //   flex: 1,
-  //   justifyContent: 'space-around',
-  //   alignItems: 'center',
-  // },
 })
 
 module.exports = ControlledRefreshableListView

lib/__mocks__/react-native.js

@@ -19,6 +19,7 @@ var ReactNative = {
     create: (ss) => ss,
   },
   PropTypes: React.PropTypes,
+  Platform: {OS: 'ios'},
 }
 
 module.exports = ReactNative

lib/scrollToCompat.js

@@ -0,0 +1,28 @@
+let cachedResult = null
+
+function isLegacyReactNative() {
+  if (cachedResult == null) {
+    try {
+      const PACKAGE = require('../../react-native/package.json')
+      const version = PACKAGE.version
+      cachedResult = (
+        version[0] === '0' &&
+        parseInt(version.split('.')[1], 10) < 20
+      )
+    } catch (err) {
+      cachedResult = true
+    }
+  }
+  return cachedResult
+}
+
+// handle API change in react native 0.20
+function scrollToCompat(scrollResponder, y, x, animate = false) {
+  if (isLegacyReactNative()) {
+    scrollResponder.scrollTo(y, x, animate)
+  } else {
+    scrollResponder.scrollTo({x, y, animate})
+  }
+}
+
+module.exports = scrollToCompat