title: how to make custom dots for react-native-carousel
body: <p>I have to create pagination dots for a carousel as follows:
  The active dot should be a gradient color, inactive dots to be a grey color
  <a href="https://i.stack.imgur.com/NuieL.png" rel="nofollow noreferrer">here is active dot's design</a></p>
  <p>when user starts sliding, the current active dot transitions from a white to grey color. I am having problems working on this part. <a href="https://i.stack.imgur.com/jCnCT.png" rel="nofollow noreferrer">design for dots when sliding starts</a></p>
  <p>what I have tried so far is:</p>
  <pre><code>const renderCarouselDots = () =&gt; {
  return (
     &lt;View style={styles.dotsView}&gt;
      &lt;FlatList
        style={{alignSelf: 'center'}}
        horizontal
        data={carouselData}
        renderItem={({item, index}) =&gt;
          activeSlide === index ? (
            isSliderSwiping ? (
              &lt;View style={[styles.carouselDot, {backgroundColor: &quot;white&quot;}]}&gt;&lt;/View&gt;
            ) : (
              &lt;GradientBackground style={styles.carouselDot} /&gt;
            )
          ) : (
            &lt;View
              style={[styles.carouselDot, styles.inactiveCarouselDot]}&gt;&lt;/View&gt;
          )
        }
      /&gt;
    &lt;/View&gt;
  );};
  </code></pre>
  <p>and the code for carousel is:</p>
  <pre><code> &lt;Carousel
          // onScroll={() =&gt; console.log(&quot;scroll start&quot;)}
          renderItem={renderCarouselItem}
          data={carouselData}
          sliderWidth={getScreenWidthHeight().width}
          itemWidth={getScreenWidthHeight().width}
          onBeforeSnapToItem={(i) =&gt; setIsSwiping(true)}
          onSnapToItem={(index) =&gt; {
            setActiveSlide(index);
            setIsSwiping(false);
            console.log(index);
          }}
          // onScrollBeginDrag={(e) =&gt; console.log(e)}
          // autoplay
        /&gt;
        {renderCarouselDots()}
  </code></pre>
  <p>What I've achieved so far...
  <a href="https://i.stack.imgur.com/2uhaW.png" rel="nofollow noreferrer">dots when there is no sliding etc.</a> and
  <a href="https://i.stack.imgur.com/NM3Ex.jpg" rel="nofollow noreferrer">dots sometime after sliding starts</a></p>
  <p>I know how to animate between colors. But I am unsure how to know when the user has started swiping, I have tried using the <strong>onBeforeSnapToItem</strong> property, so that I could turn the dot into a white view on slide, but this triggers way after sliding starts.</p>
  <p>I'd like to know how to achieve this animation between gradient to white and grey dot, and when to call this animation. Any help would be much appreciated!</p>