react-native-deck-swiper and react-native-image-slider-box IOS Bug

Question

I'm using an image slider component inside of a deck swiper component from the react-native-image-slider-box and react-native-deck-swiper. The images slide smoothly on Android but it is not smooth for iOS. The swiper component is interfering with the slider when I slide on IOS. If I take the slider out of the swiper it slides normally, but I need the slider within the swiper. I cannot fix this issue on my code or the swiper's source code. I get no error messages either. I even tried to use pointer events, but I still had no luck.

Code Snippet

  return (
    <SafeAreaView style={{ flexGrow: 1, flexShrink: 1, flexBasis: 0, flex: 1, backgroundColor: 'white' }}>


      <View style={{ zIndex: -1, flex: 1, backgroundColor: "purple" }}>

        <Swiper
          ref={swipeRef}
          backgroundColor='#ff00ff00'
          containerStyle={{ background: "transparent" }}
          cards={users}
          cardVerticalMargin={50}
          cardIndex={refreshCardIndex}
          horizontalSwipe={false}
          verticalSwipe={false}
          disableLeftSwipe={true}
          disableRightSwipe={true}
          disableTopSwipe={true}
          disableBottomSwipe={true}
          renderCard={(card) => card ? (
            <>
              <View style={{ height: 530 }}>

                <View style={{ flex: 1, justifyContent: "center", alignItems: "center", marginTop: -30, backgroundColor: 'red' }}>
                  <SliderBox doctColor={"#808080"} inactiveDotColor={"#cccccc"} sliderBoxHeight={450} parentWidth={372}
                    images={["https://static.wikia.nocookie.net/cartoons/images/e/ed/Profile_-_SpongeBob_SquarePants.png/revision/latest?cb=20230305115632", "https://static.wikia.nocookie.net/cartoons/images/4/41/Profile_-_Patrick_Star.png/revision/latest/scale-to-width-down/619?cb=20230111062602"]}
                    ImageComponentStyle={{ borderRadius: 15 }}
                  />


                </View>


              </View>
            </>
          ) : (
            <View style={tailwind("h-3/4 rounded-xl")}>
              <Text>no cards</Text>
            </View>
          )}>
        </Swiper>




      </View>


    </SafeAreaView>
  );

Notable Dependencies

    "react-native": "0.71",
    "react-native-deck-swiper": "^2.0.16",
    "react-native-image-slider-box": "megamaxs1234/react-native-image-slider-box",