native support

demo/package.json

@@ -36,7 +36,6 @@
     "postcss-loader": "2.0.6",
     "promise": "7.1.1",
     "react": "^15.6.1",
-    "react-container-dimensions": "^1.3.2",
     "react-dev-utils": "^3.0.2",
     "react-dom": "^15.6.1",
     "react-error-overlay": "^1.0.9",

package.json

@@ -44,8 +44,6 @@
     "eslint": "^4.11.0",
     "eslint-loader": "^1.9.0",
     "react": "^16.1.1",
-    "react-addons-shallow-compare": "^15.6.2",
-    "react-container-dimensions": "^1.3.2",
     "react-dom": "^16.1.1",
     "style-loader": "^0.19.0",
     "url-loader": "^0.6.2",

src/component/index.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { clamp } from 'lodash'
+
+export default (props, state, children) => [
+  <div
+    key='pull'
+    style={{
+      width: '100%',
+      height: clamp(state.y, 0, props.max),
+      backgroundColor: state.refreshing ? 'blue' : state.refreshed ? 'green' : state.willRefresh ? 'red' : 'gray',
+      overflow: 'hidden',
+      color: 'white',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }}
+  >
+    { state.refreshing ? 'refreshing...' : state.refreshed ? 'refreshed' : state.willRefresh ? 'willRefresh' : state.y }
+  </div>,
+  children
+]
+
+

src/component/index.native.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { View, Text } from 'react-native'
+import { clamp } from 'lodash'
+
+export default (props, state, children) => [
+  <View
+    key='pull'
+    style={{
+      width: '100%',
+      height: clamp(state.y, 0, props.max),
+      backgroundColor: state.refreshing ? 'blue' : state.refreshed ? 'green' : state.willRefresh ? 'red' : 'gray',
+      overflow: 'hidden',
+      color: 'white',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }}
+  >
+    <Text>{ state.refreshing ? 'refreshing...' : state.refreshed ? 'refreshed' : state.willRefresh ? 'willRefresh' : state.y }</Text>
+  </View>,
+  children
+]
+
+

src/index.js

@@ -1,27 +1,9 @@
 import React, { Component } from 'react'
-import { findDOMNode } from 'react-dom'
 import PropTypes from 'prop-types'
 import Spring from './spring'
 import { clamp } from 'lodash'
-
-const defaultRender = (props, state, children) => [
-  <div
-    key='pull'
-    style={{
-      width: '100%',
-      height: clamp(state.y, 0, props.max),
-      backgroundColor: state.refreshing ? 'blue' : state.refreshed ? 'green' : state.willRefresh ? 'red' : 'gray',
-      overflow: 'hidden',
-      color: 'white',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }}
-  >
-    {state.refreshing ? 'refreshing...' : state.refreshed ? 'refreshed' : state.willRefresh ? 'willRefresh' : state.y}
-  </div>,
-  children
-]
+import scrollTop from './scrollTop'
+import defaultRender from './component'
 
 export default class PullRefresh extends Component {
   constructor(props) {
@@ -62,9 +44,7 @@ export default class PullRefresh extends Component {
     const { refreshed, refreshing } = this.state
     if(!this._down || refreshed || refreshing) return
     const ey = evt.touches ? evt.touches[0].pageY : evt.pageY
-    // this._reactInternalInstance._currentElement._owner._instance
-    // contentOffset.y
-    if(this._node.scrollTop <= 0) {
+    if(scrollTop(this) <= 0) {
       this._y = clamp(this._y + ey - this._py, 0, max + 10)
       this._spring.endValue = this._y
     }
@@ -82,13 +62,12 @@ export default class PullRefresh extends Component {
     }
   }
   componentDidMount() {
-    this._node = findDOMNode(this)
     this._y = 0
     this._spring = new Spring(60, 10)
     this._spring.onUpdate = ::this.onSpringUpdate
   }
   render() {
-    const { disabled, as, children, ...props } = this.props
+    const { onRefresh, disabled, as, children, ...props } = this.props
     const Container = as
     return (
       <Container

src/scrollTop/index.js

@@ -0,0 +1,6 @@
+import { findDOMNode } from 'react-dom'
+
+export default component => {
+  const node = findDOMNode(component)
+  return node.scrollTop
+}

src/scrollTop/index.native.js

@@ -0,0 +1,2 @@
+export default component => component.contentOffset.y
+

yarn.lock

@@ -935,10 +935,6 @@ base64-js@^1.0.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"
 
-batch-processor@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
-
 bcrypt-pbkdf@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
@@ -1570,12 +1566,6 @@ electron-to-chromium@^1.3.27:
   version "1.3.27"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.27.tgz#78ecb8a399066187bb374eede35d9c70565a803d"
 
-element-resize-detector@^1.1.10:
-  version "1.1.12"
-  resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.1.12.tgz#8b3fd6eedda17f9c00b360a0ea2df9927ae80ba2"
-  dependencies:
-    batch-processor "^1.0.0"
-
 elliptic@^6.0.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
@@ -3293,7 +3283,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.8, prop-types@^15.6.0:
+prop-types@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
@@ -3377,14 +3367,6 @@ react-addons-shallow-compare@^15.6.2:
     fbjs "^0.8.4"
     object-assign "^4.1.0"
 
-react-container-dimensions@^1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/react-container-dimensions/-/react-container-dimensions-1.3.2.tgz#e13d3139e42f4110b28551202e4499ed85414bdd"
-  dependencies:
-    element-resize-detector "^1.1.10"
-    invariant "^2.2.2"
-    prop-types "^15.5.8"
-
 react-dom@^16.1.1:
   version "16.1.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.1.1.tgz#b2e331b6d752faf1a2d31399969399a41d8d45f8"