MENU


<FlatList>

A performant interface for rendering basic, flat lists, supporting the handiest 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.

Props(inherits ScrollView Props)renderItem requireddata requiredItemSeparatorComponentListEmptyComponentListFooterComponentListFooterComponentStyleListHeaderComponentListHeaderComponentStylecolumnWrapperStyleextraDatagetItemLayouthorizontalinitialNumToRenderinitialScrollIndexinvertedkeyExtractornumColumnsprogressViewOffsetrefreshingremoveClippedSubviewsviewabilityConfigviewabilityConfigCallbackPairs Event PropsonEndReachedonEndReachedThresholdonRefreshonViewableItemsChanged
Methods.flashScrollIndicators().getNativeScrollRef().getScrollResponder().getScrollableNode().recordInteraction().scrollToEnd().scrollToIndex().scrollToItem().scrollToOffset()

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

A more complex, selectable example is shown below.

By passing extraData={selectedId} 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.

This is a convenience wrapper around <VirtualizedList>, and thus inherits its props (as well as those of <ScrollView>) that aren't explicitly listed here, along with the following caveats:

Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.

This is a PureComponent which means that it will not re-render if props remain shallow-equal. Make sure that everything your renderItem function depends on is passed as a prop (e.g. extraData) that is not === after updates, otherwise, your UI may not update on changes. This includes the data prop and parent component state.

In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.

By default, the list looks for a key prop on each item and uses that for the React key. Alternatively, you can provide a custom keyExtractor prop.


RESETRUNFULL
import React from 'react';import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';const DATA = [{id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
                        title: 'First Item'},
                      {id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
                        title: 'Second Item'},
                      {id: '58694a0f-3da1-471f-bd96-145571e29d72',
                        title: 'Third Item'}];const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>);const App = () => {
  const renderItem = ({ item }) => (<Item title={item.title} />);
  return (<SafeAreaView style={styles.container}>
                <FlatList data={DATA} renderItem={renderItem}
    keyExtractor={item => item.id} />
             </SafeAreaView>);}const styles = StyleSheet.create({
  container: { flex: 1, marginTop: StatusBar.currentHeight || 0},
  item: { backgroundColor: '#f9c2ff',
              padding: 20,
              marginVertical: 8,
              marginHorizontal: 16 },
  title: { fontSize: 32 },});export default App;