I am writing a tinder like application using react-native-deck-swiper. When clicking on the cards, I want the card to go into a full screen view that is scrollable in vertical direction. To achieve this behavior, my card component gets a variable “visible” and displays either the normal card or its full screen version. Unfortunately, when displaying the full screen version, one can still swipe “through the component”. This behavior occurs independently of whether or not I am using a scrollview for the full screen version of the card.
I was unable to come up with a solution so far (or find duplicates on this platform). All help is greatly appreciated.

This is the gist of my card component:

      {visible ? (
        <ThemedView style={styles.card}>
          <ProgressBar total={profile.images.length} current={currentIndex} />
          <TouchableOpacity
            ref={touchableOpacityRef}
            style={styles.imageContainer}
            onPress={handlePress}
          >
            <Image source={{ uri: profile.images[currentIndex] }} style={styles.reactLogo} />
          </TouchableOpacity>
    
        </ThemedView>
      ) : (
        <Modal
        
        >
          <ScrollView pointerEvents="box-none">
          <TouchableOpacity activeOpacity={1}>
        <ThemedView style={styles.cardFullScreen}>
          <ProgressBar total={profile.images.length} current={currentIndex} />
          <TouchableOpacity
            ref={touchableOpacityRef}
            style={styles.imageContainer}
            onPress={handlePress}
          >
            <Image source={{ uri: profile.images[currentIndex] }} style={styles.reactLogo} />
          </TouchableOpacity>


        </ThemedView>
        </TouchableOpacity>
        </ScrollView>
      </Modal>
      )}

And this is how I use the card component.

        <Swiper
          cards={items}
          renderCard={(profile, index) => (
            <Card
              key={profile.id}
              profile={profile}
              visible={profile.selected}
              setVisible={() => handleCardClick(index)}
            />
          )}
          onSwiped={(cardIndex) => {
            console.log(cardIndex);
          }}
          onSwipedAll={() => {
            console.log("All cards swiped");
          }}
          infinite={true}
          onSwipedLeft={handleLeftSwipe}
          onSwipedRight={handleRightSwipe}
          cardIndex={0}
          backgroundColor={backgroundColor}
          stackSize={3}
          horizontalThreshold={Dimensions.get('screen').width / 4}
          disableBottomSwipe
          disableTopSwipe
          onTapCard={(index) => handleCardClick(index)}
        />

I already looked at this problem: Swipeable React-native-modal with nested ScrollView and many others but could not find a solution.

In case I left out any important details, please let me know.