react-native-animated-pagination-dots

Animated Dots

FlatList animated pagination dots. Some (maybe all) ideas and credits goes to Catalin Miron 👏.

This package does not use any dependencies but Animated API.

Few days ago I made a reddit post, and people requested to open source it.

For more Copy & Paste stuff, go check example folder

TODO

• iOS Device Test
• Worm Dot Indicator
• Liquid Like Indicator
• Next, Prev, Skip button implementation
• Landscape test
• Dots direction such as Vertical and Horizontal

Installation

npm install react-native-animated-pagination-dots

Usage

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

const SLIDER_DATA = [
  {
    key: '1',
    title: 'App showcase ✨',
    description:
      'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
  },
  {
    key: '2',
    title: 'Introduction screen 🎉',
    description:
      "Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. ",
  },
];
  const scrollX = React.useRef(new Animated.Value(0)).current;

<FlatList
    data={SLIDER_DATA}
    keyExtractor={keyExtractor}
    showsHorizontalScrollIndicator={false}
    onScroll={Animated.event(
      [{ nativeEvent: { contentOffset: { x: scrollX } } }],
      {
        useNativeDriver: false,
      }
    )}
    pagingEnabled
    horizontal
    decelerationRate={'normal'}
    scrollEventThrottle={16}
    renderItem={renderItem}
/>

<ExpandingDot
    data={SLIDER_DATA}
    expandingDotWidth={30}
    scrollX={scrollX}
    inActiveDotOpacity={0.6}
    dotStyle={{
        width: 10,
        height: 10,
        backgroundColor: '#347af0',
        borderRadius: 5,
        marginHorizontal: 5
    }}
    containerStyle={{
        top: 30,
    }}
/>

Props

Expanding Dot

Name	Type	Default	Description
inActiveDotOpacity	number	0.5	In active dot opacity
expandingDotWidth	number	20	Active dot width
data	Array<Object>	required	Array which is used for flatlist iteration
scrollX	Animated.Value	required	Gestures, like panning or scrolling, and other events can map directly to animated values using Animated.event(). For example, when working with horizontal scrolling gestures, you would do the following in order to map event.nativeEvent.contentOffset.x to scrollX (an Animated.Value)
dotStyle	ViewStyle	width: 10, height: 10, backgroundColor: '#347af0', borderRadius: 5, marginHorizontal: 5	Basic styling for each dot.
containerStyle	ViewStyle	position: "absolute", bottom: 20, flexDirection: "row",	Basic styling for dots container.

Scaling Dot

Name	Type	Default	Description
activeDotScale	number	1.4	Active dot scale number
inActiveDotOpacity	number	0.5	In active dot opacity
data	Array<Object>	required	Array which is used for flatlist iteration
scrollX	Animated.Value	required	Gestures, like panning or scrolling, and other events can map directly to animated values using Animated.event(). For example, when working with horizontal scrolling gestures, you would do the following in order to map event.nativeEvent.contentOffset.x to scrollX (an Animated.Value)
dotStyle	ViewStyle	width: 10, height: 10, backgroundColor: '#347af0', borderRadius: 5, marginHorizontal: 5	Basic styling for each dot.
containerStyle	ViewStyle	position: "absolute", bottom: 20, flexDirection: "row",	Basic styling for dots container.

Sliding Dot

Name	Type	Default	Description
dotSize	number	12	Each dot size !IMPORTANT Do not adjust dot size through dotStyle, otherwise it'll misbehave
marginHorizontal	number	3	Margin between dots !IMPORTANT Do not adjust dot margin through dotStyle, otherwise it'll misbehave
data	Array<Object>	required	Array which is used for flatlist iteration
scrollX	Animated.Value	required	Gestures, like panning or scrolling, and other events can map directly to animated values using Animated.event(). For example, when working with horizontal scrolling gestures, you would do the following in order to map event.nativeEvent.contentOffset.x to scrollX (an Animated.Value)
dotStyle	ViewStyle	backgroundColor: '#347af0', opacity: 0.4,	Basic styling for each dot.
containerStyle	ViewStyle	position: "absolute", bottom: 30, flexDirection: "row", alignSelf: "center"	Basic styling for dots container.
slidingIndicatorStyle	ViewStyle	backgroundColor: '#347af0', zIndex: 99, alignItems: 'center', justifyContent: 'center', alignSelf: 'center'	Basic styling for Sliding indicator dot.

Sliding Border

Name	Type	Default	Description
dotSize	number	24	Each dot size !IMPORTANT Do not adjust dot size through dotStyle, otherwise it'll misbehave
borderPadding	number	-5	Padding between dot and border. Should be good between -5 and 3, test it out.
data	Array<Object>	required	Array which is used for flatlist iteration
scrollX	Animated.Value	required	Gestures, like panning or scrolling, and other events can map directly to animated values using Animated.event(). For example, when working with horizontal scrolling gestures, you would do the following in order to map event.nativeEvent.contentOffset.x to scrollX (an Animated.Value)
dotStyle	ViewStyle	backgroundColor: '#347af0'	Basic styling for each dot.
containerStyle	ViewStyle	position: "absolute", bottom: 20, flexDirection: "row", alignSelf: "center"	Basic styling for dots container.
slidingIndicatorStyle	ViewStyle	borderWidth: 1, borderColor: '#347af0', alignItems: 'center', justifyContent: 'center', alignSelf: 'center'	Basic styling for sliding bordered dot style.

Liquid Like

Name	Type	Default	Description
dotSize	number	12	Each dot size
dotSpacing	number	3	Margin between dots
inActiveDotOpacity	number	0.5	In active dot opacity
inActiveDotColor	string	#000	In active dot color
activeDotColor	string	#347af0	Active dot color
data	Array<Object>	required	Array which is used for flatlist iteration
scrollX	Animated.Value	required	Gestures, like panning or scrolling, and other events can map directly to animated values using Animated.event(). For example, when working with horizontal scrolling gestures, you would do the following in order to map event.nativeEvent.contentOffset.x to scrollX (an Animated.Value)
lineHeight	number	4	Line height for sliding dot
lineDistance	number	8	Line travel distance between dots
containerStyle	ViewStyle	flexDirection: "row"	Basic styling for dots container.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT