84 lines
2.2 KiB
TypeScript
84 lines
2.2 KiB
TypeScript
import { FlashList } from '@shopify/flash-list';
|
|
import { StatusBar } from 'expo-status-bar';
|
|
import { useRef, useState } from 'react';
|
|
import { LayoutAnimation, Pressable, StyleSheet, Text, View } from 'react-native';
|
|
|
|
export default function App() {
|
|
const generateArray = (size: number) => {
|
|
const arr = new Array(size);
|
|
for (let i = 0; i < size; i++) {
|
|
arr[i] = i;
|
|
}
|
|
return arr;
|
|
};
|
|
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
const [data, setData] = useState(generateArray(100));
|
|
|
|
const list = useRef<FlashList<number> | null>(null);
|
|
|
|
const removeItem = (item: number) => {
|
|
setData(
|
|
data.filter((dataItem) => {
|
|
return dataItem !== item;
|
|
})
|
|
);
|
|
list.current?.prepareForLayoutAnimationRender();
|
|
// after removing the item, we start animation
|
|
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
|
|
};
|
|
|
|
const renderItem = ({ item }: { item: number }) => {
|
|
const backgroundColor = item % 2 === 0 ? "#00a1f1" : "#ffbb00";
|
|
return (
|
|
<Pressable
|
|
onPress={() => {
|
|
removeItem(item);
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
...styles.container,
|
|
backgroundColor: item > 97 ? "red" : backgroundColor,
|
|
height: item % 2 === 0 ? 100 : 200,
|
|
}}
|
|
>
|
|
<Text>Cell Id: {item}</Text>
|
|
</View>
|
|
</Pressable>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<FlashList
|
|
ref={list}
|
|
style={{flexGrow: 1, width: '100%', height: 50, backgroundColor: '#88F'}}
|
|
refreshing={refreshing}
|
|
onRefresh={() => {
|
|
setRefreshing(true);
|
|
setTimeout(() => {
|
|
setRefreshing(false);
|
|
}, 2000);
|
|
}}
|
|
keyExtractor={(item: number) => {
|
|
return item.toString();
|
|
}}
|
|
getItemType={(item: number) => {
|
|
return item > 97 ? "even" : "odd";
|
|
}}
|
|
renderItem={renderItem}
|
|
estimatedItemSize={100}
|
|
data={data}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#f8f',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
});
|