How to prevent scroll to top after deleting an item or filtering data flatlist

Viewed 22

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>
    )}
  </>
);

}

0 Answers
Related