import * as React from 'react'; import { Animated, TextInput as NativeTextInput, LayoutChangeEvent, StyleProp, TextStyle } from 'react-native'; import type { RenderProps, State } from './types'; export declare type TextInputProps = React.ComponentPropsWithRef & { /** * Mode of the TextInput. * - `flat` - flat input with an underline. * - `outlined` - input with an outline. * * In `outlined` mode, the background color of the label is derived from `colors.background` in theme or the `backgroundColor` style. * This component render TextInputOutlined or TextInputFlat based on that props */ mode?: 'flat' | 'outlined'; left?: React.ReactNode; right?: React.ReactNode; /** * If true, user won't be able to interact with the component. */ disabled?: boolean; /** * The text to use for the floating label. */ label?: string; /** * Placeholder for the input. */ placeholder?: string; /** * Whether to style the TextInput with error style. */ error?: boolean; /** * Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. */ onChangeText?: Function; /** * Selection color of the input */ selectionColor?: string; /** * Underline color of the input. */ underlineColor?: string; /** * Outline color of the input. */ outlineColor?: string; /** * Sets min height with densed layout. For `TextInput` in `flat` mode * height is `64dp` or in dense layout - `52dp` with label or `40dp` without label. * For `TextInput` in `outlined` mode * height is `56dp` or in dense layout - `40dp` regardless of label. * When you apply `heigh` prop in style the `dense` prop affects only `paddingVertical` inside `TextInput` */ dense?: boolean; /** * Whether the input can have multiple lines. */ multiline?: boolean; /** * The number of lines to show in the input (Android only). */ numberOfLines?: number; /** * Callback that is called when the text input is focused. */ onFocus?: (args: any) => void; /** * Callback that is called when the text input is blurred. */ onBlur?: (args: any) => void; /** * * Callback to render a custom input component such as `react-native-text-input-mask` * instead of the default `TextInput` component from `react-native`. * * Example: * ```js * * * } * /> * ``` */ render?: (props: RenderProps) => React.ReactNode; /** * Value of the text input. */ value?: string; /** * Pass `fontSize` prop to modify the font size inside `TextInput`. * Pass `height` prop to set `TextInput` height. When `height` is passed, * `dense` prop will affect only input's `paddingVertical`. * Pass `paddingHorizontal` to modify horizontal padding. * This can be used to get MD Guidelines v1 TextInput look. */ style?: StyleProp; /** * @optional */ theme: ReactNativePaper.Theme; }; /** * A component to allow users to input text. * *
*
* *
Flat (focused)
*
*
* *
Flat (disabled)
*
*
* *
Outlined (focused)
*
*
* *
Outlined (disabled)
*
*
* * ## Usage * ```js * import * as React from 'react'; * import { TextInput } from 'react-native-paper'; * * const MyComponent = () => { * const [text, setText] = React.useState(''); * * return ( * setText(text)} * /> * ); * }; * * export default MyComponent; * ``` * * @extends TextInput props https://reactnative.dev/docs/textinput#props */ declare class TextInput extends React.Component { static Icon: { ({ name, onPress, forceTextInputFocus, color, ...rest }: Pick<(Pick & { borderless?: boolean | undefined; background?: Object | undefined; centered?: boolean | undefined; /** * Mode of the TextInput. * - `flat` - flat input with an underline. * - `outlined` - input with an outline. * * In `outlined` mode, the background color of the label is derived from `colors.background` in theme or the `backgroundColor` style. * This component render TextInputOutlined or TextInputFlat based on that props */ disabled?: boolean | undefined; onPress?: ((e: import("react-native").GestureResponderEvent) => void) | undefined; onLongPress?: ((e: import("react-native").GestureResponderEvent) => void) | undefined; rippleColor?: string | undefined; underlayColor?: string | undefined; children: React.ReactNode; style?: StyleProp; theme: ReactNativePaper.Theme; }, "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"> & { theme?: import("@callstack/react-theme-provider").$DeepPartial | undefined; }) | React.PropsWithChildren & { borderless?: boolean | undefined; background?: Object | undefined; centered?: boolean | undefined; /** * Mode of the TextInput. * - `flat` - flat input with an underline. * - `outlined` - input with an outline. * * In `outlined` mode, the background color of the label is derived from `colors.background` in theme or the `backgroundColor` style. * This component render TextInputOutlined or TextInputFlat based on that props */ disabled?: boolean | undefined; onPress?: ((e: import("react-native").GestureResponderEvent) => void) | undefined; onLongPress?: ((e: import("react-native").GestureResponderEvent) => void) | undefined; rippleColor?: string | undefined; underlayColor?: string | undefined; children: React.ReactNode; style?: StyleProp; theme: ReactNativePaper.Theme; }, "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"> & { theme?: import("@callstack/react-theme-provider").$DeepPartial | undefined; }>, "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"> & { icon: import("../Icon").IconSource; color?: string | undefined; size?: number | undefined; disabled?: boolean | undefined; animated?: boolean | undefined; accessibilityLabel?: string | undefined; onPress?: ((e: import("react-native").GestureResponderEvent) => void) | undefined; /** * If true, user won't be able to interact with the component. */ style?: StyleProp; ref?: React.RefObject | undefined; theme: ReactNativePaper.Theme; }, "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"> & { theme?: import("@callstack/react-theme-provider").$DeepPartial | undefined; }) | React.PropsWithChildren & { borderless?: boolean | undefined; background?: Object | undefined; centered?: boolean | undefined; /** * Mode of the TextInput. * - `flat` - flat input with an underline. * - `outlined` - input with an outline. * * In `outlined` mode, the background color of the label is derived from `colors.background` in theme or the `backgroundColor` style. * This component render TextInputOutlined or TextInputFlat based on that props */ disabled?: boolean | undefined; onPress?: ((e: import("react-native").GestureResponderEvent) => void) | undefined; onLongPress?: ((e: import("react-native").GestureResponderEvent) => void) | undefined; rippleColor?: string | undefined; underlayColor?: string | undefined; children: React.ReactNode; style?: StyleProp; theme: ReactNativePaper.Theme; }, "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"> & { theme?: import("@callstack/react-theme-provider").$DeepPartial | undefined; }) | React.PropsWithChildren & { borderless?: boolean | undefined; background?: Object | undefined; centered?: boolean | undefined; /** * Mode of the TextInput. * - `flat` - flat input with an underline. * - `outlined` - input with an outline. * * In `outlined` mode, the background color of the label is derived from `colors.background` in theme or the `backgroundColor` style. * This component render TextInputOutlined or TextInputFlat based on that props */ disabled?: boolean | undefined; onPress?: ((e: import("react-native").GestureResponderEvent) => void) | undefined; onLongPress?: ((e: import("react-native").GestureResponderEvent) => void) | undefined; rippleColor?: string | undefined; underlayColor?: string | undefined; children: React.ReactNode; style?: StyleProp; theme: ReactNativePaper.Theme; }, "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"> & { theme?: import("@callstack/react-theme-provider").$DeepPartial | undefined; }>, "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"> & { icon: import("../Icon").IconSource; color?: string | undefined; size?: number | undefined; disabled?: boolean | undefined; animated?: boolean | undefined; accessibilityLabel?: string | undefined; onPress?: ((e: import("react-native").GestureResponderEvent) => void) | undefined; /** * If true, user won't be able to interact with the component. */ style?: StyleProp; ref?: React.RefObject | undefined; theme: ReactNativePaper.Theme; }, "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"> & { theme?: import("@callstack/react-theme-provider").$DeepPartial | undefined; }>, "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"> & { name: import("../Icon").IconSource; onPress?: (() => void) | undefined; forceTextInputFocus?: boolean | undefined; color?: string | ((isTextInputFocused: boolean) => string | undefined) | undefined; style?: StyleProp; theme?: ReactNativePaper.Theme | undefined; }): JSX.Element; displayName: string; defaultProps: { forceTextInputFocus: boolean; }; }; static Affix: (React.ComponentClass void) | undefined; textStyle?: StyleProp; theme: ReactNativePaper.Theme; }, "text" | "onLayout" | "textStyle"> & { theme?: import("@callstack/react-theme-provider").$DeepPartial | undefined; }, any> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<(React.ComponentClass<{ text: string; onLayout?: ((event: LayoutChangeEvent) => void) | undefined; textStyle?: StyleProp; theme: ReactNativePaper.Theme; }, any> & { ({ text, textStyle: labelStyle, theme }: { text: string; onLayout?: ((event: LayoutChangeEvent) => void) | undefined; textStyle?: StyleProp; theme: ReactNativePaper.Theme; }): JSX.Element; displayName: string; }) | (React.FunctionComponent<{ text: string; onLayout?: ((event: LayoutChangeEvent) => void) | undefined; textStyle?: StyleProp; theme: ReactNativePaper.Theme; }> & { ({ text, textStyle: labelStyle, theme }: { text: string; onLayout?: ((event: LayoutChangeEvent) => void) | undefined; textStyle?: StyleProp; theme: ReactNativePaper.Theme; }): JSX.Element; displayName: string; }), {}>) | (React.FunctionComponent void) | undefined; textStyle?: StyleProp; theme: ReactNativePaper.Theme; }, "text" | "onLayout" | "textStyle"> & { theme?: import("@callstack/react-theme-provider").$DeepPartial | undefined; }> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<(React.ComponentClass<{ text: string; onLayout?: ((event: LayoutChangeEvent) => void) | undefined; textStyle?: StyleProp; theme: ReactNativePaper.Theme; }, any> & { ({ text, textStyle: labelStyle, theme }: { text: string; onLayout?: ((event: LayoutChangeEvent) => void) | undefined; textStyle?: StyleProp; theme: ReactNativePaper.Theme; }): JSX.Element; displayName: string; }) | (React.FunctionComponent<{ text: string; onLayout?: ((event: LayoutChangeEvent) => void) | undefined; textStyle?: StyleProp; theme: ReactNativePaper.Theme; }> & { ({ text, textStyle: labelStyle, theme }: { text: string; onLayout?: ((event: LayoutChangeEvent) => void) | undefined; textStyle?: StyleProp; theme: ReactNativePaper.Theme; }): JSX.Element; displayName: string; }), {}>); static defaultProps: Partial; static getDerivedStateFromProps(nextProps: TextInputProps, prevState: State): { value: string | undefined; }; validInputValue: string | undefined; state: { labeled: Animated.Value; error: Animated.Value; focused: boolean; placeholder: string; value: string | undefined; labelLayout: { measured: boolean; width: number; height: number; }; leftLayout: { width: null; height: null; }; rightLayout: { width: null; height: null; }; }; ref: NativeTextInput | undefined | null; componentDidUpdate(prevProps: TextInputProps, prevState: State): void; componentWillUnmount(): void; private showPlaceholder; private hidePlaceholder; private timer?; private root; private showError; private hideError; private restoreLabel; private minimizeLabel; private onLeftAffixLayoutChange; private onRightAffixLayoutChange; private handleFocus; private handleBlur; private handleChangeText; private handleLayoutAnimatedText; forceFocus: () => void | undefined; /** * @internal */ setNativeProps(args: Object): void | null | undefined; /** * Returns `true` if the input is currently focused, `false` otherwise. */ isFocused(): boolean | null | undefined; /** * Removes all text from the TextInput. */ clear(): void | null | undefined; /** * Focuses the input. */ focus(): void | null | undefined; /** * Removes focus from the input. */ blur(): void | null | undefined; render(): JSX.Element; } declare const _default: (React.ComponentClass & { theme?: import("@callstack/react-theme-provider").$DeepPartial | undefined; }, any> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<(React.ComponentClass & typeof TextInput) | (React.FunctionComponent & typeof TextInput), {}>) | (React.FunctionComponent & { theme?: import("@callstack/react-theme-provider").$DeepPartial | undefined; }> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<(React.ComponentClass & typeof TextInput) | (React.FunctionComponent & typeof TextInput), {}>); export default _default;