i am making a whatsapp clone in react native and having a problem regarding archiving the chats

i had maked the add chats functionallity in it and when i longpress the chat a navbar like whatsapp is appearing on the top that consists of many of functionallities in which one of them is archive chat when i archive the chat i am deleting the chat from the original chats array and moving it into an array of named arhievedChats and like of whatsapp i had maked a Button wrapping the View inside it is the text Archived and when i click that button i am navigating to other screen named Archived and there i am rendering the arhievedChats array using the Flatlist and just like the chat screen i want to make a functionallity on this screen also that when the user longPress the chat a navbar should appear on the top that consists of un-archiveChat functionallity but first i want to select the chat for that i have a selected property inside that arhievedChats array and when i longPress the chat i want to toggle that property to true and if the selected property is true a tick mark should appear on the chat but when i am longpressing the chat at that time the tick mark is not appearing but when i go back and add another chat and then archive it and come to the Arhchive screen again then the chat that i longpressed earlier is becoming selected

//Archived.js

import {
  StyleSheet,
  Text,
  FlatList,
  View,
  Animated,
  Image,
  TouchableOpacity,
} from "react-native";
import React, { useCallback, useEffect, useRef } from "react";
import Chat from "./Chat";
import { AntDesign, Ionicons } from "react-native-vector-icons";
import {
  ACTIVE_TAB_GREEN_COLOR,
  CHAT_BACKROUND_COLOR,
  CHAT_DATA_STATUS_COLOR,
  TAB_BACKGROUND_COLOR,
} from "./WhatsappMainScreen";
import { navbarAnimation } from "./RippleButton";

const Archived = ({ route }) => {
  const checkedAnimaton = new Animated.Value(0);
  const {archived,setarchived} = route.params;
  

 const makeTickAnmation = () => {
    Animated.timing(checkedAnimaton,{
      toValue:1,
      duration:500,
      useNativeDriver:true
    }).start()
 }

  const findArchiveItemsToSelect = (key) => {
    let newChats = [...archived];
    const SelectedArchiveChats = newChats.map(chat => {
      if(chat.key == key){
        return {
          ...chat,
          selected:true
        }
      }
      return chat;
    });
    setarchived(SelectedArchiveChats)
  }

  return (
    <>
      <View style={{ flex: 1, backgroundColor: CHAT_BACKROUND_COLOR }}>
        <View
          style={[
            styles.arhivedText,
            { borderBottomWidth: 1, borderBottomColor: TAB_BACKGROUND_COLOR },
          ]}
        >
          <Text style={{ color: CHAT_DATA_STATUS_COLOR, textAlign: "center" }}>
            These chats stay archived when new messages are received.
          </Text>
        </View>
        <FlatList
        
        data={archived}
        keyExtractor={item => item.key}
        ItemSeparatorComponent={() => {
          return (
            <View
              style={{ height: 1, backgroundColor: TAB_BACKGROUND_COLOR }}
            ></View>
          );
        }}
        renderItem={({item}) => {
          const ItemData = {
            ...item,
            LeftPlaceRenderThing: ({ handleOpenDpModel }) => {
              return (
                <>
                  <Animated.View
                    style={{
                      zIndex: 111,
                      transform: [{ scale: checkedAnimaton }],
                    }}
                    onLayout={item.selected ? () => makeTickAnmation(): () => {}}
                  >
                    {item.selected ? (
                      <Ionicons
                        name="checkmark-done-circle-sharp"
                        color={ACTIVE_TAB_GREEN_COLOR}
                        size={20}
                        style={{
                          fontSize: 20,
                          transform: [
                            { translateX: 40 },
                            { translateY: 15 },
                          ],
                        }}
                      />
                    ) : null}
                  </Animated.View>
                  <TouchableOpacity
                    onPress={() => handleOpenDpModel(item.photo, item.name)}
                  >
                    <View
                      style={{
                        justifyContent: "center",
                        alignItems: "center",
                      }}
                    >
                      <Image
                        source={
                          item.photo
                            ? { uri: item.photo }
                            : require("./Images/profile.png")
                        }
                        style={{
                          height: 55,
                          aspectRatio: 1,
                          borderRadius: 50,
                          marginLeft: item.selected ? -20 : 0,
                        }}
                        resizeMode="contain"
                      />
                    </View>
                  </TouchableOpacity>
                </>
              );
            },
            RightPlaceRenderThing:() => null,
            NotshowChatMakingDate: false,
            onLongPress:() => {
              findArchiveItemsToSelect(item.key);
              makeTickAnmation()
            }
          }
          return <Chat {...ItemData}/>
        }}
        />
      </View>
    </>
  );
};

