Skip to main content

​
Core Data Props

​
data
ReadonlyArray<TItem> | null | undefined
required
For simplicity, data is a plain array of items of a given type.
<FlashList
  data={[
    { id: '1', title: 'First Item' },
    { id: '2', title: 'Second Item' },
  ]}
  renderItem={renderItem}
/>
​
renderItem
ListRenderItem<TItem> | null | undefined
required
Takes an item from data and renders it into the list. Provides additional metadata like index and target.
renderItem = ({ item, index, target }) => (
  <View>
    <Text>{item.title}</Text>
  </View>
);
The render function receives:
  • item (Object): The item from data being rendered
  • index (number): The index corresponding to this item in the data array
  • target (RenderTarget): Indicates why the item is being rendered:
    • "Cell" - Normal list item rendering
    • "Measurement" - Invoked for size measurement (not visible, can be ignored in analytics)
    • "StickyHeader" - Item is being used as a sticky header
  • extraData (any): The value passed to the extraData prop
​
keyExtractor
(item: TItem, index: number) => string
Used to extract a unique key for a given item at the specified index. Key is used for optimizing performance.Defining keyExtractor is also necessary when doing layout animations to uniquely identify animated components.
<FlashList
  data={items}
  renderItem={renderItem}
  keyExtractor={(item, index) => item.id}
/>
​
getItemType
(item: TItem, index: number, extraData?: any) => string | number | undefined
Allows developers to override type of items. This will improve recycling if you have different types of items in the list. The right type will be used for the right item. Default type is 0.If you don’t want to change type for certain indexes, just return undefined.
Performance: This method is called very frequently. Keep it fast.
<FlashList
  data={items}
  renderItem={({ item }) => {
    if (item.type === 'header') return <HeaderItem {...item} />;
    if (item.type === 'photo') return <PhotoItem {...item} />;
    return <TextItem {...item} />;
  }}
  getItemType={(item) => item.type}
/>

​
Additional Data

​
extraData
any
A marker property for telling the list to re-render (since it implements PureComponent).If any of your renderItem, Header, Footer, etc. functions depend on anything outside of the data prop, stick it here and treat it immutably.
const [selectedId, setSelectedId] = useState(null);

<FlashList
  data={items}
  renderItem={({ item }) => (
    <Item
      item={item}
      isSelected={item.id === selectedId}
    />
  )}
  extraData={selectedId}
/>

​
Component Props

​
CellRendererComponent
React.ComponentType<any>
Each cell is rendered using this element. Can be a React Component Class, or a render function. The root component should always be a CellContainer which is also the default component used.Ensure that the original props are passed to the returned CellContainer. The props will include:
  • onLayout: Method for updating data about the real CellContainer layout
  • index: Index of the cell in the list
  • style: Style of CellContainer, including:
    • flexDirection: Depends on whether your list is horizontal or vertical
    • position: Value will be absolute (how FlashList positions elements)
    • left: Position on x axis
    • top: Position on y axis
    • width: Width of element (present when list is vertical)
    • height: Height of element (present when list is horizontal)
Changing layout of the cell can conflict with native layout operations. You may need to set disableAutoLayout to true to prevent this.
​
ItemSeparatorComponent
React.ComponentType<any> | null | undefined
Rendered in between each item, but not at the top or bottom. By default, leadingItem and trailingItem (if available) props are provided.
const Separator = () => (
  <View style={{ height: 1, backgroundColor: '#ccc' }} />
);

<FlashList
  data={items}
  renderItem={renderItem}
  ItemSeparatorComponent={Separator}
/>
​
ListEmptyComponent
React.ComponentType<any> | React.ReactElement | null | undefined
Rendered when the list is empty. Can be a React Component (e.g. SomeComponent), or a React element (e.g. <SomeComponent />).
<FlashList
  data={items}
  renderItem={renderItem}
  ListEmptyComponent={() => (
    <View style={{ padding: 20 }}>
      <Text>No items found</Text>
    </View>
  )}
/>
​
ListHeaderComponent
React.ComponentType<any> | React.ReactElement | null | undefined
Rendered at the top of all the items. Can be a React Component (e.g. SomeComponent), or a React element (e.g. <SomeComponent />).
<FlashList
  data={items}
  renderItem={renderItem}
  ListHeaderComponent={<HeaderComponent />}
/>
​
ListHeaderComponentStyle
StyleProp<ViewStyle>
Styling for internal View for ListHeaderComponent.
<FlashList
  data={items}
  renderItem={renderItem}
  ListHeaderComponent={<HeaderComponent />}
  ListHeaderComponentStyle={{ paddingBottom: 20 }}
/>
​
ListFooterComponent
React.ComponentType<any> | React.ReactElement | null | undefined
Rendered at the bottom of all the items. Can be a React Component (e.g. SomeComponent), or a React element (e.g. <SomeComponent />).
<FlashList
  data={items}
  renderItem={renderItem}
  ListFooterComponent={<FooterComponent />}
/>
​
ListFooterComponentStyle
StyleProp<ViewStyle>
Styling for internal View for ListFooterComponent.
<FlashList
  data={items}
  renderItem={renderItem}
  ListFooterComponent={<FooterComponent />}
  ListFooterComponentStyle={{ paddingTop: 20 }}
/>
​
renderScrollComponent
React.ComponentType<ScrollViewProps>
Rendered as the main scrollview. Allows you to replace the internal ScrollView with a custom implementation.
import { ScrollView } from 'react-native';

const CustomScrollView = (props) => (
  <ScrollView {...props} showsVerticalScrollIndicator={false} />
);

<FlashList
  data={items}
  renderItem={renderItem}
  renderScrollComponent={CustomScrollView}
/>

​
Type Reference

​
ListRenderItemInfo<TItem>

The info object passed to renderItem: 
interface ListRenderItemInfo<TItem> {
  item: TItem;
  index: number;
  target: "Cell" | "StickyHeader" | "Measurement";
  extraData?: any;
}

​
ListRenderItem<TItem>

The type for the renderItem function: 
type ListRenderItem<TItem> = (
  info: ListRenderItemInfo<TItem>
) => React.ReactElement | null;

Build docs developers (and LLMs) love

Get started for freeTalk to us