React Native Refreshable FlatList

A pull-down-to-refresh and pull-up-to-load-more component based on FlatList.

The component is compeletly written in js and is highly customizable.

Inspired by react-native-refreshable-listview and react-native-pull

##### iOS

!iOS

##### Android

!Android

Usage

npm install react-native-refreshable-flatlist

$3

RefreshableFlatList Accepts the same props as FlatList, plus a few extras (see the props definitions below).

``js
import React, { PureComponent } from 'react';
import {
View,
Text,
StyleSheet,
Dimensions
} from 'react-native';
import RefreshableFlatList from 'react-native-refreshable-flatlist';

const { width } = Dimensions.get('window');
const styles = StyleSheet.create({
container: {
flex: 1
},
topBar: {
backgroundColor: '#F7F7F8',
height: 64,
zIndex: 10,
},
row: {
padding: 10,
height: 125,
width,
backgroundColor: '#ffffff',
borderTopWidth: 1,
marginBottom: -1,
borderBottomColor: '#E5EDF5',
borderTopColor: '#E5EDF5',
borderBottomWidth: 1,
justifyContent: 'center'
},
text: {
textAlign: 'center',
color: '#6da3d0'
},
navText: {
color: '#6da3d0',
fontSize: 20,
fontWeight: '700',
textAlign: 'center',
paddingTop: 30
}
});

export default class Example extends PureComponent {
state = {
data: new Array(3).fill(1).map((x, i) => ({ id: i, text: Item No. ${i} })),
}

render() {
return (

RefreshableFlatList
data={this.state.data}
renderItem={({ item }) => (

{item.text}

)}
ref={(ref) => { this.flatList = ref; }}
onRefreshing={() => new Promise((r) => {
setTimeout(() => {
r();
}, 3000);
})}
onLoadMore={() => new Promise((r) => {
setTimeout(() => {
const no = this.state.data.length;
const newArr = new Array(4).fill(1).map((x, i) => ({ id: i + no, text: Item No. ${i + no} }));
this.setState({ data: this.state.data.concat(newArr) });
r();
}, 2500);
})}
keyExtractor={item => item.id}
styles={{ prompt: { color: 'gray' } }}
/>

);
}
}

``

#### Props

- onRefreshing: func
A function returning a Promise or taking a callback, called when user pulls flatlist down to refresh.

The top loading indicator will show until the Promise resolves or the callback is called.

- onLoadMore: func
A function returning a Promise or taking a callback, called when user pulls flatlist up to load more data.

The bottom loading indicator will show until the Promise resolves or the callback is called.

- showTopIndicator: bool

Whether to show top indicator. Defaults to true.

- showBottomIndicator: bool

Whether to show top indicator. Defaults to true.

- topIndicatorComponent: oneOfType([func, element])
Component shows in list header when pulling down.

- bottomIndicatorComponent: oneOfType([func, element])
Component shows in list footer when pulling up.

- minDisplayTime: number

The minimum amount of time for showing the loading indicator while is refreshing. Default 300ms.

- minPullDownDistance: number
Minimum distance (in px) which the list has to be scrolled off the top to
trigger a refresh.

- minPullUpDistance: number
Minimum distance (in px) which the list has to be scrolled off the bottom to
trigger a data loading.

$3

topIndicatorComponent shows in list header when pulling and refreshing.

#### Props

- topPullingIndicator: oneOfType([string, element])
Text/element shows in list header when user pulls flatlist down. Could be image or icon.

- topHoldingIndicator: oneOfType([string, element])
Text/element shows in list header when user pulls flatlist down and the pull-down distance exceeds minPullDownDistance.

- topRefreshingIndicator: oneOfType([string, element])
Text/element shows in list header when refreshing.

- topPullingPrompt: oneOfType([func, element])

Text/element to show alongside indicator when user pulls down.

- topHoldingPrompt: oneOfType([string, element])
Text/element to show alongside indicator when user pulls flatlist down and the pull-down distance exceeds minPullDownDistance.

- topRefreshingPrompt: oneOfType([string, element])
Text/element to show alongside indicator when refreshing.

$3

bottomIndicatorComponent shows in list footer when pulling and data loading.

#### Props

- bottomPullingIndicator: oneOfType([string, element])
Text/element shows in list footer when user pulls flatlist up. Could be image or icon.

- bottomHoldingIndicator: oneOfType([string, element])
Text/element shows in list footer when user pulls flatlist up and the pull-up distance exceeds minPullUpDistance.

- bottomRefreshingIndicator: oneOfType([string, element])
Text/element shows in list header when data loading.

- bottomPullingPrompt: oneOfType([func, element])

Text/element to show alongside indicator when user pulls up.

- bottomHoldingPrompt: oneOfType([string, element])
Text/element to show alongside indicator when user pulls flatlist up and the pull-up distance exceeds minPullDownDistance.

- bottomRefreshingPrompt: oneOfType([string, element])
Text/element to show alongside indicator when data loading.

$3

Just past the styles prop to RefreshableFlatList, it will pass the prop to both topIndicatorComponent and bottomIndicatorComponent. The styles prop must has structure like below:

``Js
const styles = StyleSheet.create({
indicatorContainer: {
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
height: 54,
},
indicator: {
width: 24,
height: 24,
marginRight: 15,
resizeMode: 'cover',
},
prompt: {
color: '#6e6e6e',
fontSize: 14
}
});
``