Type Alias ModalProps

ModalProps: {
    animationInTiming: number;
    animationOutTiming: number;
    backdropColor: string;
    dampingFactor: number;
    fullWindowOverlay: boolean;
    hideBackdrop: boolean;
    onBackButtonPress: (({ hide }: {
        hide: HookHideFunction;
    }) => void) | undefined;
    onBackdropPress: (({ hide }: {
        hide: HookHideFunction;
    }) => void) | undefined;
    style: Record<string, unknown>;
    swipeDirection: Direction | undefined;
    swipeVelocityThreshold: number;
} & Pick<React.ComponentProps<typeof Animated.View>, "entering" | "exiting">

Type declaration

  • animationInTiming: number

    Duration of the animation when the modal is shown.

    Default

    250
  • animationOutTiming: number

    Duration of the animation when the modal is hidden.

    Default

    250
  • backdropColor: string

    The color of the backdrop.

    Default

    "rgba(0, 0, 0, 0.5)"
  • dampingFactor: number

    Damping factor for the swipe gesture.

    Default

    0.2
  • fullWindowOverlay: boolean

    If true, the modal will be displayed as a full window overlay on top of native iOS modal screens.

    Default

    true

    Platform

    ios

  • hideBackdrop: boolean

    If true, the backdrop will be hidden.

    Default

    false
  • onBackButtonPress: (({ hide }: {
        hide: HookHideFunction;
    }) => void) | undefined

    Function to be called when the back button is pressed. You can override it to prevent the modal from closing on back button press.

    Default

    undefined

    Example

    ({ hide }) => { console.log('Back button pressed'); hide({ reason: MagicModalHideReason.BACK_BUTTON_PRESS }); }
  • onBackdropPress: (({ hide }: {
        hide: HookHideFunction;
    }) => void) | undefined

    Function to be called when the backdrop is pressed. You can override it to prevent the modal from closing on backdrop press.

    Default

    undefined

    Example

    ({ hide }) => { console.log('Backdrop pressed'); hide({ reason: MagicModalHideReason.BACKDROP_PRESS }); }
  • style: Record<string, unknown>

    Custom style for the modal.

    Default

    {}

    Example

    { backgroundColor: 'red', padding: 10 }
  • swipeDirection: Direction | undefined

    Direction of the modal animation. Set to undefined to disable the swipe gesture.

    Default

    "down"

    Example

    "up"
  • swipeVelocityThreshold: number

    Velocity threshold for the swipe gesture.

    Default

    500

Settings

Member Visibility