export default Archived;

const styles = StyleSheet.create({
  arhivedText: {
    padding: 15,
  },
});

WhatsappNavbar.js

import {
  StyleSheet,
  Text,
  View,
  StatusBar,
  Animated,
  TextInput,
  Alert,
} from "react-native";
import React, { useCallback, useEffect, useRef, useState } from "react";
import Camera from "react-native-vector-icons/Feather";
import Search from "react-native-vector-icons/Fontisto";
import {
  ClosenavbarAnimation,
  RippleButton,
  navbarAnimation,
  showToast,
} from "./RippleButton";
import { AntDesign } from "@expo/vector-icons";
import { MaterialIcons } from "@expo/vector-icons";
import { FontAwesome5 } from "@expo/vector-icons";
import { Ionicons } from "react-native-vector-icons";
import SimpleLineIcons from "react-native-vector-icons/SimpleLineIcons";

import {
  TAB_BACKGROUND_COLOR,
  INACTIVE_TAB_WHITE_COLOR,
  TITLE_COLOR,
  CHAT_DATA_STATUS_COLOR,
  BADGE_BACKGROUND_COLOR,
} from "./WhatsappMainScreen";

const WhatsAppNavbar = ({
  selected,
  chats,
  setchats,
  opensearchBar,
  setopensearchBar,
  FileredChats,
  setFileredChats,
  archived,
  setarchived
}) => {
  const badgesData = [
    { badgeText: "Unread", badgeIcons: "mark-chat-unread", size: 22, key: 1 },
    { badgeText: "Photos", badgeIcons: "photo", size: 22, key: 2 },
    { badgeText: "Videos", badgeIcons: "videocam", size: 22, key: 3 },
    { badgeText: "Links", badgeIcons: "insert-link", size: 25, key: 4 },
    { badgeText: "GIFs", badgeIcons: "gif", size: 25, key: 5 },
    { badgeText: "Audio", badgeIcons: "audiotrack", size: 25, key: 6 },
    { badgeText: "Documents", badgeIcons: "contact-page", size: 20, key: 7 },
    { badgeText: "Polls", badgeIcons: "poll", size: 20, key: 8 },
  ];

  const selectedNavbarAnimation = useRef(new Animated.Value(0)).current;
  const searchNavbarAnimation = useRef(new Animated.Value(0)).current;

  const inputRef = useRef(null);

  const [value, setValue] = useState("");

  useEffect(() => {
    if (selected) {
      navbarAnimation(selectedNavbarAnimation);
    } else {
      ClosenavbarAnimation(selectedNavbarAnimation);
    }
  }, [selected]);

  useEffect(() => {
    if (opensearchBar) {
      navbarAnimation(searchNavbarAnimation);
    } else {
      ClosenavbarAnimation(searchNavbarAnimation);
    }
  }, [opensearchBar]);

  const handleOpenSearchBar = () => {
    setopensearchBar(!opensearchBar);
  };

  const searchNavbarInterpolation = searchNavbarAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [410, 0],
  });

  const searchNavbarStyles = {
    transform: [{ translateX: searchNavbarInterpolation }],
  };

  const handlePinChat = useCallback(() => {
    let newchats = [...chats];
    const selectedChats = newchats.map((chat) => {
      if (chat.selected) {
        return {
          ...chat,
          pinned: !chat.pinned,
        };
      }
      return chat;
    });
    setchats(selectedChats);
    showToast("Pinned chat");
  }, [setchats, chats]);

  const handleMuteChat = useCallback(() => {
    let newchats = [...chats];
    const selectedChats = newchats.map((chat) => {
      if (chat.selected) {
        return {
          ...chat,
          muted: !chat.muted,
        };
      }
      return chat;
    });
    setchats(selectedChats);
    showToast("Chat muted");
  }, [chats, setchats]);

  const hanldeArchieveChat = useCallback(() => {
    let newchats = [...chats];
    const archievedChats = newchats.filter((chat) => chat.selected);
    const unSelectChatsArchived = archievedChats.map((chat) => {
      if (chat.selected) {
        return { ...chat, selected: false};
      }
      return chat;
    });


    setarchived((prevArchived) => [...prevArchived,...unSelectChatsArchived]);

    const deletedChats = newchats.filter((chat) => {
      if (chat.selected) {
        return;
      }
      return chat;
    });
    setchats(deletedChats);
    showToast(
      `${unSelectChatsArchived.length} chat${
        unSelectChatsArchived.length > 1 ? "s" : ""
      } Archieved`
    );
  }, [chats, setchats, setFileredChats,setarchived]);

  const handleFilterChats = (vlue) => {
    setValue(vlue);

    if (vlue == "") {
      setchats(FileredChats);
    } else {
      const FilteredItems = chats.filter((chat) => {
        return chat.name.toLowerCase().includes(vlue.toLowerCase());
      });

      if (FilteredItems.length > 0) {
        setchats(FilteredItems);
      } else {
        setchats(FileredChats);
      }
    }
  };

  const selectedChats = chats.filter((chat) => {
    if (chat.selected) {
      return chat;
    }
  });

  const handleDeleteChat = useCallback(() => {
    let newchats = [...chats];
    const deletedChats = newchats.filter((chat) => {
      if (chat.selected) {
        return;
      }
      return chat;
    });

    Alert.alert(
      `Delete ${selectedChats.length > 1 ? selectedChats.length : "this"} Chat${
        selectedChats.length > 1 ? "s" : ""
      } ?`,
      "Messages will only be removed from this device and your devices on the newer versions of the Whatsapp",
      [
        {
          text: "Cancel",
          onPress: () => null,
          style: "cancel",
        },
        { text: "OK", onPress: () => setchats(deletedChats) },
      ],
      { cancelable: true }
    );

    showToast("Chat deleted");
  }, [chats, setchats]);

  return (
    <>
      <StatusBar backgroundColor={TAB_BACKGROUND_COLOR} />

      <Animated.View
        style={[
          styles.searchNavbarContainer,
          { backgroundColor: TAB_BACKGROUND_COLOR },
          searchNavbarStyles,
        ]}
      >
        <View style={[styles.input_and_arrow_container]}>
          <RippleButton onPress={() => setopensearchBar(false)}>
            <AntDesign
              name="arrowleft"
              size={26}
              color={CHAT_DATA_STATUS_COLOR}
            />
          </RippleButton>
          <TextInput
            style={styles.Searchinput}
            placeholder="Search..."
            placeholderTextColor={CHAT_DATA_STATUS_COLOR}
            value={value}
            onChangeText={handleFilterChats}
            ref={inputRef}
          />
        </View>
        <View style={[styles.badgesContainer]}>
          {badgesData.map((badge) => {
            return (
              <View
                key={badge.key}
                style={[
                  styles.badge,
                  { backgroundColor: BADGE_BACKGROUND_COLOR, height: 35 },
                ]}
              >
                <View style={styles.badgeIcon}>
                  <MaterialIcons
                    name={badge.badgeIcons}
                    size={badge.size}
                    color={CHAT_DATA_STATUS_COLOR}
                  />
                </View>
                <View style={styles.badgeText}>
                  <Text style={{ color: TITLE_COLOR }}>{badge.badgeText}</Text>
                </View>
              </View>
            );
          })}
        </View>
      </Animated.View>

      <Animated.View
        style={[
          styles.selectedChatNavbar,
          {
            backgroundColor: TAB_BACKGROUND_COLOR,
            transform: [{ scaleX: selectedNavbarAnimation }],
          },
        ]}
      >
        <View style={styles.chatsCountContainer}>
          <RippleButton
            onPress={() => ClosenavbarAnimation(selectedNavbarAnimation)}
          >
            <AntDesign name="arrowleft" size={24} color={TITLE_COLOR} />
          </RippleButton>
          <Text style={{ fontSize: 20, marginLeft: 15, color: TITLE_COLOR }}>
            {selectedChats.length}
          </Text>
        </View>
        <View
          style={[
            styles.iconContainer,
            { justifyContent: "center", alignItems: "center" },
          ]}
        >
          <RippleButton onPress={handlePinChat}>
            {/* <MaterialCommunityIcons name="pin-off" size={21} color={TITLE_COLOR} /> */}
            <AntDesign name="pushpin" size={21} color={TITLE_COLOR} />
          </RippleButton>
          <RippleButton onPress={handleDeleteChat}>
            <MaterialIcons name="delete" size={21} color={TITLE_COLOR} />
          </RippleButton>
          <RippleButton onPress={handleMuteChat}>
            <FontAwesome5 name="volume-mute" size={21} color={TITLE_COLOR} />
          </RippleButton>
          <RippleButton onPress={hanldeArchieveChat}>
            <Ionicons name="archive-outline" size={21} color={TITLE_COLOR} />
          </RippleButton>
          <RippleButton>
            <SimpleLineIcons
              name="options-vertical"
              color={TITLE_COLOR}
              size={18}
            />
          </RippleButton>
        </View>
      </Animated.View>

      <View
        style={[
          styles.navbarContainer,
          { backgroundColor: TAB_BACKGROUND_COLOR },
        ]}
      >
        <View style={styles.textContainer}>
          <Text
            style={[styles.whatsappText, { color: INACTIVE_TAB_WHITE_COLOR }]}
          >
            WhatsApp
          </Text>
        </View>
        <View style={styles.iconContainer}>
          <RippleButton>
            <Camera name="camera" color={INACTIVE_TAB_WHITE_COLOR} size={18} />
          </RippleButton>
          <RippleButton onPress={handleOpenSearchBar}>
            <Search name="search" color={INACTIVE_TAB_WHITE_COLOR} size={18} />
          </RippleButton>
          <RippleButton>
            <SimpleLineIcons
              name="options-vertical"
              color={INACTIVE_TAB_WHITE_COLOR}
              size={18}
            />
          </RippleButton>
        </View>
      </View>
    </>
  );
};

