react-native-swiper wrapped in a Pressable not working properly on iOS

Question

I am using react-native-swiper to show images, and I want to wrap the entire swiper inside a Pressable , and since there's gonna be multiple of these, they're all nested inside a FlatList, this is what it looks like in code:

<FlatList
      data={locations}
      renderItem={(props) => <Location {...props} />}
      style={styles.flatList}
      scrollEventThrottle={16}
      refreshControl={refreshControl}
      ListEmptyComponent={ListEmptyComponent}
      contentInset={contentInset}
      onScroll={onScroll}
      contentContainerStyle={contentContainerStyle}
    />

the FlatList renders the Location component, which returns the following:

    <Pressable
      style={{
        position: "relative",
        width: IMAGE_SIZE,
        height: IMAGE_SIZE,
      }}
      onPress={() => console.log(id, " ,pressed")}
    >
      <Swiper
        style={styles.swiper}
        loop={false}
        renderPagination={renderPagination}
      >
        {media.map((image) => (
          <Image
            key={image.id}
            source={{ uri: image.url }}
            style={{
              width: IMAGE_SIZE,
              height: IMAGE_SIZE,
            }}
          />
        ))}
      </Swiper>
    </Pressable>

When I try to swipe on the images, it just keeps firing the Pressables onPress func and doesn't want to swipe to the next image. It works as intended on Android.

When I replace the Pressable with a normal View component, everything works fine.

Answer 1

In the meantime, I also added an title to the component which complicated things a bit, but I managed to get it working by using 2 different Pressable components. This unfortunately removes the ability to click on the component while the image is transitioning, but it works.