React native liquid like animated pagination dots

Question

I am using the following module: react-native-app-intro-slider

I would like to realize the following effect in pagination:

const _renderPagination = (activeIndex) => {
    return (
      <View style={styles.paginationContainer}>
        <SafeAreaView>
          <View style={styles.paginationDots}>
            {slides.length > 1 &&
              slides.map((_, i) => (
                <TouchableOpacity
                  key={i}
                  style={[
                    styles.dot,
                    i === activeIndex
                      ? {backgroundColor: 'white'}
                      : {backgroundColor: 'rgba(0, 0, 0, .2)'},
                  ]}
                  onPress={() => slider.current?.goToSlide(i, true)}
                />
              ))}
          </View>
        </SafeAreaView>
      </View>
    );
  };

But I'm not able to find a way to imitate the following effect, can you give me some advice?

Answer 1

I know the post is old but if are willing to switch libraries, you can use react-native-pager-view together with react-native-animated-pagination-dots.

There's an example of the two used together in the repository for react-native-pager-view.