react-native-inner-shadow
Version:
react native inner shadows with linear gradient design UI
55 lines (54 loc) • 2.97 kB
JavaScript
;
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