react-native-animated-dots
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.4 • Public • Published

    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

    Install

    npm i react-native-animated-dots

    DownloadsWeekly Downloads

    10

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    24.9 kB

    Total Files

    9

    Last publish

    Collaborators

    • harin329