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 ⚠️

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

• ChatApp

License

MIT