react-native-reanimated-player/lib/module/components/ripple.js

A react-native video player that interacts like Youtube player, built upon Reanimted v2 & react-native-gesture-handle

import React, { useImperativeHandle, useState } from 'react';
import { View } from 'react-native';
import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';

const _Ripple = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  let {
    children,
    containerStyle,
    duration = 600,
    backgroundColor = 'rgba(255,255,255,.3)',
    onAnimationEnd,
    overflow,
    style
  } = _ref;
  const scale = useSharedValue(0);
  const centerX = useSharedValue(0);
  const centerY = useSharedValue(0);
  const isFinished = useSharedValue(false);
  const rippleOpacity = useSharedValue(1);
  const [radius, setRadius] = useState(-1);
  const rStyle = useAnimatedStyle(() => {
    const translateX = centerX.value - radius;
    const translateY = centerY.value - radius;
    return {
      opacity: rippleOpacity.value,
      transform: [{
        translateX
      }, {
        translateY
      }, {
        scale: scale.value
      }]
    };
  }, [radius]);
  useImperativeHandle(ref, () => ({
    onPress: _ref2 => {
      'worklet';

      let {
        x,
        y
      } = _ref2;
      centerX.value = x;
      centerY.value = y;
      rippleOpacity.value = 1;
      scale.value = 0;
      scale.value = withTiming(1, {
        duration
      }, finised => {
        if (finised) {
          isFinished.value = true;
          scale.value = withTiming(0, {
            duration: 0
          });

          if (onAnimationEnd) {
            runOnJS(onAnimationEnd)();
          }
        }
      });
    }
  }));
  return /*#__PURE__*/React.createElement(View, {
    onLayout: _ref3 => {
      let {
        nativeEvent: {
          layout: {
            width,
            height
          }
        }
      } = _ref3;
      setRadius(Math.sqrt(width ** 2 + height ** 2));
    },
    style: [style],
    pointerEvents: "none"
  }, radius > -1 && /*#__PURE__*/React.createElement(Animated.View, {
    style: [style, containerStyle, {
      overflow: !overflow ? 'hidden' : 'visible'
    }]
  }, children, /*#__PURE__*/React.createElement(Animated.View, {
    style: [{
      backgroundColor,
      position: 'absolute',
      top: 0,
      left: 0,
      width: radius * 2,
      height: radius * 2,
      borderRadius: radius,
      zIndex: 1121
    }, rStyle]
  })));
});

export const Ripple = /*#__PURE__*/React.memo(_Ripple);
//# sourceMappingURL=ripple.js.map