UNPKG

3.88 kBTypeScriptView Raw
1import * as React from 'react';
2import { Animated, StyleProp, ViewStyle } from 'react-native';
3declare type Props = {
4 /**
5 * Determines whether clicking outside the modal dismiss it.
6 */
7 dismissable?: boolean;
8 /**
9 * Callback that is called when the user dismisses the modal.
10 */
11 onDismiss?: () => void;
12 /**
13 * Accessibility label for the overlay. This is read by the screen reader when the user taps outside the modal.
14 */
15 overlayAccessibilityLabel?: string;
16 /**
17 * Determines Whether the modal is visible.
18 */
19 visible: boolean;
20 /**
21 * Content of the `Modal`.
22 */
23 children: React.ReactNode;
24 /**
25 * Style for the content of the modal
26 */
27 contentContainerStyle?: StyleProp<ViewStyle>;
28 /**
29 * Style for the wrapper of the modal.
30 * Use this prop to change the default wrapper style or to override safe area insets with marginTop and marginBottom.
31 */
32 style?: StyleProp<ViewStyle>;
33 /**
34 * @optional
35 */
36 theme: ReactNativePaper.Theme;
37};
38declare type State = {
39 opacity: Animated.Value;
40 rendered: boolean;
41};
42/**
43 * The Modal component is a simple way to present content above an enclosing view.
44 * To render the `Modal` above other components, you'll need to wrap it with the [`Portal`](portal.html) component.
45 *
46 * <div class="screenshots">
47 * <figure>
48 * <img class="medium" src="screenshots/modal.gif" />
49 * </figure>
50 * </div>
51 *
52 * ## Usage
53 * ```js
54 * import * as React from 'react';
55 * import { Modal, Portal, Text, Button, Provider } from 'react-native-paper';
56 *
57 * const MyComponent = () => {
58 * const [visible, setVisible] = React.useState(false);
59 *
60 * const showModal = () => setVisible(true);
61 * const hideModal = () => setVisible(false);
62 * const containerStyle = {backgroundColor: 'white', padding: 20};
63 *
64 * return (
65 * <Provider>
66 * <Portal>
67 * <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
68 * <Text>Example Modal. Click outside this area to dismiss.</Text>
69 * </Modal>
70 * </Portal>
71 * <Button style={{marginTop: 30}} onPress={showModal}>
72 * Show
73 * </Button>
74 * </Provider>
75 * );
76 * };
77 *
78 * export default MyComponent;
79 * ```
80 */
81declare class Modal extends React.Component<Props, State> {
82 static defaultProps: {
83 dismissable: boolean;
84 visible: boolean;
85 overlayAccessibilityLabel: string;
86 };
87 static getDerivedStateFromProps(nextProps: Props, prevState: State): {
88 rendered: boolean;
89 } | null;
90 state: {
91 opacity: Animated.Value;
92 rendered: boolean;
93 };
94 componentDidUpdate(prevProps: Props): void;
95 private handleBack;
96 private showModal;
97 private hideModal;
98 componentWillUnmount(): void;
99 render(): JSX.Element | null;
100}
101declare const _default: (React.ComponentClass<Pick<Props, "style" | "children" | "visible" | "onDismiss" | "overlayAccessibilityLabel" | "contentContainerStyle" | "dismissable"> & {
102 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
103}, any> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<(React.ComponentClass<Props, any> & typeof Modal) | (React.FunctionComponent<Props> & typeof Modal), {}>) | (React.FunctionComponent<Pick<Props, "style" | "children" | "visible" | "onDismiss" | "overlayAccessibilityLabel" | "contentContainerStyle" | "dismissable"> & {
104 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
105}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<(React.ComponentClass<Props, any> & typeof Modal) | (React.FunctionComponent<Props> & typeof Modal), {}>);
106export default _default;