react-native-animated-pagination-dots/lib/commonjs/dots/ScalingDot.js

FlatList animated pagination dots

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _reactNative = require("react-native");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const ScalingDot = _ref => {
  let {
    scrollX,
    data,
    dotStyle,
    containerStyle,
    inActiveDotOpacity,
    inActiveDotColor,
    activeDotScale,
    activeDotColor
  } = _ref;
  const {
    width
  } = (0, _reactNative.useWindowDimensions)();
  const defaultProps = {
    inActiveDotColor: inActiveDotColor || '#347af0',
    activeDotColor: activeDotColor || '#347af0',
    animationType: 'scale',
    inActiveDotOpacity: inActiveDotOpacity || 0.5,
    activeDotScale: activeDotScale || 1.4
  };
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    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 scale = scrollX.interpolate({
      inputRange: inputRange,
      outputRange: [1, defaultProps.activeDotScale, 1],
      extrapolate: 'clamp'
    });
    return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
      key: `dot-${index}`,
      style: [styles.dotStyle, {
        opacity
      }, {
        transform: [{
          scale
        }]
      }, dotStyle, {
        backgroundColor: colour
      }]
    });
  }));
};

const styles = _reactNative.StyleSheet.create({
  containerStyle: {
    position: 'absolute',
    bottom: 20,
    flexDirection: 'row',
    alignSelf: 'center'
  },
  dotStyle: {
    width: 10,
    height: 10,
    borderRadius: 5,
    marginHorizontal: 5
  }
});

var _default = ScalingDot;
exports.default = _default;
//# sourceMappingURL=ScalingDot.js.map