unable to find componentwillunmountafterInteraction using react native deck swiper

Question

I have been working with react native deckSwiper. however i am unable to unmount it from screen as it gives the following error "ReferenceError: Can't find variable componentWillUnmountAfterInteractions" ,with the below error stack This error is located at:

 in Swiper (created by Card)
    in Card (created by Home)
    in RCTView (created by View)
    in View (created by Home)
    in Home (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)

Below is My code

import { View, Text, Image, StyleSheet, Pressable } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import Swiper from "react-native-deck-swiper";
import { useEffect, useRef, useState } from "react";
import { db } from "../firebase";
import { getDocs, collection, onSnapshot } from "firebase/firestore";

export default function Card() {
  const cardRef = useRef();

  const userref = collection(db, "users");
  const [profiles, setprofiles] = useState([]);

  useEffect(() => {
    getDocs(userref).then((result) => {
      for (let item of result.docs) {
        setprofiles((p) => [...p, item.data()]);
      }
    });
  }, []);
  return (
    <>
      <Swiper
        ref={cardRef}
        cards={profiles}
        onSwipedLeft={() => {
          setcounter((p) => ++p);
        }}
        onSwipedRight={() => {
          setcounter((p) => ++p);
        }}
        stackSize={2}
        cardIndex={0}
        containerStyle={{
          backgroundColor: "transparent",
        }}
        verticalSwipe={false}
        renderCard={(card) => {
          return card ? (
            <View style={styles.outerContainer}>
              <View style={styles.innerContainer}>
                <View style={styles.imgContainer}>
                  <Image
                    source={{
                      uri: card.url,
                    }}
                    style={styles.img}
                  />
                </View>
                <View style={styles.lowermodal}>
                  <View style={styles.upperText}>
                    <Text style={{ fontSize: 30, fontWeight: "bold" }}>
                      {card.name}
                    </Text>
                    <Text style={{ fontSize: 20, fontWeight: "bold" }}>
                      {card.occupation}
                    </Text>
                  </View>
                  <View style={styles.lowerText}>
                    <Text style={{ fontSize: 23, fontWeight: "bold" }}>48</Text>
                  </View>
                </View>
              </View>
            </View>
          ) : (
            <View style={styles.outerContainer}>
              <View
                style={[styles.innerContainer, { backgroundColor: "grey" }]}
              >
                <Text style={{ fontSize: 40 }}>No Profiles</Text>
              </View>
            </View>
          );
        }}
      />

Any Help will be Appreciated
.PS The DeckSwiper is a 3rd party Package

Answer 1

There's a bug in version 2.0.10, a PR was made a few days ago to address it. I downgraded to 2.0.9 for the time being.

Edit: 2.0.11 is out, it addresses this issue, among others.