react-native-animated-dots

FlatList animated pagination dots with colour

Stats

StarsIssuesVersionUpdatedCreatedSize
react-native-animated-dots
000.0.4a year agoa year agoMinified + gzip package size for react-native-animated-dots in KB

Readme

Credit

Forked off of the great work done @ https://github.com/weahforsage/react-native-animated-pagination-dots. Added colour options for personal use.

Animated Dots

Animated Dots Example

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

Installation

npm install react-native-animated-dots
yarn add react-native-animated-dots

Usage

import {ExpandingDot} from "react-native-animated-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
inActiveDotColor string
backgroundColor: '#347af0'
In active dot color
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
inActiveDotColor string
backgroundColor: '#347af0'
In 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)

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.

Contributing

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

License

MIT

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.