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

1$ npm install react-native-inverted-flat-list --save

OR

1$ yarn add react-native-inverted-flat-list

Example

1import React, { Component } from 'react';
2import { Text, View } from 'react-native';
3import InvertedFlatList from 'react-native-inverted-flat-list';
4
5class InfiniteScrollingList extends Component {
6  state = {
7    refreshing: false,
8    // NOTE: The messages should be in reverse order
9    messages: [
10      { id: '5', text: 'Me too!'},
11      { id: '4', text: 'I am fine thanks! How are you?'},
12      { id: '3', text: 'How is it going?'},
13      { id: '2', text: 'Hey'},
14      { id: '1', text: 'Hello'}
15    ]
16  }
17
18  onPullToRefresh = () => {
19    const { refreshing, messages } = this.state;
20
21    // Return early if already refreshing
22    if (refreshing) return;
23
24    this.setState({refreshing: true});
25
26    // Load more messages
27    const moreMessages = ...;
28
29    const copyMessages = messages.slice();
30    const newMessages = copyMessages.concat(moreMessages);
31
32    this.setState({
33      refreshing: false,
34      messages: newMessages
35    });
36  }
37
38  render() {
39    const { messages, refreshing } = this.state;
40    return (
41      <InvertedFlatList
42        refreshing={refreshing} // required
43        data={messages} // required
44        keyExtractor={item => item.id} // required
45        onPullToRefresh={this.onPullToRefresh}
46        renderItem={({ item }) => ( // required
47          <View>
48            <Text>{item.text}</Text>
49          </View>
50        )}
51      />
52    )
53  }
54}
55

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