How to reconcile competing gestures (swipe vs tap) inside TikTok style slider?

[TowhidKashem]

Hi friends,

I am hoping someone knows the solution to this issue cause nothing I tried worked so far. I am building a fullscreen slider using a flashlist with width and height 100% (this happens with other list components too, for example I tried flatlist and legendlist as well). The user can swipe this slider to go from item to item and when they find something they like, they can tap the item to go to another screen. So this works pretty much like the TikTok video feed, except it also functions as a nav button at the same time when pressed.

Because of this dual purpose I am running into responsiveness issues. The app waits until a flashlist screen's animation is fully into view and completed before it responds to the tap gesture. And this doesn't feel responsive AT ALL. In fact most of the time I need to tap twice for the tap gesture to take me to the new screen.

I think tiktok solves this by making the slide animation very quick. So by the time the user presses the item the animation is fully completed and the tap can take place uninterrupted.

But no matter what values I try for props like decelerationRate to speed the animation up, the speed maxes out to a rate thats still way too slow compared to tik tok's, I don't know why but there is a annoying limitation here.

Does anyone know how I can either:
1). get the speed of the flashlist swiper to be extremely fast (like tiktok feed's speed)?
or
2). get the tap gesture to be triggered as soon as the tap takes place even if the swiper's animation is in transit?

Code:

  const renderItem = ({
    item: botId,
    index
  }: {
    item: Bot['id'];
    index: number;
  }): React.ReactElement => {
    return (
      <Slide
        key={botId}
        index={index}
        bot={bots[botId]}
        userSettings={userSettings}
        handleToggleAudio={handleToggleAudio}
        handleShare={handleShare}
        useLikesProps={useLikesProps}
        navigation={navigation}
      />
    );
  };


      <FlashList<Bot['id']>
        keyExtractor={keyExtractor}
        data={botIds}
        renderItem={renderItem}
        ListFooterComponent={renderFooter}
        onEndReached={handleLoadMore}
        onEndReachedThreshold={0.33}
        onMomentumScrollBegin={hapticSelection}
        onScroll={handleScroll}
        scrollEventThrottle={16}
        snapToInterval={WINDOW_HEIGHT}
        snapToAlignment="start"
        decelerationRate={0}
        contentInsetAdjustmentBehavior="never"
        emptyTitle="No bots available"
        emptyIcon="memorychip"
        refreshControl={null}
        isError={isError}
        isLoading={isLoading}
        bounces={false}
        disableIntervalMomentum // prevent multiple slides from being scrolled past at once when swiping quickly
        pagingEnabled
      />
      
The `Slide` component looks like:

      <Pressable // NOTE: I tried using RectButton from `react-native-gesture-handler` here as well and no luck...
        onPress={() => navigation.navigate('Chat', { botId: bot.id })}
        style={{
          width: WINDOW_WIDTH,
          height: WINDOW_HEIGHT
        }}
      >
        <Intro
          style={{
            position: 'absolute',
            width: '100%',
            bottom: '25%',
            paddingVertical: 10,
            paddingLeft: 20,
            paddingRight: 75,
            borderStyle: 'solid',
            borderTopWidth: StyleSheet.hairlineWidth,
            borderBottomWidth: StyleSheet.hairlineWidth,
            borderColor: 'rgba(255,255,255,0.8)',
            zIndex: 1
          }}
        >
          <Heading type="h4" stripped style={{ zIndex: 2 }}>
            {bot.intro}
          </Heading>

          <BlurView
            tint="prominent"
            intensity={100}
            style={StyleSheet.absoluteFill}
          />
        </Intro>

        <Image
          source={imageUrl(
            bot.images[0],
            SCREEN_WIDTH,
            AspectRatio.Portrait,
            true
          )}
          style={StyleSheet.absoluteFill}
          transparent
        />

        <BlurredEdge direction="bottom" />
      </Pressable>
      

Many thanks!