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

Page Flipper

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react';
import Animated, { interpolate, useAnimatedStyle } from 'react-native-reanimated';
import { Gradient } from '../Components/Gradient';
const shadowColors = ['rgba(0,0,0,0.3)', 'rgba(0,0,0,0.1)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)'];

const BookSpine2 = _ref => {
  let {
    right,
    degrees // containerSize,

  } = _ref;
  const style = useAnimatedStyle(() => {
    const opacity = interpolate(Math.abs(degrees.value), [0, 150, 180], [0, 0, 0.65]);
    return {
      opacity
    };
  });
  const position1 = right ? {
    start: {
      x: 1,
      y: 0
    },
    end: {
      x: 0,
      y: 0
    }
  } : {
    start: {
      x: 0,
      y: 0
    },
    end: {
      x: 1,
      y: 0
    }
  };
  const position2 = !right ? {
    start: {
      x: 1,
      y: 0
    },
    end: {
      x: 0,
      y: 0
    }
  } : {
    start: {
      x: 0,
      y: 0
    },
    end: {
      x: 1,
      y: 0
    }
  };
  return /*#__PURE__*/React.createElement(Animated.View, {
    pointerEvents: "none",
    style: [{
      position: 'absolute',
      height: '100%',
      width: '100%',
      zIndex: 10000000,
      flexDirection: 'row'
    }, style]
  }, /*#__PURE__*/React.createElement(Gradient, _extends({}, position1, {
    colors: shadowColors,
    style: {
      width: '100%',
      height: '100%'
    }
  })), /*#__PURE__*/React.createElement(Gradient, _extends({}, position2, {
    colors: shadowColors,
    style: [{
      width: '100%',
      height: '100%',
      position: 'absolute'
    }, right ? {
      left: '100%'
    } : {
      right: '100%'
    }]
  })));
};

export { BookSpine2 };
//# sourceMappingURL=BookSpine2.js.map