react-native-mobile-page-flipper/lib/module/BookPage/FrontShadow.js

Mobile Page Flipper

"use strict";

import React from 'react';
import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
import { Gradient } from '../Components/Gradient';
import { transformOrigin } from '../utils/utils';
import { jsx as _jsx } from "react/jsx-runtime";
const FrontShadow = ({
  degrees,
  viewHeight,
  right
}) => {
  const colors = ['rgba(0,0,0,0.0)', 'rgba(0,0,0,0.2)', 'rgba(0,0,0,0.3)', 'rgba(0,0,0,0.6)'];
  const shadowWidth = 40;
  const animatedStyle = useAnimatedStyle(() => {
    const opacity = interpolate(degrees.value, [-180, -100, 0, 100, 180], [0, 0.7, 1, 0.7, 0], Extrapolation.CLAMP);
    const fix = right ? {
      right: -shadowWidth
    } : {
      left: -shadowWidth
    };
    return {
      opacity,
      width: shadowWidth,
      ...fix,
      transform: [{
        rotateY: !right ? '180deg' : '0deg'
      }]
    };
  });
  const animatedStyle2 = useAnimatedStyle(() => {
    /*const scaleX = interpolate(
        degrees.value,
        [-150, 0, 150],
        [6, 1, 6],
        Extrapolation.CLAMP
    );*/

    return {
      transform: [
      // ...transformOrigin({ x: -shadowWidth / 2, y: 0 }, [{ scaleX }]),
      ...transformOrigin({
        x: -shadowWidth / 2,
        y: 0
      })]
    };
  });
  return /*#__PURE__*/_jsx(Animated.View, {
    style: [{
      zIndex: 5000,
      height: viewHeight,
      position: 'absolute'
    }, animatedStyle],
    children: /*#__PURE__*/_jsx(Animated.View, {
      style: [{
        height: viewHeight,
        width: shadowWidth
      }, animatedStyle2],
      children: /*#__PURE__*/_jsx(Gradient, {
        start: {
          x: 1,
          y: 0
        },
        end: {
          x: 0,
          y: 0
        },
        colors: colors,
        style: [{
          flex: 1
        }]
      })
    })
  });
};
export default FrontShadow;
//# sourceMappingURL=FrontShadow.js.map