refreshcontrol-scroll.js

/**
* The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
* Facebook reserves all rights not expressly granted.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
*/
'use strict';

const React = require('react-native');
const {
  ScrollView,
  StyleSheet,
  RefreshControl,
  Text,
  TouchableWithoutFeedback,
  View,
  ListView,
  TouchableHighlight,
} = React;

const styles = StyleSheet.create({
  row: {
    borderColor: 'grey',
    borderWidth: 1,
    padding: 20,
    backgroundColor: '#3a5795',
    margin: 5,
  },
  text: {
    alignSelf: 'center',
    color: '#fff',
  },
  scrollview: {
    flex: 1,
  },
});

class MyView extends React.Component {
    constructor(){
        super();
        this.ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2
        });
        this.state = {
            dataSource: this.ds
        };
    }
    pressScroll(){
        this.refs.listView.scrollTo(100, 0);
    }
    componentDidMount(){
        this.setState({
            dataSource: this.ds.cloneWithRows([1,2,3,4,5,6,1,23,3,1,4,321,1,13,13,14,143,143,42,14,14,32])
        });
    }
    _renderRow(rowData: Object, sectionID: number, rowID: number){
        return (
            <Text>{rowData}</Text>
        );
    }
    render() {
        return (
            <View>
                <TouchableHighlight onPress={this.pressScroll.bind(this)}>
                    <Text>Scroll</Text>
                </TouchableHighlight>
                <ListView ref="listView" style={{height:200, overflow:'hidden'}}
                dataSource={this.state.dataSource}
                renderRow={this._renderRow}
                refreshControl={
                    <RefreshControl
                    enabled={true}
                    refreshing={false}
                    progressBackgroundColor={'#ffffff'}
                    />
                }
                />
            </View>
        );
    }
}

const RefreshControlExample = React.createClass({
  statics: {
    title: '<RefreshControl>',
    description: 'Adds pull-to-refresh support to a scrollview.'
  },

  render() {
    return <MyView />;
  },
});

module.exports = RefreshControlExample;