react-native-inner-shadow
Version:
react native inner shadows with linear gradient design UI
196 lines (192 loc) • 6.33 kB
JavaScript
"use strict";
import React, { memo } from 'react';
import { Pressable, View } from 'react-native';
import { Canvas, Shadow } from '@shopify/react-native-skia';
import Animated from 'react-native-reanimated';
import { CANVAS_PADDING, COMMON_STYLES, DAMPING_DURATION, DAMPING_RATIO, IS_REFLECTED_LIGHT_ENABLED } from "../constants.js";
import { isLinearProps } from "../utils.js";
import LinearGradientFill from "./shapes/ShadowLinearGradientFill.js";
import { CornerRadii } from "./shapes/CornerRadii.js";
import { useAnimatedOffset } from "../hooks/useAnimatedOffset.js";
import { useShadowProperties } from "../hooks/useShadowProperties.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const PressButton = Animated.createAnimatedComponent(Pressable);
export const UnifiedShadowPressable = /*#__PURE__*/memo(function ShadowPressable({
width: propWidth,
height: propHeight,
duration = DAMPING_DURATION,
damping = DAMPING_RATIO,
isReflectedLightEnabled = IS_REFLECTED_LIGHT_ENABLED,
style,
children,
onLayout: propsOnLayout,
...props
}) {
const {
flatStyle,
bgColor,
shadowProps,
layout,
canRenderCanvas,
onLayout
} = useShadowProperties({
propWidth,
propHeight,
style,
propsOnLayout,
...props
});
const {
onPressIn,
onPressOut,
offset,
reflectedLightOffset,
inset,
blurRadius,
PressedAnimatedStyle
} = useAnimatedOffset({
offset: shadowProps.shadowOffset,
reflectedLightOffset: shadowProps.reflectedLightOffset,
blurRadius: shadowProps.shadowBlur,
damping,
duration,
onPressIn: props.onPressIn,
onPressOut: props.onPressOut
});
const isLinear = isLinearProps(props);
return /*#__PURE__*/_jsxs(View, {
onLayout: onLayout,
style: [flatStyle, COMMON_STYLES.canvasContainer],
children: [canRenderCanvas && /*#__PURE__*/_jsx(Canvas, {
style: [COMMON_STYLES.canvas, {
width: layout.width + CANVAS_PADDING * 2,
height: layout.height + CANVAS_PADDING * 2
}],
children: /*#__PURE__*/_jsxs(CornerRadii, {
width: layout.width,
height: layout.height,
style: flatStyle,
backgroundColor: bgColor,
children: [isLinear && /*#__PURE__*/_jsx(LinearGradientFill, {
...props,
// from, to, colors, etc.
width: layout.width,
height: layout.height
}), /*#__PURE__*/_jsx(Shadow, {
dx: offset.dx,
dy: offset.dy,
blur: blurRadius,
color: shadowProps.shadowColor,
inner: inset
}), isReflectedLightEnabled && /*#__PURE__*/_jsx(Shadow, {
dx: reflectedLightOffset.dx,
dy: reflectedLightOffset.dy,
blur: blurRadius,
color: shadowProps.reflectedLightColor,
inner: true
})]
})
}), /*#__PURE__*/_jsx(PressButton, {
...props,
// eslint-disable-next-line react-native/no-inline-styles
style: [{
zIndex: 1
}, flatStyle, COMMON_STYLES.canvasWrapper],
onPressIn: onPressIn,
onPressOut: onPressOut,
children: /*#__PURE__*/_jsx(Animated.View, {
style: PressedAnimatedStyle,
children: children
})
})]
});
});
/**
* ShadowPressable
* ----------------
* A pressable component that casts a shadow when pressed.
* The shadow effect is created using the `@shopify/react-native-skia` library.
*
* @remarks
* See {@link ShadowPressableProps} for a linear gradient shadow.
*
* @example
* ```ts
* <ShadowPressable style={styles.shadowView} reflectedLightColor="#ffffff8d">
* <Text style={[styles.context]}>Press Me!</Text>
* </ShadowPressable>
* ```
*
* @param duration - The duration of the shadow animation
* @param damping - The damping factor of the shadow animation
* @param isReflectedLightEnabled - Whether the reflected light effect is enabled
* @param initialDepth - deprecated: set shadow depth using `shadowOffset` instead
* @param shadowSpace - deprecated: set shadow depth using `shadowOffset` instead
*/
export const ShadowPressable = UnifiedShadowPressable;
/**
* LinearShadowPressable
* ----------------
* A pressable component that casts a linear gradient shadow when pressed.
* The shadow effect is created using the `@shopify/react-native-skia` library.
*
* @remarks
* See {@link LinearShadowPressableProps} for a linear gradient shadow.
*
* @example
* ```ts
* <LinearShadowPressable style={styles.shadowView} colors={['#f1c40f', '#e74c3c']} from="top" to="bottom">
* <Text style={[styles.context]}>Press Me!</Text>
* </LinearShadowPressable>
* ```
*
* @param duration - The duration of the shadow animation
* @param damping - The damping factor of the shadow animation
* @param isReflectedLightEnabled - Whether the reflected light effect is enabled
* @param from - The direction of the linear gradient, default is 'top'
* @param to - The direction of the linear gradient, default is 'bottom'
*/
export const LinearShadowPressable = ({
from = 'top',
to = 'bottom',
...props
}) => /*#__PURE__*/_jsx(UnifiedShadowPressable, {
from: from,
to: to,
...props
});
/**
* RadialShadowPressable
* ----------------
* A pressable component that casts a radial gradient shadow when pressed.
* The shadow effect is created using the `@shopify/react-native-skia` library.
*
* @remarks
* See {@link RadialShadowPressableProps} for a radial gradient shadow.
*
* @example
* ```ts
* <RadialShadowPressable style={styles.shadowView} colors={['#f1c40f', '#e74c3c']} center={{ x: 0.5, y: 0.5 }} radius={0.5}>
* <Text style={[styles.context]}>Press Me!</Text>
* </RadialShadowPressable>
* ```
*
* @param duration - The duration of the shadow animation
* @param damping - The damping factor of the shadow animation
* @param isReflectedLightEnabled - Whether the reflected light effect is enabled
* @param center - The center point of the radial gradient, default is { x: 0.5, y: 0.5 }
* @param radius - The radius of the radial gradient, default is 0.5
*/
export const RadialShadowPressable = ({
center = {
x: 0.5,
y: 0.5
},
radius = 0.5,
...props
}) => /*#__PURE__*/_jsx(UnifiedShadowPressable, {
center: center,
radius: radius,
...props
});
//# sourceMappingURL=ShadowPressable.js.map