UNPKG

2.81 kBTypeScriptView Raw
1import * as React from 'react';
2import { GestureResponderEvent, StyleProp, ViewStyle, View, Animated, ColorValue } from 'react-native';
3import type { $RemoveChildren, ThemeProp } from '../../types';
4import { IconSource } from '../Icon';
5import TouchableRipple from '../TouchableRipple/TouchableRipple';
6declare type IconButtonMode = 'outlined' | 'contained' | 'contained-tonal';
7export declare type Props = $RemoveChildren<typeof TouchableRipple> & {
8 /**
9 * Icon to display.
10 */
11 icon: IconSource;
12 /**
13 * @supported Available in v5.x with theme version 3
14 * Mode of the icon button. By default there is no specified mode - only pressable icon will be rendered.
15 */
16 mode?: IconButtonMode;
17 /**
18 * @renamed Renamed from 'color' to 'iconColor' in v5.x
19 * Color of the icon.
20 */
21 iconColor?: string;
22 /**
23 * Background color of the icon container.
24 */
25 containerColor?: string;
26 /**
27 * Color of the ripple effect.
28 */
29 rippleColor?: ColorValue;
30 /**
31 * @supported Available in v5.x with theme version 3
32 * Whether icon button is selected. A selected button receives alternative combination of icon and container colors.
33 */
34 selected?: boolean;
35 /**
36 * Size of the icon.
37 */
38 size?: number;
39 /**
40 * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.
41 */
42 disabled?: boolean;
43 /**
44 * Whether an icon change is animated.
45 */
46 animated?: boolean;
47 /**
48 * Accessibility label for the button. This is read by the screen reader when the user taps the button.
49 */
50 accessibilityLabel?: string;
51 /**
52 * Function to execute on press.
53 */
54 onPress?: (e: GestureResponderEvent) => void;
55 style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
56 ref?: React.RefObject<View>;
57 /**
58 * TestID used for testing purposes
59 */
60 testID?: string;
61 /**
62 * @optional
63 */
64 theme?: ThemeProp;
65 /**
66 * Whether to show a loading indicator.
67 */
68 loading?: boolean;
69};
70/**
71 * An icon button is a button which displays only an icon without a label.
72 *
73 * ## Usage
74 * ```js
75 * import * as React from 'react';
76 * import { IconButton, MD3Colors } from 'react-native-paper';
77 *
78 * const MyComponent = () => (
79 * <IconButton
80 * icon="camera"
81 * iconColor={MD3Colors.error50}
82 * size={20}
83 * onPress={() => console.log('Pressed')}
84 * />
85 * );
86 *
87 * export default MyComponent;
88 * ```
89 *
90 * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
91 */
92declare const IconButton: import("../../utils/forwardRef").ForwardRefComponent<View, Props>;
93export default IconButton;
94//# sourceMappingURL=IconButton.d.ts.map
\No newline at end of file