Liquid-like animated pagination dots

[flumiie]

Is there any way for me to add custom styling so the dots can be animated like this? The image was sourced from https://dribbble.com/shots/2429036-Page-Scrolling#shot-description

[summerkiflain]

1+, This is only good thing missing from this component.

[Angelk90]

@Jacse, @fralyx , @summerkiflain :

Are there any news? It would be interesting to do such a thing.

Customized version: https://snack.expo.io/Ir0sauyjD

[pke]

Repo seems dead :(

[rumfiske]

You can use https://github.com/weahforsage/react-native-animated-pagination-dots and then use the custom "DotComponent" but i cant seem to get it to work. This is my build.. Let me know if someone can finish so it work.

Problem: Doesn't animate

import { ExpandingDot } from "react-native-animated-pagination-dots";
import { Animated } from "react-native";

 const index = 0;
  const SLIDER_DATA = [
    {
      key: "1",
      backgroundColor: "#22242C",
      image: (
        <View style={tw`w-full flex items-center mt-auto -mb-4 -ml-28`}>
       
        </View>
      ),
      title: "Sugarfar Chat App",
      subtitle: "Chat hurtigt og nemt,  direkte fra din mobil",
    },
    {
      key: "2",
      backgroundColor: "#22242C",
      image: (
        <View style={tw`w-full flex items-center mt-auto -mb-4 -ml-28`}>
    
        </View>
      ),
      title: "Sugarfar Chat App",
      subtitle: "Chat hurtigt og nemt,  direkte fra din mobil",
    },
  ];
  const scrollX = React.useRef(new Animated.Value(0)).current;


    <Onboarding
      showNext={false}
      showSkip={false}
      ref={onboardingRef}
      bottomBarColor="#22242C"
      DotComponent={({ selected }: any) => {
        if (selected == true) {
          return (
            <View style={tw` w-24 h-24`}>
              <ExpandingDot
                data={[1, 2]}
                activeDotColor="#347af0"
                inActiveDotColor="#347af0"
                expandingDotWidth={30}
                scrollX={scrollX}
                key={index}
                inActiveDotOpacity={0.6}
                dotStyle={{
                  width: 10,
                  height: 10,
                  backgroundColor: "#347af0",
                  borderRadius: 5,
                  marginHorizontal: 5,
                }}
                containerStyle={{
                  top: 30,
                }}
              />
            </View>
          );
        }
      }}
      pages={[
        {
          backgroundColor: "#22242C",
          image: (
            <View style={tw`w-full flex items-center mt-auto -mb-4 -ml-28`}>
            {/* Put your image here */}
            </View>
          ),
          title: "Sugarfar Chat App",
          subtitle: "Chat hurtigt og nemt,  direkte fra din mobil",
        },
      ]}
    />