react-native-inner-shadow/lib/module/components/BaseShadowComponent.js

react native inner shadows with linear gradient design UI

"use strict";

import { memo } from 'react';
import { View } from 'react-native';
import { CANVAS_PADDING, COMMON_STYLES, IS_REFLECTED_LIGHT_ENABLED } from "../constants.js";
import { Canvas, Shadow } from '@shopify/react-native-skia';
import { CornerRadii } from "./shapes/CornerRadii.js";
import { useShadowProperties } from "./../hooks/useShadowProperties.js";
import { isLinearProps } from "../utils.js";
import LinearGradientFill from "./shapes/ShadowLinearGradientFill.js";

/**
 * A unified interface for both "solid" (InnerShadow) and "linear" (LinearShadow).
 * We automatically detect "linear mode" by checking if the user provides
 * gradient props (colors, from, to, etc.).
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const BaseShadowComponent = /*#__PURE__*/memo(function BaseShadowComponent({
  width: propWidth,
  height: propHeight,
  inset,
  isReflectedLightEnabled = IS_REFLECTED_LIGHT_ENABLED,
  style,
  onLayout: propsOnLayout,
  children,
  ...props
}) {
  // Extract base fields
  const {
    flatStyle,
    bgColor,
    shadowProps,
    layout,
    canRenderCanvas,
    onLayout
  } = useShadowProperties({
    propWidth,
    propHeight,
    style,
    inset,
    propsOnLayout,
    ...props
  });
  const isLinear = isLinearProps(props);
  return /*#__PURE__*/_jsxs(View, {
    style: [flatStyle, COMMON_STYLES.canvasContainer],
    onLayout: onLayout,
    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,
          width: layout.width,
          height: layout.height
        }), /*#__PURE__*/_jsx(Shadow, {
          dx: shadowProps.shadowOffset.width,
          dy: shadowProps.shadowOffset.height,
          blur: shadowProps.shadowBlur,
          color: shadowProps.shadowColor,
          inner: inset
        }), isReflectedLightEnabled && /*#__PURE__*/_jsx(Shadow, {
          dx: shadowProps.reflectedLightOffset.width,
          dy: shadowProps.reflectedLightOffset.height,
          blur: shadowProps.reflectedLightBlur,
          color: shadowProps.reflectedLightColor,
          inner: true
        })]
      })
    }), children]
  });
});
//# sourceMappingURL=BaseShadowComponent.js.map