Skip to content

Latest commit

 

History

History
654 lines (621 loc) · 15.7 KB

README.md

File metadata and controls

654 lines (621 loc) · 15.7 KB
Raw

React Native Animated Pagination Dots

Animated Dots Example

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. Now uses react-native-svg for the LiquidLike

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
yarn add react-native-animated-pagination-dots

Usage

For the ViewPager, check their own repo

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,
    }}
/>

Button Navigation Example

import React from 'react';
import {
  StyleSheet,
  View,
  Dimensions,
  Animated,
  TouchableOpacity,
  Text,
  StatusBar,
} from 'react-native';
import { LiquidLike } from 'react-native-animated-pagination-dots';

const { width } = Dimensions.get('screen');

const data = [
  {
    image:
      'https://cdn.dribbble.com/users/3281732/screenshots/13661330/media/1d9d3cd01504fa3f5ae5016e5ec3a313.jpg?compress=1&resize=1200x1200',
    backgroundColor: '#7bcf6e',
  },
  {
    image:
      'https://cdn.dribbble.com/users/3281732/screenshots/11192830/media/7690704fa8f0566d572a085637dd1eee.jpg?compress=1&resize=1200x1200',
    backgroundColor: '#4654a7',
  },
  {
    image:
      'https://cdn.dribbble.com/users/3281732/screenshots/9165292/media/ccbfbce040e1941972dbc6a378c35e98.jpg?compress=1&resize=1200x1200',
    backgroundColor: '#7370cf',
  },
  {
    image:
      'https://cdn.dribbble.com/users/3281732/screenshots/11205211/media/44c854b0a6e381340fbefe276e03e8e4.jpg?compress=1&resize=1200x1200',
    backgroundColor: '#db4747',
  },
];

const imageW = width * 0.7;
const imageH = imageW * 1.4;

const ButtonNavigation = () => {
  const scrollX = React.useRef(new Animated.Value(0)).current;
  const keyExtractor = React.useCallback((_, index) => index.toString(), []);
  //Current item index of flatlist
  const [activeIndex, setActiveIndex] = React.useState(0);
  let flatListRef = React.useRef(null);
  const gotoNextPage = () => {
    if (activeIndex + 1 < data.length) {
      // @ts-ignore
      flatListRef.current.scrollToIndex({
        index: activeIndex + 1,
        animated: true,
      });
    }
  };
  const gotoPrevPage = () => {
    if (activeIndex !== 0) {
      // @ts-ignore
      flatListRef.current.scrollToIndex({
        index: activeIndex - 1,
        animated: true,
      });
    }
  };
  const skipToStart = () => {
    // @ts-ignore
    flatListRef.current.scrollToIndex({
      index: data.length - 1,
      animated: true,
    });
  };
  //Flatlist props that calculates current item index
  const onViewRef = React.useRef(({ viewableItems }: any) => {
    setActiveIndex(viewableItems[0].index);
  });
  const viewConfigRef = React.useRef({ viewAreaCoveragePercentThreshold: 50 });
  const renderItem = React.useCallback(({ item }) => {
    return (
      <View style={[styles.itemContainer]}>
        <Animated.Image
          style={{
            width: imageW,
            height: imageH,
            borderRadius: 20,
            resizeMode: 'cover',
          }}
          source={{ uri: item.image }}
        />
      </View>
    );
  }, []);

  return (
    <View style={[styles.container]}>
      <StatusBar hidden />
      <View style={[StyleSheet.absoluteFillObject]}>
        {data.map((item, index) => {
          const inputRange = [
            (index - 1) * width,
            index * width,
            (index + 1) * width,
          ];
          const colorFade = scrollX.interpolate({
            inputRange,
            outputRange: [0, 1, 0],
          });
          return (
            <Animated.View
              key={index}
              style={[
                StyleSheet.absoluteFillObject,
                { backgroundColor: item.backgroundColor, opacity: colorFade },
              ]}
            />
          );
        })}
      </View>
      <Animated.FlatList
        ref={flatListRef}
        onViewableItemsChanged={onViewRef.current}
        viewabilityConfig={viewConfigRef.current}
        data={data}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
        showsHorizontalScrollIndicator={false}
        pagingEnabled
        horizontal
        decelerationRate={'normal'}
        scrollEventThrottle={16}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { x: scrollX } } }],
          {
            useNativeDriver: false,
          }
        )}
      />
      <LiquidLike
        data={data}
        scrollX={scrollX}
        dotSize={18}
        dotSpacing={6}
        lineDistance={7}
        lineHeight={4}
        inActiveDotOpacity={0.2}
        activeDotColor={'#fff'}
        containerStyle={{ flex: 1 }}
      />
      <View style={[styles.buttonContainer]}>
        <TouchableOpacity
          style={[styles.button]}
          onPress={() => gotoPrevPage()}
        >
          <Text style={[styles.buttonText]}>Previous</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[styles.button]}
          onPress={() => gotoNextPage()}
        >
          <Text style={[styles.buttonText]}>Next</Text>
        </TouchableOpacity>
        <TouchableOpacity style={[styles.button]} onPress={() => skipToStart()}>
          <Text style={[styles.buttonText]}>Skip</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  itemContainer: {
    flex: 1,
    width,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonContainer: {
    flexDirection: 'row',
  },
  button: {
    margin: 20,
    fontWeight: '700',
  },
  buttonText: {
    color: '#fff',
  },
});

export default ButtonNavigation;

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