Skip to content

Instantly share code, notes, and snippets.

@jsdf

jsdf/ReactNativeRefreshableListView.js

Last active September 15, 2023 07:29
Show Gist options
  • Save jsdf/6930c0211e0dc5bf0227 to your computer and use it in GitHub Desktop.
Save jsdf/6930c0211e0dc5bf0227 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jsdf revised this gist Mar 31, 2015. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions ReactNativeRefreshableListView.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    // for an updated version see https://github.com/jsdf/react-native-refreshable-listview

    var React = require('react-native')
    var {
    ListView,
  2. jsdf revised this gist Mar 31, 2015. 1 changed file with 6 additions and 4 deletions.
    10 changes: 6 additions & 4 deletions ReactNativeRefreshableListView.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,17 +7,19 @@ var {
    Text,
    } = React

    // must be less than ~50px due to ScrollView bug (event only fires once)
    // https://github.com/facebook/react-native/pull/452
    // TODO: expose as a prop when onScroll works properly
    var PULLDOWN_DISTANCE = 40 // pixels

    var RefreshableListView = React.createClass({
    getInitialState() {
    return {
    reloading: false,
    }
    },
    handleScroll(e) {
    // must be less than 40 px due to ScrollView bug (event only fires once)
    // https://github.com/facebook/react-native/pull/452
    // TODO: fix this when onScroll works properly
    if (e.nativeEvent.contentOffset.y < -40) {
    if (e.nativeEvent.contentOffset.y < -PULLDOWN_DISTANCE) {
    this.reloadData()
    }
    this.props.onScroll && this.props.onScroll(e)
  3. jsdf revised this gist Mar 31, 2015. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions ReactNativeRefreshableListView.js
    View file
    Original file line number Diff line number Diff line change
    @@ -15,6 +15,7 @@ var RefreshableListView = React.createClass({
    },
    handleScroll(e) {
    // must be less than 40 px due to ScrollView bug (event only fires once)
    // https://github.com/facebook/react-native/pull/452
    // TODO: fix this when onScroll works properly
    if (e.nativeEvent.contentOffset.y < -40) {
    this.reloadData()
  4. jsdf revised this gist Mar 31, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion ReactNativeRefreshableListView.js
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,7 @@ var RefreshableListView = React.createClass({
    }
    },
    handleScroll(e) {
    // must be less than 40 px due to ScrollView bug (event only fires onces)
    // must be less than 40 px due to ScrollView bug (event only fires once)
    // TODO: fix this when onScroll works properly
    if (e.nativeEvent.contentOffset.y < -40) {
    this.reloadData()
  5. jsdf revised this gist Mar 31, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion ReactNativeRefreshableListView.js
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,7 @@ var RefreshableListView = React.createClass({
    if (e.nativeEvent.contentOffset.y < -40) {
    this.reloadData()
    }
    this.props.onScroll && this.props.onScroll(e);
    this.props.onScroll && this.props.onScroll(e)
    },
    reloadData() {
    if (this.willReload || this.state.reloading) return
  6. jsdf revised this gist Mar 31, 2015. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions ReactNativeRefreshableListView.js
    View file
    Original file line number Diff line number Diff line change
    @@ -28,6 +28,7 @@ var RefreshableListView = React.createClass({
    Promise.all([
    this.props.loadData(),
    new Promise((resolve) => this.setState({reloading: true}, resolve)),
    new Promise((resolve) => setTimeout(resolve, 300)),
    ]).then(([data]) => {
    this.willReload = false
    this.setState({reloading: false})
  7. jsdf renamed this gist Mar 31, 2015. 1 changed file with 0 additions and 0 deletions.
    0 ReactNativeRefreshableListView → ReactNativeRefreshableListView.js
    View file
    File renamed without changes.
  8. jsdf created this gist Mar 31, 2015.
    79 changes: 79 additions & 0 deletions ReactNativeRefreshableListView
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,79 @@
    var React = require('react-native')
    var {
    ListView,
    ActivityIndicatorIOS,
    StyleSheet,
    View,
    Text,
    } = React

    var RefreshableListView = React.createClass({
    getInitialState() {
    return {
    reloading: false,
    }
    },
    handleScroll(e) {
    // must be less than 40 px due to ScrollView bug (event only fires onces)
    // TODO: fix this when onScroll works properly
    if (e.nativeEvent.contentOffset.y < -40) {
    this.reloadData()
    }
    this.props.onScroll && this.props.onScroll(e);
    },
    reloadData() {
    if (this.willReload || this.state.reloading) return

    this.willReload = true
    Promise.all([
    this.props.loadData(),
    new Promise((resolve) => this.setState({reloading: true}, resolve)),
    ]).then(([data]) => {
    this.willReload = false
    this.setState({reloading: false})
    })
    },
    renderHeader() {
    if (this.state.reloading) {
    return (
    <View style={[styles.container, styles.wrapper]}>
    <View style={[styles.container, styles.loading]}>
    <Text>{this.props.refreshDescription}</Text>
    <ActivityIndicatorIOS />
    </View>
    </View>
    )
    } else {
    return null
    }
    },
    render() {
    return (
    <ListView
    {...this.props}
    onScroll={this.handleScroll}
    renderHeader={this.renderHeader}
    />
    )
    }
    })

    var styles = StyleSheet.create({
    wrapper: {
    height: 60,
    marginTop: 10,
    },
    container: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: 'white',
    },
    loading: {
    height: 60,
    },
    })

    RefreshableListView.DataSource = ListView.DataSource

    module.exports = RefreshableListView