Project React Native Reanimated Modal

Type Aliases§

Source§

type ModalAnimatedStyleFunction = { ... }

Source§

type ModalAnimation = "fade" | "slide" | "scale" | "custom"

Source§

type ModalAnimationConfig<T> = T extends "fade"
    ? FadeAnimationConfig
    : T extends "slide"
        ? SlideAnimationConfig
        : T extends "scale"
            ? ScaleAnimationConfig
            : T extends "custom" ? CustomAnimationConfig : never

Generic type for animation config based on animation type.

Source§

type ModalAnimationConfigUnion =
    | FadeAnimationConfig
    | SlideAnimationConfig
    | ScaleAnimationConfig
    | CustomAnimationConfig

Union of all animation configuration types.

Source§

type ModalAnimationState = "opening" | "sliding" | "bouncing" | "closing"

Source§

type SwipeDirection = "up" | "down" | "left" | "right"

Variables§

Source§

const DEFAULT_MODAL_ANIMATION_CONFIGS: { ... }...

Default animation configurations.

Source§

const DEFAULT_MODAL_ANIMATION_DURATION: 300300

Default values and configurations.

Source§

const DEFAULT_MODAL_BACKDROP_CONFIG: ModalBackdropConfig...

Default backdrop configuration.

Source§

const DEFAULT_MODAL_SWIPE_CONFIG: ModalSwipeConfig...

Default swipe configuration.

Source§

const DEFAULT_MODAL_SWIPE_DIRECTION: SwipeDirection'down'

Source§

const DEFAULT_MODAL_SWIPE_THRESHOLD: 100100

Modal component with smooth, customizable animations and gesture support. Built on top of React Native's Modal, Reanimated, and Gesture Handler.

props

Props for the modal component.

Functions§

Source§

getSlideInDirection(
animationConfig: ModalAnimationConfigUnion,
fallback?: SwipeDirection,
): SwipeDirection

Gets the slide-in direction from animation config.

Source§

getSwipeDirections(
    swipeConfig: ModalSwipeConfig,
    animationConfig?: ModalAnimationConfigUnion,
    fallback?: SwipeDirection | SwipeDirection[],
): SwipeDirection[]

Extracts swipe directions from swipe config or animation config fallback.

Source§

normalizeAnimationConfig(
config?: ModalAnimation | Partial<ModalAnimationConfigUnion> | undefined,
): ModalAnimationConfigUnion

Normalizes animation configuration by providing defaults for missing properties.

Source§

normalizeBackdropConfig(
    backdrop?: ModalBackdropConfig | ReactNode,
): {
    config: ModalBackdropConfig;
    customRenderer?: ReactNode;
    enabled: boolean;
    isCustom: boolean;
}

Normalizes backdrop configuration by providing defaults for missing properties.

Source§

normalizeSwipeConfig(config?: false | ModalSwipeConfig): ModalSwipeConfig

Normalizes swipe configuration by providing defaults for missing properties.

Interfaces§

CustomAnimationConfig: Configuration for custom animation.
FadeAnimationConfig: Configuration for fade animation.
ModalBackdropConfig: Configuration for modal backdrop.
ModalProps: Props for the Modal component.
ModalSwipeConfig: Configuration for modal swipe.
ScaleAnimationConfig: Configuration for scale animation.
SlideAnimationConfig: Configuration for slide animation.

Project React Native Reanimated ModalCopy item path

Type Aliases§

type ModalAnimatedStyleFunction = { ... }

type ModalAnimation = "fade" | "slide" | "scale" | "custom"

type ModalAnimationConfig<T> = T extends "fade" ? FadeAnimationConfig : T extends "slide" ? SlideAnimationConfig : T extends "scale" ? ScaleAnimationConfig : T extends "custom" ? CustomAnimationConfig : never

type ModalAnimationConfigUnion = | FadeAnimationConfig | SlideAnimationConfig | ScaleAnimationConfig | CustomAnimationConfig

type ModalAnimationState = "opening" | "sliding" | "bouncing" | "closing"

type SwipeDirection = "up" | "down" | "left" | "right"

Variables§

const DEFAULT_MODAL_ANIMATION_CONFIGS: { ... }...

const DEFAULT_MODAL_ANIMATION_DURATION: 300300

const DEFAULT_MODAL_BACKDROP_CONFIG: ModalBackdropConfig...

const DEFAULT_MODAL_BOUNCE_OPACITY_THRESHOLD: 0.050.05

const DEFAULT_MODAL_BOUNCE_SPRING_CONFIG: SpringConfig...

const DEFAULT_MODAL_SCALE_FACTOR: 0.80.8

const DEFAULT_MODAL_SWIPE_CONFIG: ModalSwipeConfig...

const DEFAULT_MODAL_SWIPE_DIRECTION: SwipeDirection'down'

const DEFAULT_MODAL_SWIPE_THRESHOLD: 100100

const Modal: FC<ModalProps>...

Functions§

getSlideInDirection( animationConfig: ModalAnimationConfigUnion, fallback?: SwipeDirection,): SwipeDirection

getSwipeDirections( swipeConfig: ModalSwipeConfig, animationConfig?: ModalAnimationConfigUnion, fallback?: SwipeDirection | SwipeDirection[],): SwipeDirection[]

normalizeAnimationConfig( config?: ModalAnimation | Partial<ModalAnimationConfigUnion> | undefined,): ModalAnimationConfigUnion

normalizeBackdropConfig( backdrop?: ModalBackdropConfig | ReactNode,): { config: ModalBackdropConfig; customRenderer?: ReactNode; enabled: boolean; isCustom: boolean;}

normalizeSwipeConfig(config?: false | ModalSwipeConfig): ModalSwipeConfig

Interfaces§

Project React Native Reanimated Modal

type ModalAnimationConfig<T> = T extends "fade"
? FadeAnimationConfig
: T extends "slide"
? SlideAnimationConfig
: T extends "scale"
? ScaleAnimationConfig
: T extends "custom" ? CustomAnimationConfig : never

type ModalAnimationConfigUnion =
| FadeAnimationConfig
| SlideAnimationConfig
| ScaleAnimationConfig
| CustomAnimationConfig

getSlideInDirection(
animationConfig: ModalAnimationConfigUnion,
fallback?: SwipeDirection,
): SwipeDirection

getSwipeDirections(
swipeConfig: ModalSwipeConfig,
animationConfig?: ModalAnimationConfigUnion,
fallback?: SwipeDirection | SwipeDirection[],
): SwipeDirection[]

normalizeAnimationConfig(
config?: ModalAnimation | Partial<ModalAnimationConfigUnion> | undefined,
): ModalAnimationConfigUnion

normalizeBackdropConfig(
backdrop?: ModalBackdropConfig | ReactNode,
): {
config: ModalBackdropConfig;
customRenderer?: ReactNode;
enabled: boolean;
isCustom: boolean;
}