add props isLoading

example/index.android.js

@@ -19,17 +19,22 @@ export default class PullToRefreshExample extends Component {
   constructor(param) {
     super(param);
     this.state = {
-      cards: [1, 2, 3]
+      cards: [1, 2, 3],
+      isLoading: false
     }
     this._refresh = this._refresh.bind(this);
 
   }
+  componentWillMount() {
+    this.setState({ isLoading: true });
+    this._refresh();
+  }
   _refresh () {
     // you must return Promise everytime
     return new Promise((resolve) => {
       setTimeout(()=>{
         // some refresh process should come here
-        this.setState({cards: this.state.cards.concat([this.state.cards.length + 1])})
+        this.setState({ isLoading: false, cards: this.state.cards.concat([this.state.cards.length + 1]) })
         resolve(); 
       }, 2000)
     })
@@ -41,6 +46,7 @@ export default class PullToRefreshExample extends Component {
           <Text style={styles.headerText}>PullToRefreshView Demo</Text>
         </View>
         <PTRView
+          isLoading={this.state.isLoading}
           style={{backgroundColor:'#F5FCFF'}}
           onRefresh={this._refresh}
         >

example/index.ios.js

@@ -19,17 +19,22 @@ export default class PullToRefreshExample extends Component {
   constructor(param) {
     super(param);
     this.state = {
-      cards: [1, 2, 3]
+      cards: [1, 2, 3],
+      isLoading: false
     }
     this._refresh = this._refresh.bind(this);
 
   }
+  componentDidMount() {
+    this.setState({ isLoading: true });
+    this._refresh();
+  }
   _refresh () {
     // you must return Promise everytime
     return new Promise((resolve) => {
       setTimeout(()=>{
         // some refresh process should come here
-        this.setState({cards: this.state.cards.concat([this.state.cards.length + 1])})
+        this.setState({ isLoading: false, cards: this.state.cards.concat([this.state.cards.length + 1]) })
         resolve(); 
       }, 2000)
     })
@@ -41,6 +46,7 @@ export default class PullToRefreshExample extends Component {
           <Text style={styles.headerText}>PullToRefreshView Demo</Text>
         </View>
         <PTRView
+          isLoading={this.state.isLoading}
           style={{backgroundColor:'#F5FCFF'}}
           onRefresh={this._refresh}
         >

lib/PullToRefreshView.android.js

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types'
 import { View, RefreshControl, ScrollView } from 'react-native'
 
 export default class PTRViewAndroid extends React.Component {
-  constructor () {
-    super()
+  constructor (props) {
+    super(props)
     this.state = {
-      isLoading: false
+      isLoading: this.props.isLoading
     }
   }
   _delay () {
@@ -33,6 +33,11 @@ export default class PTRViewAndroid extends React.Component {
       isLoading: false
     })
   }
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.isLoading !== this.state.isLoading) {
+      this.setState({ isLoading: nextProps.isLoading });
+    }
+  }
   render () {
     return (
       <ScrollView
@@ -55,13 +60,15 @@ PTRViewAndroid.defaultProps = {
   colors: ['#000'],
   progressBackgroundColor: '#fff',
   offset: 0,
-  delay: 0
+  delay: 0,
+  isLoading: false
 }
 
 PTRViewAndroid.propTypes = {
   delay: PropTypes.number,
   onRefresh: PropTypes.func,
   style: PropTypes.object,
   children (props, propName, componentName) {
-  }
+  },
+  isLoading: PropTypes.bool
 }

lib/PullToRefreshView.ios.js

@@ -8,12 +8,12 @@ import { View, ScrollView } from 'react-native'
 const INDICATOR_HEIGHT = 40
 
 export default class PTRViewiOS extends React.Component {
-  constructor () {
-    super()
+  constructor (props) {
+    super(props)
     this.state = {
       expand: -INDICATOR_HEIGHT,
       scroll_offset: 0,
-      isLoading: false,
+      isLoading: this.props.isLoading,
       needPull: true
     }
   }
@@ -82,6 +82,22 @@ export default class PTRViewiOS extends React.Component {
       }
     })()
   }
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.isLoading !== this.state.isLoading) {
+      if (nextProps.isLoading === true) {
+        this.setState({
+          expand: INDICATOR_HEIGHT-50,
+          needPull: false
+        }, () => this._expander(true))
+      } else {
+        this.setState({
+          expand: -INDICATOR_HEIGHT,
+          needPull: true
+        }, () => this._expander(false))
+      }
+      this.setState({ isLoading: nextProps.isLoading });
+    }
+  }
   render () {
     return (
       <View style={{flex: 1}}>
@@ -107,7 +123,8 @@ export default class PTRViewiOS extends React.Component {
 
 PTRViewiOS.defaultProps = {
   offset: 100,
-  delay: 0
+  delay: 0,
+  isLoading: false
 }
 
 PTRViewiOS.propTypes = {
@@ -116,5 +133,6 @@ PTRViewiOS.propTypes = {
   onRefresh: PropTypes.func,
   style: PropTypes.object,
   children (props, propName, componentName) {
-  }
+  },
+  isLoading: PropTypes.bool
 }