| 1 | import * as React from 'react';
|
| 2 | import { Animated, StyleProp, View, ViewStyle } from 'react-native';
|
| 3 | import Button from './Button/Button';
|
| 4 | import { IconSource } from './Icon';
|
| 5 | import Surface from './Surface';
|
| 6 | import type { $Omit, $RemoveChildren, ThemeProp } from '../types';
|
| 7 | export declare type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
|
| 8 | /**
|
| 9 | * Whether banner is currently visible.
|
| 10 | */
|
| 11 | visible: boolean;
|
| 12 | /**
|
| 13 | * Content that will be displayed inside banner.
|
| 14 | */
|
| 15 | children: React.ReactNode;
|
| 16 | /**
|
| 17 | * Icon to display for the `Banner`. Can be an image.
|
| 18 | */
|
| 19 | icon?: IconSource;
|
| 20 | /**
|
| 21 | * Action items to shown in the banner.
|
| 22 | * An action item should contain the following properties:
|
| 23 | *
|
| 24 | * - `label`: label of the action button (required)
|
| 25 | * - `onPress`: callback that is called when button is pressed (required)
|
| 26 | *
|
| 27 | * To customize button you can pass other props that button component takes.
|
| 28 | */
|
| 29 | actions?: Array<{
|
| 30 | label: string;
|
| 31 | } & $RemoveChildren<typeof Button>>;
|
| 32 | /**
|
| 33 | * Style of banner's inner content.
|
| 34 | * Use this prop to apply custom width for wide layouts.
|
| 35 | */
|
| 36 | contentStyle?: StyleProp<ViewStyle>;
|
| 37 | /**
|
| 38 | * @supported Available in v5.x with theme version 3
|
| 39 | * Changes Banner shadow and background on iOS and Android.
|
| 40 | */
|
| 41 | elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
|
| 42 | /**
|
| 43 | * Specifies the largest possible scale a text font can reach.
|
| 44 | */
|
| 45 | maxFontSizeMultiplier?: number;
|
| 46 | style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
|
| 47 | ref?: React.RefObject<View>;
|
| 48 | /**
|
| 49 | * @optional
|
| 50 | */
|
| 51 | theme?: ThemeProp;
|
| 52 | /**
|
| 53 | * @optional
|
| 54 | * Optional callback that will be called after the opening animation finished running normally
|
| 55 | */
|
| 56 | onShowAnimationFinished?: Animated.EndCallback;
|
| 57 | /**
|
| 58 | * @optional
|
| 59 | * Optional callback that will be called after the closing animation finished running normally
|
| 60 | */
|
| 61 | onHideAnimationFinished?: Animated.EndCallback;
|
| 62 | };
|
| 63 | /**
|
| 64 | * Banner displays a prominent message and related actions.
|
| 65 | *
|
| 66 | * ## Usage
|
| 67 | * ```js
|
| 68 | * import * as React from 'react';
|
| 69 | * import { Image } from 'react-native';
|
| 70 | * import { Banner } from 'react-native-paper';
|
| 71 | *
|
| 72 | * const MyComponent = () => {
|
| 73 | * const [visible, setVisible] = React.useState(true);
|
| 74 | *
|
| 75 | * return (
|
| 76 | * <Banner
|
| 77 | * visible={visible}
|
| 78 | * actions={[
|
| 79 | * {
|
| 80 | * label: 'Fix it',
|
| 81 | * onPress: () => setVisible(false),
|
| 82 | * },
|
| 83 | * {
|
| 84 | * label: 'Learn more',
|
| 85 | * onPress: () => setVisible(false),
|
| 86 | * },
|
| 87 | * ]}
|
| 88 | * icon={({size}) => (
|
| 89 | * <Image
|
| 90 | * source={{
|
| 91 | * uri: 'https://avatars3.githubusercontent.com/u/17571969?s=400&v=4',
|
| 92 | * }}
|
| 93 | * style={{
|
| 94 | * width: size,
|
| 95 | * height: size,
|
| 96 | * }}
|
| 97 | * />
|
| 98 | * )}>
|
| 99 | * There was a problem processing a transaction on your credit card.
|
| 100 | * </Banner>
|
| 101 | * );
|
| 102 | * };
|
| 103 | *
|
| 104 | * export default MyComponent;
|
| 105 | * ```
|
| 106 | */
|
| 107 | declare const Banner: ({ visible, icon, children, actions, contentStyle, elevation, style, theme: themeOverrides, onShowAnimationFinished, onHideAnimationFinished, maxFontSizeMultiplier, ...rest }: Props) => React.JSX.Element;
|
| 108 | export default Banner;
|
| 109 | //# sourceMappingURL=Banner.d.ts.map |
| \ | No newline at end of file |