UNPKG

react-native-inner-shadow

Version:

react native inner shadows with linear gradient design UI

55 lines (54 loc) 2.97 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.useAnimatedOffset = useAnimatedOffset; var _reactNativeReanimated = require("react-native-reanimated"); var _constants = require("../constants.js"); function useAnimatedOffset(props) { const depth = (0, _reactNativeReanimated.useSharedValue)(_constants.INITIAL_DEPTH); const inset = (0, _reactNativeReanimated.useDerivedValue)(() => depth.value <= 0); const blurRadius = (0, _reactNativeReanimated.useDerivedValue)(() => (0, _reactNativeReanimated.interpolate)(depth.value, [-_constants.INITIAL_DEPTH, 0, _constants.INITIAL_DEPTH], [props.blurRadius * props.damping, 0, props.blurRadius])); const onPressIn = event => { depth.value = (0, _reactNativeReanimated.withTiming)(-_constants.INITIAL_DEPTH, { duration: props.duration }); props?.onPressIn?.(event); }; const onPressOut = event => { depth.value = (0, _reactNativeReanimated.withTiming)(_constants.INITIAL_DEPTH, { duration: props.duration }); props?.onPressOut?.(event); }; const offset = { dx: (0, _reactNativeReanimated.useDerivedValue)(() => (0, _reactNativeReanimated.interpolate)(depth.value, [-_constants.INITIAL_DEPTH, 0, _constants.INITIAL_DEPTH], [props.offset.width * props.damping, 0, props.offset.width])), dy: (0, _reactNativeReanimated.useDerivedValue)(() => (0, _reactNativeReanimated.interpolate)(depth.value, [-_constants.INITIAL_DEPTH, 0, _constants.INITIAL_DEPTH], [props.offset.height * props.damping, 0, props.offset.height])) }; const reflectedLightOffset = { dx: (0, _reactNativeReanimated.useDerivedValue)(() => (0, _reactNativeReanimated.interpolate)(depth.value, [-_constants.INITIAL_DEPTH, 0, _constants.INITIAL_DEPTH], [-props.reflectedLightOffset.width * props.damping, 0, props.reflectedLightOffset.width])), dy: (0, _reactNativeReanimated.useDerivedValue)(() => (0, _reactNativeReanimated.interpolate)(depth.value, [-_constants.INITIAL_DEPTH, 0, _constants.INITIAL_DEPTH], [-props.reflectedLightOffset.height * props.damping, 0, props.reflectedLightOffset.height])) }; const translateX = (0, _reactNativeReanimated.useDerivedValue)(() => (0, _reactNativeReanimated.interpolate)(depth.value, [-_constants.INITIAL_DEPTH, _constants.INITIAL_DEPTH], [-props.offset.width * 0.5, 0])); const translateY = (0, _reactNativeReanimated.useDerivedValue)(() => (0, _reactNativeReanimated.interpolate)(depth.value, [-_constants.INITIAL_DEPTH, _constants.INITIAL_DEPTH], [-props.offset.height * 0.5, 0])); const PressedAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => { return { transform: [{ translateX: translateX.value }, { translateY: translateY.value }] }; }); return { onPressIn, onPressOut, depth, offset, reflectedLightOffset, inset, blurRadius, PressedAnimatedStyle }; } //# sourceMappingURL=useAnimatedOffset.js.map