react-native-animated-pagination-dots/lib/module/dots/ExpandingDot.js

FlatList animated pagination dots

import React from 'react';
import { Animated, StyleSheet, useWindowDimensions, View } from 'react-native';

const ExpandingDot = _ref => {
  let {
    scrollX,
    data,
    dotStyle,
    containerStyle,
    inActiveDotOpacity,
    inActiveDotColor,
    expandingDotWidth,
    activeDotColor
  } = _ref;
  const {
    width
  } = useWindowDimensions();
  const defaultProps = {
    inActiveDotColor: inActiveDotColor || '#000',
    inActiveDotOpacity: inActiveDotOpacity || 0.5,
    expandingDotWidth: expandingDotWidth || 20,
    dotWidth: dotStyle.width || 10,
    activeDotColor: activeDotColor || '#347af0'
  };
  return /*#__PURE__*/React.createElement(View, {
    pointerEvents: 'none',
    style: [styles.containerStyle, containerStyle]
  }, data.map((_, index) => {
    const inputRange = [(index - 1) * width, index * width, (index + 1) * width];
    const colour = scrollX.interpolate({
      inputRange,
      outputRange: [defaultProps.inActiveDotColor, defaultProps.activeDotColor, defaultProps.inActiveDotColor],
      extrapolate: 'clamp'
    });
    const opacity = scrollX.interpolate({
      inputRange,
      outputRange: [defaultProps.inActiveDotOpacity, 1, defaultProps.inActiveDotOpacity],
      extrapolate: 'clamp'
    });
    const expand = scrollX.interpolate({
      inputRange,
      outputRange: [defaultProps.dotWidth, defaultProps.expandingDotWidth, defaultProps.dotWidth],
      extrapolate: 'clamp'
    });
    return /*#__PURE__*/React.createElement(Animated.View, {
      key: `dot-${index}`,
      style: [styles.dotStyle, dotStyle, {
        width: expand
      }, {
        opacity
      }, {
        backgroundColor: colour
      }]
    });
  }));
};

const styles = StyleSheet.create({
  containerStyle: {
    position: 'absolute',
    bottom: 20,
    flexDirection: 'row',
    alignSelf: 'center'
  },
  dotStyle: {
    width: 10,
    height: 10,
    borderRadius: 5,
    marginHorizontal: 5
  }
});
export default ExpandingDot;
//# sourceMappingURL=ExpandingDot.js.map