我必须为carousel创建分页点，如下所示：活动点应为渐变色，非活动点应为灰色here is active dot's design
当用户开始滑动时，当前活动点从白色转换为灰色。我在处理这部分时遇到了问题。design for dots when sliding starts
到目前为止，我所尝试的是：

const renderCarouselDots = () => {
return (
   <View style={styles.dotsView}>
    <FlatList
      style={{alignSelf: 'center'}}
      horizontal
      data={carouselData}
      renderItem={({item, index}) =>
        activeSlide === index ? (
          isSliderSwiping ? (
            <View style={[styles.carouselDot, {backgroundColor: "white"}]}></View>
          ) : (
            <GradientBackground style={styles.carouselDot} />
          )
        ) : (
          <View
            style={[styles.carouselDot, styles.inactiveCarouselDot]}></View>
        )
      }
    />
  </View>
);};

carousel的代码是：

<Carousel
        // onScroll={() => console.log("scroll start")}
        renderItem={renderCarouselItem}
        data={carouselData}
        sliderWidth={getScreenWidthHeight().width}
        itemWidth={getScreenWidthHeight().width}
        onBeforeSnapToItem={(i) => setIsSwiping(true)}
        onSnapToItem={(index) => {
          setActiveSlide(index);
          setIsSwiping(false);
          console.log(index);
        }}
        // onScrollBeginDrag={(e) => console.log(e)}
        // autoplay
      />
      {renderCarouselDots()}

我目前所取得的成就... dots when there is no sliding etc.和dots sometime after sliding starts
我知道如何在不同颜色之间切换动画。但我不确定如何知道用户何时开始滑动。我曾尝试使用onBeforeSnapToItem属性，以便在幻灯片上将点转换为白色视图，但这在滑动开始后触发。
我想知道如何实现这个动画之间的渐变到白色和灰色的点，以及何时调用这个动画。任何帮助将不胜感激！