React Native-refreshcontrol use case

‘Use strict’;
import React, {Component} from ‘react’;
import {
  AppRegistry,
  ScrollView,
  StyleSheet,
  Text,
  View,
  RefreshControl,
} from ‘react-native’;

class ListRowComponent extends React.Component {
  render () {
    return (
        <View style = {styles.row}>
          <Text style = {styles.text}>
            {this.props.data.text}
          </ Text>
        </ View>
    );
  }
};
class MyProject extends Component {
  constructor (props) {
    super (props);
    this.state = {
      isRefreshing: false,
      loaded: 0,
      rowData: Array.from (new Array (10)). map (
        (val, i) => ({text: ‘the first data row loaded‘ + i})),
    };
  }

  render () {
    var rows = this.state.rowData.map ((row, indexKey) => {
       return <ListRowComponent key = {indexKey} data = {row} />;
     });
     return (
       <ScrollView style = {styles.scrollview} refreshControl = {
           <RefreshControl
             refreshing = {this.state.isRefreshing}
             onRefresh = {this.onRefresh.bind (this)} //(()=>this.onRefresh) or bind this reference through bind to call
             tintColor = ‘red’
             title = {this.state.isRefreshing? ‘Refreshing ....’: ‘Pull down refresh’
           />
         }>
         {rows}
       </ ScrollView>
     );
  }
  onRefresh () {
    this.setState ({isRefreshing: true});
    setTimeout (() => {
      // 5 data to be refreshed
      var rowNewData = Array.from (new Array (5))
      .map ((val, i) => ({
        text: ‘Pull down to refresh the added data row’ + (+ this.state.loaded + i)
      }))
      .concat (this.state.rowData);
      this.setState ({
        loaded: this.state.loaded + 5,
        isRefreshing: false,
        rowData: rowNewData,
      });
    }, 2000);
  }

}

const styles = StyleSheet.create ({
  row: {
     borderColor: ‘green’,
     borderWidth: 5,
     padding: 20,
     backgroundColor: ‘# 3a5795’,
     margin: 5,
  },
  text: {
     alignSelf: ‘center’,
     color: ‘white’,
  },
  scrollerview: {
    flex: 1,
  }
});

AppRegistry.registerComponent (‘MyProject’, () => MyProject); 

Effect Demo diagram:

Reference case:

http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9% 8brefreshcontrol%e7%bb%84%e4%bb%b6%e8%af%a6%e8%a7%a321/

React Native-refreshcontrol use case