react-native-shadow-2/lib/index.d.ts

Cross-platform shadow for React Native. Improved version of the abandoned react-native-shadow package

import React from 'react';
import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
/** Package Semver. Used on the [Snack](https://snack.expo.dev/@srbrahma/react-native-shadow-2-sandbox). */
export declare const version = "7.1.1";
export interface ShadowProps {
    /** The color of the shadow when it's right next to the given content, leaving it.
     * Accepts alpha channel.
     *
     * @default '#00000020' */
    startColor?: string;
    /** The color of the shadow at the maximum distance from the content. Accepts alpha channel.
     *
     * It defaults to a transparent color of `startColor`. E.g.: `startColor` is `#f00`, so it defaults to `#f000`. [Reason here](https://github.com/ftzi/react-native-shadow-2/issues/31#issuecomment-985578972).
     *
     * @default Transparent startColor */
    endColor?: string;
    /** How far the shadow goes.
     * @default 10 */
    distance?: number;
    /** The sides that have the shadows drawn. Doesn't include corners.
     *
     * Undefined sides fallbacks to true.
     *
     * @default undefined */
    sides?: Partial<Record<'start' | 'end' | 'top' | 'bottom', boolean>>;
    /** The corners that have the shadows drawn.
     *
     * Undefined corners fallbacks to true.
     *
     * @default undefined */
    corners?: Partial<Record<'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd', boolean>>;
    /** Moves the shadow. Negative x moves it to the left, negative y moves it up.
     *
     * Accepts `'x%'` values, in relation to the child's size.
     *
     * Setting an offset will default `paintInside` to true.
     *
     * @default [0, 0] */
    offset?: [x: number | string, y: number | string];
    /** If the shadow should be applied inside the external shadows, below the child. `startColor` is used as fill color.
     *
     * You may want this as true when using offset or if your child have some transparency.
     *
     * **The default changes to true if `offset` property is defined.**
     *
     * @default false */
    paintInside?: boolean;
    /** Style of the View that wraps your child component.
     *
     * You may set here the corners radii (e.g. borderTopLeftRadius) and the width/height. */
    style?: StyleProp<ViewStyle>;
    /** Style of the view that wraps the shadow and your child component. */
    containerStyle?: StyleProp<ViewStyle>;
    /** If you don't want the relative sizing and positioning of the shadow on the first render, but only on the second render and
     * beyond with the exact onLayout's sizes. This is useful if dealing with radius greater than the sizes, to assure
     * the fully round corners when the sides sizes are unknown and to avoid weird and overflowing shadows on the first render.
     *
     * Note that when true, the shadow won't appear on the first render.
     *
     * @default false */
    safeRender?: boolean;
    /** Use this when you want your children to ocuppy all available cross-axis/horizontal space.
     *
     * Shortcut to `style={{alignSelf: 'stretch'}}.
     *
     * [Explanation](https://github.com/ftzi/react-native-shadow-2/issues/7#issuecomment-899784537)
     *
     * @default false */
    stretch?: boolean;
    /** Won't render the Shadow. Useful for reusing components as sometimes shadows are not wanted.
     *
     * The children will be wrapped by two Views. `containerStyle` and `style` are still applied.
     *
     * For performance, contrary to `disabled={false}`, the children's corners radii aren't set in `style`.
     * This is done in "enabled" to limit Pressable's ripple as we already obtain those values.
     *
     * @default false */
    disabled?: boolean;
    /** Props for the container's wrapping View. You probably don't need to use this. */
    containerViewProps?: ViewProps;
    /** Props for the shadow's wrapping View. You probably don't need to use this. You may pass `style` to this. */
    shadowViewProps?: ViewProps;
    /** Props for the children's wrapping View. You probably't don't need to use this. */
    childrenViewProps?: ViewProps;
    /** Your child component. */
    children?: React.ReactNode;
}
export declare function Shadow(props: ShadowProps): JSX.Element;