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

Page Flipper

import React from 'react';
import Animated, { Extrapolate, interpolate, useAnimatedStyle } from 'react-native-reanimated';
import { Gradient } from '../Components/Gradient';
import { transformOrigin } from '../utils/utils';

const FrontShadow = _ref => {
  let {
    degrees,
    viewHeight,
    right
  } = _ref;
  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], Extrapolate.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], Extrapolate.CLAMP);
    return {
      transform: [...transformOrigin({
        x: -shadowWidth / 2,
        y: 0
      }, [{
        scaleX
      }])]
    };
  });
  return /*#__PURE__*/React.createElement(Animated.View, {
    style: [{
      zIndex: 5000,
      height: viewHeight,
      position: 'absolute'
    }, animatedStyle]
  }, /*#__PURE__*/React.createElement(Animated.View, {
    style: [{
      height: viewHeight,
      width: shadowWidth
    }, animatedStyle2]
  }, /*#__PURE__*/React.createElement(Gradient, {
    start: {
      x: 1,
      y: 0
    },
    end: {
      x: 0,
      y: 0
    },
    colors: colors,
    style: [{
      flex: 1
    }]
  })));
};

export default FrontShadow;
//# sourceMappingURL=FrontShadow.js.map