React Native Inverted FlatList
InvertedFlatList enables on pull to refresh functionality. Ideal to use when
you need an infinite scrolling list loading more data when the user scrolls to
the top using the onPullToRefresh method.
The onEndReached method on <FlatList inverted ... /> cannot be used
as it is only called once. This is problematic if the loading of more data
fails, for example when there is a network connection problem.
:warning: WARNING :warning:
InvertedFlatList enables the onPullToRefresh functionality using the
onScroll method on the flatlist. It has not been tested when passing a
custom onScroll prop. If you run into any problems using it, please create
an issue
Documentation
Install
$ npm install react-native-inverted-flat-list --save
OR
$ yarn add react-native-inverted-flat-list
Example
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import InvertedFlatList from 'react-native-inverted-flat-list';
class InfiniteScrollingList extends Component {
state = {
refreshing: false,
// NOTE: The messages should be in reverse order
messages: [
{ id: '5', text: 'Me too!'},
{ id: '4', text: 'I am fine thanks! How are you?'},
{ id: '3', text: 'How is it going?'},
{ id: '2', text: 'Hey'},
{ id: '1', text: 'Hello'}
]
}
onPullToRefresh = () => {
const { refreshing, messages } = this.state;
// Return early if already refreshing
if (refreshing) return;
this.setState({refreshing: true});
// Load more messages
const moreMessages = ...;
const copyMessages = messages.slice();
const newMessages = copyMessages.concat(moreMessages);
this.setState({
refreshing: false,
messages: newMessages
});
}
render() {
const { messages, refreshing } = this.state;
return (
<InvertedFlatList
refreshing={refreshing} // required
data={messages} // required
keyExtractor={item => item.id} // required
onPullToRefresh={this.onPullToRefresh}
renderItem={({ item }) => ( // required
<View>
<Text>{item.text}</Text>
</View>
)}
/>
)
}
}
Props
- FlatList props
- refreshOffset - The offset from the top before onPullToRefresh is triggered
- onPullToRefresh - Function called when viewer scrolls to top
Example Projects
For projects using react-native-inverted-flat-list
License
MIT
