react-native-inner-shadow/lib/module/components/shapes/ShadowLinearGradientFill.js

react native inner shadows with linear gradient design UI

"use strict";

import { LinearGradient, RadialGradient } from '@shopify/react-native-skia';
import { getLinearDirection, getRadialDirection, isRadialProps } from "../../utils.js";
import React from 'react';

/**
 * Internal helper component that draws the linear gradient.
 * You can rename this to "LinearGradientFill" or similar if you prefer.
 */
import { jsx as _jsx } from "react/jsx-runtime";
export default function LinearGradientFill({
  width = 0,
  height = 0,
  ...props
}) {
  const isRadial = isRadialProps(props);
  if (isRadial) {
    return /*#__PURE__*/_jsx(RadialGradientFill, {
      width: width,
      height: height,
      ...props
    });
  }
  return /*#__PURE__*/_jsx(LinearGradientComponent, {
    width: width,
    height: height,
    ...props
  });
}

/**
 * Internal helper component that draws the linear gradient.
 * You can rename this to "LinearGradientFill" or similar if you prefer.
 */
export function LinearGradientComponent({
  width = 0,
  height = 0,
  from = 'top',
  to = 'bottom',
  colors
}) {
  const {
    start,
    end
  } = React.useMemo(() => getLinearDirection({
    width,
    height,
    from,
    to
  }), [width, height, from, to]);
  return /*#__PURE__*/_jsx(LinearGradient, {
    start: start,
    end: end,
    colors: colors
  });
}

/**
 * Internal helper component that draws the linear gradient.
 * You can rename this to "LinearGradientFill" or similar if you prefer.
 */
export function RadialGradientFill({
  width = 0,
  height = 0,
  colors,
  center,
  radius
}) {
  const {
    c,
    r
  } = React.useMemo(() => getRadialDirection({
    width,
    height,
    center,
    radius
  }), [width, height, center, radius]);
  return /*#__PURE__*/_jsx(RadialGradient, {
    c: c,
    r: r,
    colors: colors
  });
}
//# sourceMappingURL=ShadowLinearGradientFill.js.map