react-native-rolling-bar/lib/commonjs/index.js

Rolling bar (banner) UI for React Native

"use strict";

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

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

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

var _useInterval = _interopRequireDefault(require("./util/useInterval"));

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const RollingBar = props => {
  const [opacity] = (0, _react.useState)(new _reactNative.Animated.Value(0));
  const [translateY] = (0, _react.useState)(new _reactNative.Animated.Value(10));
  const [visibleIndex, setVisibleIndex] = (0, _react.useState)(0);
  const {
    children,
    interval = 3000,
    customStyle,
    animationDuration = 600,
    delayBetween = 100,
    defaultStyle = false,
    forceRoll = false
  } = props;

  const childrenCount = _react.default.Children.count(children);

  const animate = (0, _react.useCallback)(() => {
    const defaultConfig = {
      duration: animationDuration / 2,
      useNativeDriver: true,
      isInteraction: false
    };

    if (childrenCount > 1 || forceRoll) {
      _reactNative.Animated.sequence([_reactNative.Animated.parallel([_reactNative.Animated.timing(translateY, {
        toValue: 20,
        ...defaultConfig,
        duration: 0
      }), _reactNative.Animated.timing(opacity, {
        toValue: 0,
        ...defaultConfig,
        duration: 0
      })]), _reactNative.Animated.parallel([_reactNative.Animated.timing(translateY, {
        toValue: 0,
        ...defaultConfig
      }), _reactNative.Animated.timing(opacity, {
        toValue: 1,
        ...defaultConfig
      })]), _reactNative.Animated.delay(interval), _reactNative.Animated.parallel([_reactNative.Animated.timing(translateY, {
        toValue: -10,
        ...defaultConfig
      }), _reactNative.Animated.timing(opacity, {
        toValue: 0,
        ...defaultConfig
      })])]).start();
    } else {
      _reactNative.Animated.parallel([_reactNative.Animated.timing(translateY, {
        toValue: 0,
        ...defaultConfig,
        duration: 0
      }), _reactNative.Animated.timing(opacity, {
        toValue: 1,
        ...defaultConfig,
        duration: 0
      })]).start();
    }
  }, [animationDuration, childrenCount]); // eslint-disable-line react-hooks/exhaustive-deps

  (0, _react.useEffect)(() => {
    animate();
  }, [animate]);
  (0, _useInterval.default)(() => {
    if (childrenCount > 1 || forceRoll) {
      setVisibleIndex((visibleIndex + 1) % childrenCount);
      animate();
    }
  }, interval + animationDuration + delayBetween);
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [defaultStyle ? styles.container : styles.containerMinimal, customStyle]
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: {
      opacity,
      transform: [{
        translateY
      }, {
        perspective: 1000
      }]
    }
  }, _react.default.Children.map(children, (child, idx) => {
    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      key: `${idx}`,
      style: visibleIndex !== idx && styles.hideRow
    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, child));
  })));
};

var _default = RollingBar;
exports.default = _default;

const styles = _reactNative.StyleSheet.create({
  container: {
    flex: 1,
    overflow: 'hidden',
    backgroundColor: '#eaeaea',
    borderColor: '#bbb',
    borderTopWidth: 1,
    borderBottomWidth: 1,
    justifyContent: 'center',
    paddingHorizontal: 16,
    paddingVertical: 8
  },
  containerMinimal: {
    flex: 1,
    overflow: 'hidden',
    justifyContent: 'center'
  },
  hideRow: {
    display: 'none'
  }
});
//# sourceMappingURL=index.js.map