UNPKG

31.4 kBTypeScriptView Raw
1import * as React from 'react';
2import { Animated, TextInput as NativeTextInput, LayoutChangeEvent, StyleProp, TextStyle } from 'react-native';
3import type { RenderProps, State } from './types';
4export declare type TextInputProps = React.ComponentPropsWithRef<typeof NativeTextInput> & {
5 /**
6 * Mode of the TextInput.
7 * - `flat` - flat input with an underline.
8 * - `outlined` - input with an outline.
9 *
10 * In `outlined` mode, the background color of the label is derived from `colors.background` in theme or the `backgroundColor` style.
11 * This component render TextInputOutlined or TextInputFlat based on that props
12 */
13 mode?: 'flat' | 'outlined';
14 left?: React.ReactNode;
15 right?: React.ReactNode;
16 /**
17 * If true, user won't be able to interact with the component.
18 */
19 disabled?: boolean;
20 /**
21 * The text to use for the floating label.
22 */
23 label?: string;
24 /**
25 * Placeholder for the input.
26 */
27 placeholder?: string;
28 /**
29 * Whether to style the TextInput with error style.
30 */
31 error?: boolean;
32 /**
33 * Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.
34 */
35 onChangeText?: Function;
36 /**
37 * Selection color of the input
38 */
39 selectionColor?: string;
40 /**
41 * Underline color of the input.
42 */
43 underlineColor?: string;
44 /**
45 * Outline color of the input.
46 */
47 outlineColor?: string;
48 /**
49 * Sets min height with densed layout. For `TextInput` in `flat` mode
50 * height is `64dp` or in dense layout - `52dp` with label or `40dp` without label.
51 * For `TextInput` in `outlined` mode
52 * height is `56dp` or in dense layout - `40dp` regardless of label.
53 * When you apply `heigh` prop in style the `dense` prop affects only `paddingVertical` inside `TextInput`
54 */
55 dense?: boolean;
56 /**
57 * Whether the input can have multiple lines.
58 */
59 multiline?: boolean;
60 /**
61 * The number of lines to show in the input (Android only).
62 */
63 numberOfLines?: number;
64 /**
65 * Callback that is called when the text input is focused.
66 */
67 onFocus?: (args: any) => void;
68 /**
69 * Callback that is called when the text input is blurred.
70 */
71 onBlur?: (args: any) => void;
72 /**
73 *
74 * Callback to render a custom input component such as `react-native-text-input-mask`
75 * instead of the default `TextInput` component from `react-native`.
76 *
77 * Example:
78 * ```js
79 * <TextInput
80 * label="Phone number"
81 * render={props =>
82 * <TextInputMask
83 * {...props}
84 * mask="+[00] [000] [000] [000]"
85 * />
86 * }
87 * />
88 * ```
89 */
90 render?: (props: RenderProps) => React.ReactNode;
91 /**
92 * Value of the text input.
93 */
94 value?: string;
95 /**
96 * Pass `fontSize` prop to modify the font size inside `TextInput`.
97 * Pass `height` prop to set `TextInput` height. When `height` is passed,
98 * `dense` prop will affect only input's `paddingVertical`.
99 * Pass `paddingHorizontal` to modify horizontal padding.
100 * This can be used to get MD Guidelines v1 TextInput look.
101 */
102 style?: StyleProp<TextStyle>;
103 /**
104 * @optional
105 */
106 theme: ReactNativePaper.Theme;
107};
108/**
109 * A component to allow users to input text.
110 *
111 * <div class="screenshots">
112 * <figure>
113 * <img class="medium" src="screenshots/textinput-flat.focused.png" />
114 * <figcaption>Flat (focused)</figcaption>
115 * </figure>
116 * <figure>
117 * <img class="medium" src="screenshots/textinput-flat.disabled.png" />
118 * <figcaption>Flat (disabled)</figcaption>
119 * </figure>
120 * <figure>
121 * <img class="medium" src="screenshots/textinput-outlined.focused.png" />
122 * <figcaption>Outlined (focused)</figcaption>
123 * </figure>
124 * <figure>
125 * <img class="medium" src="screenshots/textinput-outlined.disabled.png" />
126 * <figcaption>Outlined (disabled)</figcaption>
127 * </figure>
128 * </div>
129 *
130 * ## Usage
131 * ```js
132 * import * as React from 'react';
133 * import { TextInput } from 'react-native-paper';
134 *
135 * const MyComponent = () => {
136 * const [text, setText] = React.useState('');
137 *
138 * return (
139 * <TextInput
140 * label="Email"
141 * value={text}
142 * onChangeText={text => setText(text)}
143 * />
144 * );
145 * };
146 *
147 * export default MyComponent;
148 * ```
149 *
150 * @extends TextInput props https://reactnative.dev/docs/textinput#props
151 */
152declare class TextInput extends React.Component<TextInputProps, State> {
153 static Icon: {
154 ({ name, onPress, forceTextInputFocus, color, ...rest }: Pick<(Pick<Pick<Pick<(Pick<import("react-native").TouchableWithoutFeedbackProps & React.RefAttributes<import("react-native").TouchableWithoutFeedback> & {
155 borderless?: boolean | undefined;
156 background?: Object | undefined;
157 centered?: boolean | undefined; /**
158 * Mode of the TextInput.
159 * - `flat` - flat input with an underline.
160 * - `outlined` - input with an outline.
161 *
162 * In `outlined` mode, the background color of the label is derived from `colors.background` in theme or the `backgroundColor` style.
163 * This component render TextInputOutlined or TextInputFlat based on that props
164 */
165 disabled?: boolean | undefined;
166 onPress?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
167 onLongPress?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
168 rippleColor?: string | undefined;
169 underlayColor?: string | undefined;
170 children: React.ReactNode;
171 style?: StyleProp<import("react-native").ViewStyle>;
172 theme: ReactNativePaper.Theme;
173 }, "ref" | "style" | "children" | "onLayout" | "onPress" | "onLongPress" | "testID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "key" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "disabled" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset" | "touchSoundDisabled" | "background" | "borderless" | "rippleColor" | "underlayColor" | "centered"> & {
174 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
175 }) | React.PropsWithChildren<Pick<import("react-native").TouchableWithoutFeedbackProps & React.RefAttributes<import("react-native").TouchableWithoutFeedback> & {
176 borderless?: boolean | undefined;
177 background?: Object | undefined;
178 centered?: boolean | undefined; /**
179 * Mode of the TextInput.
180 * - `flat` - flat input with an underline.
181 * - `outlined` - input with an outline.
182 *
183 * In `outlined` mode, the background color of the label is derived from `colors.background` in theme or the `backgroundColor` style.
184 * This component render TextInputOutlined or TextInputFlat based on that props
185 */
186 disabled?: boolean | undefined;
187 onPress?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
188 onLongPress?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
189 rippleColor?: string | undefined;
190 underlayColor?: string | undefined;
191 children: React.ReactNode;
192 style?: StyleProp<import("react-native").ViewStyle>;
193 theme: ReactNativePaper.Theme;
194 }, "ref" | "style" | "children" | "onLayout" | "onPress" | "onLongPress" | "testID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "key" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "disabled" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset" | "touchSoundDisabled" | "background" | "borderless" | "rippleColor" | "underlayColor" | "centered"> & {
195 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
196 }>, "style" | "children" | "onLayout" | "onPress" | "onLongPress" | "testID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "key" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "theme" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "disabled" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset" | "touchSoundDisabled" | "background" | "borderless" | "rippleColor" | "underlayColor" | "centered">, "style" | "onLayout" | "onPress" | "onLongPress" | "testID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "key" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "theme" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "disabled" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset" | "touchSoundDisabled" | "background" | "borderless" | "rippleColor" | "underlayColor" | "centered"> & {
197 icon: import("../Icon").IconSource;
198 color?: string | undefined;
199 size?: number | undefined;
200 disabled?: boolean | undefined;
201 animated?: boolean | undefined;
202 accessibilityLabel?: string | undefined;
203 onPress?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
204 /**
205 * If true, user won't be able to interact with the component.
206 */
207 style?: StyleProp<import("react-native").ViewStyle>;
208 ref?: React.RefObject<import("react-native").TouchableWithoutFeedback> | undefined;
209 theme: ReactNativePaper.Theme;
210 }, "ref" | "style" | "color" | "size" | "onLayout" | "onPress" | "onLongPress" | "testID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "icon" | "key" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "disabled" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset" | "touchSoundDisabled" | "background" | "borderless" | "rippleColor" | "underlayColor" | "centered" | "animated"> & {
211 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
212 }) | React.PropsWithChildren<Pick<Pick<Pick<(Pick<import("react-native").TouchableWithoutFeedbackProps & React.RefAttributes<import("react-native").TouchableWithoutFeedback> & {
213 borderless?: boolean | undefined;
214 background?: Object | undefined;
215 centered?: boolean | undefined; /**
216 * Mode of the TextInput.
217 * - `flat` - flat input with an underline.
218 * - `outlined` - input with an outline.
219 *
220 * In `outlined` mode, the background color of the label is derived from `colors.background` in theme or the `backgroundColor` style.
221 * This component render TextInputOutlined or TextInputFlat based on that props
222 */
223 disabled?: boolean | undefined;
224 onPress?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
225 onLongPress?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
226 rippleColor?: string | undefined;
227 underlayColor?: string | undefined;
228 children: React.ReactNode;
229 style?: StyleProp<import("react-native").ViewStyle>;
230 theme: ReactNativePaper.Theme;
231 }, "ref" | "style" | "children" | "onLayout" | "onPress" | "onLongPress" | "testID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "key" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "disabled" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset" | "touchSoundDisabled" | "background" | "borderless" | "rippleColor" | "underlayColor" | "centered"> & {
232 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
233 }) | React.PropsWithChildren<Pick<import("react-native").TouchableWithoutFeedbackProps & React.RefAttributes<import("react-native").TouchableWithoutFeedback> & {
234 borderless?: boolean | undefined;
235 background?: Object | undefined;
236 centered?: boolean | undefined; /**
237 * Mode of the TextInput.
238 * - `flat` - flat input with an underline.
239 * - `outlined` - input with an outline.
240 *
241 * In `outlined` mode, the background color of the label is derived from `colors.background` in theme or the `backgroundColor` style.
242 * This component render TextInputOutlined or TextInputFlat based on that props
243 */
244 disabled?: boolean | undefined;
245 onPress?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
246 onLongPress?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
247 rippleColor?: string | undefined;
248 underlayColor?: string | undefined;
249 children: React.ReactNode;
250 style?: StyleProp<import("react-native").ViewStyle>;
251 theme: ReactNativePaper.Theme;
252 }, "ref" | "style" | "children" | "onLayout" | "onPress" | "onLongPress" | "testID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "key" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "disabled" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset" | "touchSoundDisabled" | "background" | "borderless" | "rippleColor" | "underlayColor" | "centered"> & {
253 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
254 }>, "style" | "children" | "onLayout" | "onPress" | "onLongPress" | "testID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "key" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "theme" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "disabled" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset" | "touchSoundDisabled" | "background" | "borderless" | "rippleColor" | "underlayColor" | "centered">, "style" | "onLayout" | "onPress" | "onLongPress" | "testID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "key" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "theme" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "disabled" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset" | "touchSoundDisabled" | "background" | "borderless" | "rippleColor" | "underlayColor" | "centered"> & {
255 icon: import("../Icon").IconSource;
256 color?: string | undefined;
257 size?: number | undefined;
258 disabled?: boolean | undefined;
259 animated?: boolean | undefined;
260 accessibilityLabel?: string | undefined;
261 onPress?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
262 /**
263 * If true, user won't be able to interact with the component.
264 */
265 style?: StyleProp<import("react-native").ViewStyle>;
266 ref?: React.RefObject<import("react-native").TouchableWithoutFeedback> | undefined;
267 theme: ReactNativePaper.Theme;
268 }, "ref" | "style" | "color" | "size" | "onLayout" | "onPress" | "onLongPress" | "testID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "icon" | "key" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "disabled" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset" | "touchSoundDisabled" | "background" | "borderless" | "rippleColor" | "underlayColor" | "centered" | "animated"> & {
269 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
270 }>, "ref" | "style" | "size" | "onLayout" | "onPress" | "onLongPress" | "testID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "key" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "disabled" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset" | "touchSoundDisabled" | "background" | "borderless" | "rippleColor" | "underlayColor" | "centered" | "animated"> & {
271 name: import("../Icon").IconSource;
272 onPress?: (() => void) | undefined;
273 forceTextInputFocus?: boolean | undefined;
274 color?: string | ((isTextInputFocused: boolean) => string | undefined) | undefined;
275 style?: StyleProp<import("react-native").ViewStyle>;
276 theme?: ReactNativePaper.Theme | undefined;
277 }): JSX.Element;
278 displayName: string;
279 defaultProps: {
280 forceTextInputFocus: boolean;
281 };
282 };
283 static Affix: (React.ComponentClass<Pick<{
284 text: string;
285 onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
286 textStyle?: StyleProp<TextStyle>;
287 theme: ReactNativePaper.Theme;
288 }, "text" | "onLayout" | "textStyle"> & {
289 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
290 }, any> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<(React.ComponentClass<{
291 text: string;
292 onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
293 textStyle?: StyleProp<TextStyle>;
294 theme: ReactNativePaper.Theme;
295 }, any> & {
296 ({ text, textStyle: labelStyle, theme }: {
297 text: string;
298 onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
299 textStyle?: StyleProp<TextStyle>;
300 theme: ReactNativePaper.Theme;
301 }): JSX.Element;
302 displayName: string;
303 }) | (React.FunctionComponent<{
304 text: string;
305 onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
306 textStyle?: StyleProp<TextStyle>;
307 theme: ReactNativePaper.Theme;
308 }> & {
309 ({ text, textStyle: labelStyle, theme }: {
310 text: string;
311 onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
312 textStyle?: StyleProp<TextStyle>;
313 theme: ReactNativePaper.Theme;
314 }): JSX.Element;
315 displayName: string;
316 }), {}>) | (React.FunctionComponent<Pick<{
317 text: string;
318 onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
319 textStyle?: StyleProp<TextStyle>;
320 theme: ReactNativePaper.Theme;
321 }, "text" | "onLayout" | "textStyle"> & {
322 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
323 }> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<(React.ComponentClass<{
324 text: string;
325 onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
326 textStyle?: StyleProp<TextStyle>;
327 theme: ReactNativePaper.Theme;
328 }, any> & {
329 ({ text, textStyle: labelStyle, theme }: {
330 text: string;
331 onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
332 textStyle?: StyleProp<TextStyle>;
333 theme: ReactNativePaper.Theme;
334 }): JSX.Element;
335 displayName: string;
336 }) | (React.FunctionComponent<{
337 text: string;
338 onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
339 textStyle?: StyleProp<TextStyle>;
340 theme: ReactNativePaper.Theme;
341 }> & {
342 ({ text, textStyle: labelStyle, theme }: {
343 text: string;
344 onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
345 textStyle?: StyleProp<TextStyle>;
346 theme: ReactNativePaper.Theme;
347 }): JSX.Element;
348 displayName: string;
349 }), {}>);
350 static defaultProps: Partial<TextInputProps>;
351 static getDerivedStateFromProps(nextProps: TextInputProps, prevState: State): {
352 value: string | undefined;
353 };
354 validInputValue: string | undefined;
355 state: {
356 labeled: Animated.Value;
357 error: Animated.Value;
358 focused: boolean;
359 placeholder: string;
360 value: string | undefined;
361 labelLayout: {
362 measured: boolean;
363 width: number;
364 height: number;
365 };
366 leftLayout: {
367 width: null;
368 height: null;
369 };
370 rightLayout: {
371 width: null;
372 height: null;
373 };
374 };
375 ref: NativeTextInput | undefined | null;
376 componentDidUpdate(prevProps: TextInputProps, prevState: State): void;
377 componentWillUnmount(): void;
378 private showPlaceholder;
379 private hidePlaceholder;
380 private timer?;
381 private root;
382 private showError;
383 private hideError;
384 private restoreLabel;
385 private minimizeLabel;
386 private onLeftAffixLayoutChange;
387 private onRightAffixLayoutChange;
388 private handleFocus;
389 private handleBlur;
390 private handleChangeText;
391 private handleLayoutAnimatedText;
392 forceFocus: () => void | undefined;
393 /**
394 * @internal
395 */
396 setNativeProps(args: Object): void | null | undefined;
397 /**
398 * Returns `true` if the input is currently focused, `false` otherwise.
399 */
400 isFocused(): boolean | null | undefined;
401 /**
402 * Removes all text from the TextInput.
403 */
404 clear(): void | null | undefined;
405 /**
406 * Focuses the input.
407 */
408 focus(): void | null | undefined;
409 /**
410 * Removes focus from the input.
411 */
412 blur(): void | null | undefined;
413 render(): JSX.Element;
414}
415declare const _default: (React.ComponentClass<Pick<TextInputProps, "ref" | "label" | "style" | "pointerEvents" | "allowFontScaling" | "numberOfLines" | "onLayout" | "testID" | "nativeID" | "maxFontSizeMultiplier" | "selectionColor" | "textBreakStrategy" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "key" | "hitSlop" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "render" | "left" | "right" | "disabled" | "onBlur" | "onFocus" | "multiline" | "value" | "mode" | "error" | "placeholder" | "textAlign" | "textAlignVertical" | "onContentSizeChange" | "onScroll" | "scrollEnabled" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "defaultValue" | "editable" | "keyboardType" | "maxLength" | "onChange" | "onChangeText" | "onEndEditing" | "onSelectionChange" | "onSubmitEditing" | "onTextInput" | "onKeyPress" | "placeholderTextColor" | "returnKeyType" | "secureTextEntry" | "selectTextOnFocus" | "selection" | "inputAccessoryViewID" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "spellCheck" | "textContentType" | "autoCompleteType" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus" | "underlineColor" | "outlineColor" | "dense"> & {
416 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
417}, any> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<(React.ComponentClass<TextInputProps, any> & typeof TextInput) | (React.FunctionComponent<TextInputProps> & typeof TextInput), {}>) | (React.FunctionComponent<Pick<TextInputProps, "ref" | "label" | "style" | "pointerEvents" | "allowFontScaling" | "numberOfLines" | "onLayout" | "testID" | "nativeID" | "maxFontSizeMultiplier" | "selectionColor" | "textBreakStrategy" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "key" | "hitSlop" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "render" | "left" | "right" | "disabled" | "onBlur" | "onFocus" | "multiline" | "value" | "mode" | "error" | "placeholder" | "textAlign" | "textAlignVertical" | "onContentSizeChange" | "onScroll" | "scrollEnabled" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "defaultValue" | "editable" | "keyboardType" | "maxLength" | "onChange" | "onChangeText" | "onEndEditing" | "onSelectionChange" | "onSubmitEditing" | "onTextInput" | "onKeyPress" | "placeholderTextColor" | "returnKeyType" | "secureTextEntry" | "selectTextOnFocus" | "selection" | "inputAccessoryViewID" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "spellCheck" | "textContentType" | "autoCompleteType" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus" | "underlineColor" | "outlineColor" | "dense"> & {
418 theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
419}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<(React.ComponentClass<TextInputProps, any> & typeof TextInput) | (React.FunctionComponent<TextInputProps> & typeof TextInput), {}>);
420export default _default;