export default WhatsAppNavbar;

const styles = StyleSheet.create({
  navbarContainer: {
    paddingHorizontal: 10,
    paddingVertical: 15,
    justifyContent: "space-between",
    alignItems: "center",
    flexDirection: "row",
  },
  whatsappText: {
    fontSize: 20,
    fontWeight: "600",
    marginLeft: 8,
  },
  Searchinput: {
    padding: 10,
    flex: 1,
    paddingLeft: 10,
    borderWidth: 0,
    height: 50,
    fontSize: 17,
    marginLeft: 10,
    color: "white",
  },
  badgesContainer: {
    flex: 1,
    marginHorizontal: 14,
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 10,
  },
  searchNavbarContainer: {
    height: 210,
    width: "100%",
    position: "absolute",
    zIndex: 55555,
    justifyContent: "space-between",
    backgroundColor: "red",
  },
  input_and_arrow_container: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    padding: 5,
  },
  badge: {
    flexDirection: "row",
    width: "30%",
    justifyContent: "space-around",
    alignItems: "center",
    padding: 8,
    borderRadius: 20,
  },
  iconContainer: {
    flexDirection: "row",
    gap: 2,
  },
  selectedChatNavbar: {
    width: "100%",
    height: "8%",
    backgroundColor: "red",
    position: "absolute",
    zIndex: 2222,
    flexDirection: "row",
    justifyContent: "space-between",
    top: 0,
  },
  iconContainer: {
    flexDirection: "row",
    gap: 2,
  },
  chatsCountContainer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },
});