import React, { Component } from 'react';
import DropRefreshControl from 'react-native-drop-refresh';

import {
  AppRegistry,
  ListView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from 'react-native';

var SCROLLVIEW = 'ScrollView';
var LISTVIEW = 'ListView';

class RCTRefreshControlDemo extends Component{
  constructor(){
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(['#484848', '#2F9C0A', '#05A5D1']),
    }
  }

  componentDidMount() {
    // ScrollView
    DropRefreshControl.configure({
      node: this.refs[SCROLLVIEW],
      tintColor: '#05A5D1',
      activityIndicatorViewColor: '#05A5D1'
    }, () => {
      setTimeout(() => {
        DropRefreshControl.endRefreshing(this.refs[SCROLLVIEW]);
      }, 2000);
    });

    // ListView
    DropRefreshControl.configure({
      node: this.refs[LISTVIEW]
    }, () => {
      setTimeout(() => {
        DropRefreshControl.endRefreshing(this.refs[LISTVIEW]);
      }, 2000);
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView ref={SCROLLVIEW} style={styles.scrollView}>
          <View style={{backgroundColor: '#05A5D1', height: 200}} />
          <View style={{backgroundColor: '#FDF3E7', height: 200}} />
          <View style={{backgroundColor: '#484848', height: 200}} />
        </ScrollView>

        <ListView
          ref={LISTVIEW}
          style={styles.listView}
          dataSource={this.state.dataSource}
          renderRow={(rowData) => {
            var color = rowData;
            return (
              <View style={{backgroundColor: color, height: 200}} />
            );
          }}
        />
      </View>
    );
  }
};

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row'
  }
});

AppRegistry.registerComponent('DropRefreshControlDemo', () => DropRefreshControlDemo);
// use `export default DropRefreshControlDemo` instead to use this as an component;