Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://shopify.github.io/flash-list/docs/guides/layout-animation below:

LayoutAnimation | FlashList

FlashList does support LayoutAnimations but you need to call prepareForLayoutAnimationRender() before React Native's LayoutAnimation.configureNext. prepareForLayoutAnimationRender is an instance method, so you have to keep a reference to your FlashList instance via the ref prop:

For the animation to work properly, you additionally need to add keyExtractor prop to your FlashList component if you have not already done so.

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;
      })
    );
    
    list.current?.prepareForLayoutAnimationRender();
    
    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
      
      ref={list}
      
      keyExtractor={(item: number) => {
        return item.toString();
      }}
      renderItem={renderItem}
      data={data}
    />
  );
};

export default List;

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4