FlashList

To use React Native's LayoutAnimation with FlashList, you must call the prepareForLayoutAnimationRender() instance method on your FlashList reference before calling LayoutAnimation.configureNext(). Additionally, you must provide a keyExtractor prop to your FlashList component to ensure elements are uniquely identified for the animation.

Note: LayoutAnimation is experimental on Android, and stability cannot be guaranteed when used with FlashList on that platform.

import React, { useRef, useState } from "react";
import { View, Text, Pressable, LayoutAnimation } from "react-native";
import { FlashList } from "@shopify/flash-list";

const List = () => {
  const [data, setData] = useState([1, 2, 3, 4, 5]);

  const list = useRef<FlashList<number> | null>(null);

  const removeItem = (item: number) => {
    setData(
      data.filter((dataItem) => {
        return dataItem !== item;
      })
    );
    // This must be called before `LayoutAnimation.configureNext` in order for the animation to run properly.
    list.current?.prepareForLayoutAnimationRender();
    // After removing the item, we can start the animation.
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
  };

  const renderItem = ({ item }: { item: number }) => {
    return (
      <Pressable
        onPress={() => {
          removeItem(item);
        }}
      >
        <View>
          <Text>Cell Id: {item}</Text>
        </View>
      </Pressable>
    );
  };

  return (
    <FlashList
      // Saving reference to the `FlashList` instance to later trigger `prepareForLayoutAnimationRender` method.
      ref={list}
      // This prop is necessary to uniquely identify the elements in the list.
      keyExtractor={(item: number) => {
        return item.toString();
      }}
      renderItem={renderItem}
      data={data}
    />
  );
};

export default List;

The LayoutCommitObserver is a utility component used to track when all FlashList components within its component tree have completed their layout. This is useful for coordinating complex UI behaviors that depend on list rendering completion, such as measuring view sizes after all internal lists have rendered, especially when you do not have direct access to the FlashList instances (e.g., when your component only accepts a children prop).

Important Considerations:

• The onCommitLayoutEffect callback fires after every layout operation, not just the initial one.
• Performance Warning: Performing a setState inside the callback will block paint until the state change is ready to be committed.
• Alternatives:
  • If you do not need to block paint, use the onLoad callback instead.
  • If you only have a single FlashList and have direct access to it, use the onCommitLayoutEffect prop available directly on the FlashList component.

import { LayoutCommitObserver } from "@shopify/flash-list";

function MyScreen() {
  const handleLayoutComplete = () => {
    console.log("All FlashLists have completed their initial layout!");
    // Perform any post-layout actions here
  };

  return (
    <LayoutCommitObserver onCommitLayoutEffect={handleLayoutComplete}>
      <View>
        <FlashList data={data1} renderItem={renderItem1} />
        <FlashList data={data2} renderItem={renderItem2} />
      </View>
    </LayoutCommitObserver>
  );
}

Since FlashList does not support SectionList specific props like sections, renderSectionHeader, or renderSectionFooter, you must flatten your data into a single array and use type checking within renderItem to distinguish between section headers and list items.

Migration Steps:

1. Flatten Data: Convert your nested section objects into a single array containing both the header values (e.g., strings) and the data items.
2. Update renderItem: Use typeof or a similar type guard to determine if the current item is a header or a data row.
3. Implement getItemType: For optimal performance, provide a getItemType function that returns a unique identifier for each type of item (e.g., 'sectionHeader' vs 'row'). This helps FlashList recycle components more efficiently.
4. Handle Sticky Headers: To replicate stickySectionHeadersEnabled, pre-calculate an array of indices for stickyHeaderIndices that points to the positions of your header items in the flattened array.

import React from "react";
import { StyleSheet, Text } from "react-native";
import { FlashList } from "@shopify/flash-list";

interface Contact {
  firstName: string;
  lastName: string;
}

// 1. Flattened data containing both headers (strings) and items (Contact)
const contacts: (string | Contact)[] = [
  "A",
  { firstName: "John", lastName: "Aaron" },
  "D",
  { firstName: "John", lastName: "Doe" },
  { firstName: "Mary", lastName: "Dianne" },
];

// 2. Pre-calculate indices for sticky headers
const stickyHeaderIndices = contacts
  .map((item, index) => {
    if (typeof item === "string") {
      return index;
    } else {
      return null;
    }
  })
  .filter((item) => item !== null) as number[];

const ContactsFlashList = () => {
  return (
    <FlashList
      data={contacts}
      renderItem={({ item }) => {
        if (typeof item === "string") {
          // Rendering header
          return <Text style={styles.header}>{item}</Text>;
        } else {
          // Render item
          return <Text>{item.firstName}</Text>;
        }
      }}
      stickyHeaderIndices={stickyHeaderIndices}
      getItemType={(item) => {
        // 3. Specify type for better performance
        return typeof item === "string" ? "sectionHeader" : "row";
      }}
    />
  );
};

const styles = StyleSheet.create({
  header: {
    fontSize: 32,
    backgroundColor: "#fff",
  },
});