UNPKG

2.13 kBTypeScriptView Raw
1import React from 'react';
2import { StyleProp, ViewStyle } from 'react-native';
3import IconButton from '../../IconButton';
4import type { $Omit } from '../../../../src/types';
5import type { IconSource } from '../../Icon';
6export declare type Props = $Omit<React.ComponentProps<typeof IconButton>, 'icon' | 'theme' | 'color'> & {
7 /**
8 * Icon to show.
9 */
10 name: IconSource;
11 /**
12 * Function to execute on press.
13 */
14 onPress?: () => void;
15 /**
16 * Whether the TextInput will focus after onPress.
17 */
18 forceTextInputFocus?: boolean;
19 /**
20 * Color of the icon or a function receiving a boolean indicating whether the TextInput is focused and returning the color.
21 */
22 color?: ((isTextInputFocused: boolean) => string | undefined) | string;
23 style?: StyleProp<ViewStyle>;
24 /**
25 * @optional
26 */
27 theme?: ReactNativePaper.Theme;
28};
29export declare const ICON_SIZE = 24;
30declare type StyleContextType = {
31 style: StyleProp<ViewStyle>;
32 isTextInputFocused: boolean;
33 forceFocus: () => void;
34};
35declare const IconAdornment: React.FunctionComponent<{
36 testID: string;
37 icon: React.ReactNode;
38 topPosition: number;
39 side: 'left' | 'right';
40} & Omit<StyleContextType, 'style'>>;
41/**
42 * A component to render a leading / trailing icon in the TextInput
43 *
44 * <div class="screenshots">
45 * <figure>
46 * <img class="medium" src="screenshots/textinput-flat.icon.png" />
47 * </figure>
48 * </div>
49 *
50 * ## Usage
51 * ```js
52 * import * as React from 'react';
53 * import { TextInput } from 'react-native-paper';
54 *
55 * const MyComponent = () => {
56 * const [text, setText] = React.useState('');
57 *
58 * return (
59 * <TextInput
60 * label="Password"
61 * secureTextEntry
62 * right={<TextInput.Icon name="eye" />}
63 * />
64 * );
65 * };
66 *
67 * export default MyComponent;
68 * ```
69 */
70declare const TextInputIcon: {
71 ({ name, onPress, forceTextInputFocus, color, ...rest }: Props): JSX.Element;
72 displayName: string;
73 defaultProps: {
74 forceTextInputFocus: boolean;
75 };
76};
77export default TextInputIcon;
78export { IconAdornment };