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 {
    animationConfig?: ModalAnimation | ModalAnimationConfigUnion;
    backdropColor?: string;
    backdropOpacity?: number;
    backdropTestID?: string;
    children: ReactNode;
    closable?: boolean;
    containerTestID?: string;
    contentContainerStyle?: StyleProp<ViewStyle>;
    contentTestID?: string;
    coverScreen?: boolean;
    hardwareAccelerated?: boolean;
    hasBackdrop?: boolean;
    navigationBarTranslucent?: boolean;
    onBackdropPress?: () => void;
    onHide?: () => void;
    onOrientationChange?: (event: NativeSyntheticEvent<any>) => void;
    onShow?: () => void;
    renderBackdrop?: () => ReactNode;
    statusBarTranslucent?: boolean;
    style?: StyleProp<ViewStyle>;
    supportedOrientations?: (
        | "portrait"
        | "portrait-upside-down"
        | "landscape"
        | "landscape-left"
        | "landscape-right"
    )[];
    swipeConfig?: SwipeConfig;
    visible: boolean;
}

Properties§

Source§

animationConfig?: ModalAnimation | ModalAnimationConfigUnion

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

default
{ animation: 'slide', duration: 300 }
Source§

backdropColor?: string

Color of the backdrop.

default
'black'
Source§

backdropOpacity?: number

Opacity of the backdrop (0-1).

default
0.7
Source§

backdropTestID?: string

testID for the backdrop Pressable.

default
'modal-backdrop'
Source§

children: ReactNode

Content to render inside the modal.

Source§

closable?: boolean

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

default
true
Source§

containerTestID?: string

testID for the root container View.

default
'modal-container'
Source§

contentContainerStyle?: StyleProp<ViewStyle>

Style for the content wrapper (Animated.View).

Source§

contentTestID?: string

testID for the modal content (Animated.View).

default
'modal-content'
Source§

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.

Source§

hasBackdrop?: boolean

Whether to show a backdrop behind the modal.

default
true
§

navigationBarTranslucent?: boolean

Determines whether your modal should go under the system navigationbar.

Source§

onBackdropPress?: () => void

Callback when the backdrop is pressed.

Source§

onHide?: () => void

Called when the modal disappears.

§

onOrientationChange?: (event: NativeSyntheticEvent<any>) => void

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.

Source§

onShow?: () => void

Called when the modal appears.

Source§

renderBackdrop?: () => ReactNode

Custom backdrop renderer. Если задан, используется вместо стандартного backdrop. Полезно для BlurView, градиентов и других кастомных фонов.

§

statusBarTranslucent?: boolean

Determines whether your modal should go under the system statusbar.

Source§

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.

Source§

swipeConfig?: SwipeConfig

Swipe gesture configuration.

default
{ enabled: true, threshold: 100 }
Source§

visible: boolean

Controls the visibility of the modal.