i am building a flatlist with infinite scrolling and deleting items feature,
but everytime i delete an item (using filter) my flatlist scrolls to top.
exemple:`
const deleteItemById = async entry => {
const filteredData = data.filter(item => {
return item.id != entry.id;
});
await setNotificationData(filteredData);
};`
<IconButton
onPress={() => {
const notificationToken = globalVariable.token;
const deleteNotificationAPI = async () => {
try {
await axios.delete(`${BASE_URL}${data.id}`,
{
headers: {
Authorization: notificationToken,
},
}
);
} catch (err) {
console.error(err);
}
deleteItemById(data);
};
deleteNotificationAPI();
}}
style={IconButton7a33adf1}
icon={'Foundation/trash'}
size={25}
color={theme.colors.trashCan}
/>
FlatList << This is the flat list that I have been using with renderItem function. it is working fine, deleting the items, it is just scrolling to top after the filter, I believe this is happening because is rerendering the flatList.
<FlatList
listKey={'s8qdyDKI'}
data={data}
initialNumToRender={30}
windowSize={40}
key={data.length}
ListFooterComponent={<LoadNotifications />}
keyExtractor={item => item?.id || item?.uuid || item}
renderItem={({ item }) => (
<Notifications
data={item}
style={notificationStyles.item}
/>
)}
onEndReached={oneMoreNotificationPage}
onEndReachedThreshold={0.15}
contentContainerStyle={
notificationStyles.FlatList21f2035aContent
}
numColumns={1}
renderItem <<
function Notifications({ data }) {
return (
<>
<View
style={[notificationStyles.Viewcd452035,
]}
>
<View
style={[notificationStyles.Viewb8b059f4,]}
>
<View
style={[
notificationStyles.Viewb34b4333,]}
>
<Text
style={[
notificationStyles.Text812c3e6d,]}
ellipsizeMode={'tail'}
numberOfLines={1}
>
{data?.title}
</Text>
</View>
<View style={notificationStyles.Viewdebd3207}>
<View style={notificationStyles.View3821c683}>
<Text
style={[
notificationStyles.Text13ddebce,]}
numberOfLines={1}
ellipsizeMode={'tail'}
>
{data?.created_at}
</Text>
</View>
<View style={notificationStyles.Viewc2817b4e}>
<IconButton
onPress={() => {
const notificationToken =
globalVariable.token;
const deleteNotificationAPI = async () =>
{
try {
await axios.delete(
`${BASE_URL}${data?.id}`,
{
headers: {
Authorization:
notificationToken,
},
}
);
} catch (err) {
console.error(err);
}
deleteItemById(data);
console.log('after call');
};
deleteNotificationAPI();
}}
style=
{notificationStyles.IconButton7a33adf1}
icon={'Foundation/trash'}
size={25}
color={theme.colors.trashCan}
/>
</View>
</View>
</View>
</View>
</View>
)}
</>
);
}