Interface ModalProps

Source
Expand description

Props for the Modal component.

remarks

Allows you to flexibly customize animation, gestures, backdrop and appearance of the modal window.



interface ModalProps {
    animation?: ModalAnimation | ModalAnimationConfigUnion;
    backdrop?: ModalBackdropConfig | ReactNode;
    backdropTestID?: string;
    children: ReactNode;
    closable?: boolean;
    containerTestID?: string;
    contentContainerStyle?: StyleProp<ViewStyle>;
    contentTestID?: string;
    coverScreen?: boolean;
    hardwareAccelerated?: boolean;
    navigationBarTranslucent?: boolean;
    onBackButtonPress?: () => void;
    onBackdropPress?: false | (() => void);
    onHide?: () => void;
    onOrientationChange?: (event: NativeSyntheticEvent<any>) => void;
    onShow?: () => void;
    statusBarTranslucent?: boolean;
    style?: StyleProp<ViewStyle>;
    supportedOrientations?: (
        | "portrait"
        | "portrait-upside-down"
        | "landscape"
        | "landscape-left"
        | "landscape-right"
    )[];
    swipe?: false
    | ModalSwipeConfig;
    visible: boolean;
}

Properties§

§animation?: ModalAnimation | ModalAnimationConfigUnion

Animation configuration for modal appearance. Can be a simple animation type string or a detailed config object.

default
{ type: 'slide', duration: 300 }
§backdrop?: ModalBackdropConfig | ReactNode

Backdrop configuration for the modal. Can be false (no backdrop), a custom renderer function, or a configuration object.

default
{ enabled: true, color: 'black', opacity: 0.7 }
§backdropTestID?: string

testID for the backdrop Pressable.

default
'modal-backdrop'
§children: ReactNode

Content to render inside the modal.

§closable?: boolean

Whether the modal can be closed by user actions (backdrop press, swipe, hardware back).

default
true
§containerTestID?: string

testID for the root container View.

default
'modal-container'
§contentContainerStyle?: StyleProp<ViewStyle>

Style for the content wrapper (Animated.View).

§contentTestID?: string

testID for the modal content (Animated.View).

default
'modal-content'
§coverScreen?: boolean

If true, covers the entire screen without using native Modal.

default
false
§hardwareAccelerated?: boolean

Controls whether to force hardware acceleration for the underlying window.

§navigationBarTranslucent?: boolean

Determines whether your modal should go under the system navigationbar.

§onBackButtonPress?: { ... }

Called when the Android hardware back button is pressed while the modal is visible. When provided, it intercepts the back press and replaces the default close behavior, so you can show a confirmation dialog, run cleanup, or conditionally dismiss the modal. If omitted, the back button closes the modal as before.

Only fires on Android; it is unsupported on web and irrelevant on iOS.

§onBackdropPress?: false | (() => void)

Callback when the backdrop is pressed. Set to false to prevent backdrop press from closing the modal.

§onHide?: { ... }

Called when the modal disappears.

§onOrientationChange?: { ... }

The onOrientationChange callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.

§onShow?: { ... }

Called when the modal appears.

§statusBarTranslucent?: boolean

Determines whether your modal should go under the system statusbar.

§style?: StyleProp<ViewStyle>

Style for the modal container (outer View).

§supportedOrientations?: (
    | "portrait"
    | "portrait-upside-down"
    | "landscape"
    | "landscape-left"
    | "landscape-right"
)[]

The supportedOrientations prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.

§swipe?: false | ModalSwipeConfig

Swipe gesture configuration.

default
{ enabled: true, threshold: 100 }
§visible: boolean

Controls the visibility of the modal.