Skip to content

Instantly share code, notes, and snippets.

@danbit
Created March 8, 2018 01:52
Show Gist options
  • Save danbit/f619635d95e4074a977e4784ffc77926 to your computer and use it in GitHub Desktop.
Save danbit/f619635d95e4074a977e4784ffc77926 to your computer and use it in GitHub Desktop.
React Native - ListView with infinite scroll
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { View, ListView, RefreshControl } from 'react-native';
import { NoticiaItem } from '../NoticiaItem';
import * as actions from '../../actions';
class NoticiaList extends Component {
componentDidMount() {
console.log('componentDidMount');
this.noticiaFetch(1);
}
_onRefresh() {
console.log('_onRefresh');
this.noticiaFetch(1);
}
_onEndReached() {
setTimeout(() => {
this.noticiaFetch(this.props.page);
}, 500);
}
noticiaFetch(page) {
const { categoria } = this.props;
if (categoria) {
this.props.noticiaByCategoriaFetch({ page, categoria: this.props.categoria });
} else {
this.props.noticiaFetch({ page });
}
}
renderRow(noticia) {
return <NoticiaItem item={noticia} navigation={this.props.navigation} />;
}
render() {
return (
<View>
<ListView
enableEmptySections
dataSource={this.props.dataSource}
renderRow={rowData => this.renderRow(rowData)}
onEndReached={() => this._onEndReached()}
onEndReachedThreshold={15}
automaticallyAdjustContentInsetsts={false}
refreshControl={
<RefreshControl
refreshing={this.props.loading}
onRefresh={this._onRefresh.bind(this)}
tintColor="#f7941d"
colors={['#f7941d']}
/>
}
/>
</View>
);
}
}
NoticiaList.propTypes = {
dataSource: PropTypes.object
};
const dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
});
const mapStateToProps = ({ noticia }) => {
return {
dataSource: dataSource.cloneWithRows(noticia.list),
loading: noticia.loading,
page: noticia.page
};
};
export default connect(mapStateToProps, actions)(NoticiaList);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment