react-native-really-awesome-button/lib/module/Placeholder.js

React Native Button UI component that renders an 60fps animated set of progress enabled 3D performant buttons.

import React, { useRef, useState, useEffect } from 'react';
import { View, Animated } from 'react-native';
import { animateLoop } from './helpers';
import { styles } from './styles';
const Placeholder = _ref => {
  let {
    animated,
    style
  } = _ref;
  const animating = useRef(false);
  const [width, setWidth] = useState(0);
  const animatedValue = useRef(new Animated.Value(0)).current;
  useEffect(() => {
    if (width > 0 && animating.current === false && animated === true) {
      animating.current = true;
      animateLoop({
        variable: animatedValue,
        toValue: 1
      });
    }
  }, [width]);
  return /*#__PURE__*/React.createElement(View, {
    style: [styles.container__placeholder, ...style],
    onLayout: event => {
      setWidth(event.nativeEvent.layout.width);
    }
  }, animated === true && /*#__PURE__*/React.createElement(Animated.View, {
    testID: "aws-btn-content-placeholder",
    style: [...style, styles.container__placeholder__bar, {
      transform: [{
        translateX: animatedValue.interpolate({
          inputRange: [0, 0.2, 0.5, 0.7, 1],
          outputRange: [width * -1, width * -1, width, width, width * -1]
        })
      }]
    }]
  }));
};
export default Placeholder;
//# sourceMappingURL=Placeholder.js.map