React Native – FlatList

FlatLists are used for large quantities of scrollable content. They expose the underlying ScrollView, but add performance improvements: only rendering the content on screen (clipping offscreen content), and only updating rows that have changed. Like ScrollViews, they can scroll horizontally or vertically.

It’s an easy way to make an efficient scrolling list of data. Not only is it efficient but it’s got an incredibly simple API to work with. If you’ve used or are familiar with the ListView component it’s very similar, just better in (almost) every way. 

The FlatList component takes two required props: data and renderItem.

The data is the source of elements for the list, and renderItem takes one item from the source and returns a formatted component to render.

To Import FlatList in Code

import { FlatList} from 'react-native'

The ItemSeparatorComponent prop of FlatList is used to implement the separator between the elements of the list. 

A performant interface for rendering basic, flat lists, supporting the most handy features:

• Fully cross-platform.
• Optional horizontal mode.
• Configurable viewability callbacks.
• Header support.
• Footer support.
• Separator support.
• Pull to Refresh.
• Scroll loading.
• ScrollToIndex support.
• Multiple column support.

To render multiple columns, use the numColumns prop. Using this approach instead of a flexWrap layout can prevent conflicts with the item height logic.

More complex, multi-select example demonstrating “ usage for perf optimization and avoiding bugs.

• By passing extraData={selected} to FlatList we make sure FlatList itself will re-render when the state changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is a PureComponent and the prop comparison will not show any changes.
• keyExtractor tells the list to use the ids for the react keys instead of the default key property.

import React from 'react';
import { StyleSheet, FlatList, Text, View, Alert } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      FlatListItems: [
        { id: '1', value: 'A' },
        { id: '2', value: 'B' },
        { id: '3', value: 'C' },
        { id: '4', value: 'D' },
        { id: '5', value: 'E' },
        { id: '6', value: 'F' },
        { id: '7', value: 'G' },
        { id: '8', value: 'H' },
        { id: '9', value: 'I' },
        { id: '10', value: 'J' },
        { id: '11', value: 'K' },
        { id: '12', value: 'L' },
        { id: '13', value: 'M' },
        { id: '14', value: 'N' },
        { id: '15', value: 'O' },
        { id: '16', value: 'P' },
        { id: '17', value: 'Q' },
        { id: '18', value: 'R' },
        { id: '19', value: 'S' },
        { id: '20', value: 'T' },
        { id: '21', value: 'U' },
        { id: '22', value: 'V' },
        { id: '23', value: 'W' },
        { id: '24', value: 'X' },
        { id: '25', value: 'Y' },
        { id: '26', value: 'Z' },
      ],
    };
  }

  FlatListItemSeparator = () => {
    return (   
      <View
        style={{ height: 0.5, width: '100%', backgroundColor: '#C8C8C8' }}
      />
    );
  };

  GetItem(item) {
    Alert.alert(item);
  }

  render() {
    return (
      <View style={styles.MainContainer}>
        <FlatList
          data={this.state.FlatListItems}
          ItemSeparatorComponent={this.FlatListItemSeparator}
          renderItem={({ item }) => (
            // Single Comes here which will be repeatative for the FlatListItems
            <View>
              <Text
                style={styles.item}
                onPress={this.GetItem.bind(
                  this,
                  'Id : ' + item.id + ' Value : ' + item.value
                )}>
                {item.value}
              </Text>
            </View>
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  MainContainer: {
    justifyContent: 'center',
    flex: 1,
    marginLeft: 10,
    marginRight: 10,
    marginBottom: 10,
    marginTop: 30,
  },

  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});