InputProps
@chelseaapps/react-native-elements / Exports / InputProps
Interface: InputProps
Hierarchy
InputElementProps↳
InputProps
Table of contents
Properties
accessibilityActions
accessibilityElementsHidden
accessibilityHint
accessibilityIgnoresInvertColors
accessibilityLabel
accessibilityLiveRegion
accessibilityRole
accessibilityState
accessibilityValue
accessibilityViewIsModal
accessible
allowFontScaling
autoCapitalize
autoComplete
autoCorrect
autoFocus
bgColor
blurOnSubmit
borderColor
caretHidden
children
clearButtonMode
clearTextOnFocus
collapsable
contextMenuHidden
control
dataDetectorTypes
defaultValue
disableFullscreenUI
editable
enablesReturnKeyAutomatically
error
errorColor
focusable
hasTVPreferredFocus
hitSlop
importantForAccessibility
importantForAutofill
infoText
infoTextColor
inlineImageLeft
inlineImagePadding
inputAccessoryViewID
isTVSelectable
keyboardAppearance
keyboardType
label
labelColor
labelStyle
maxFontSizeMultiplier
maxLength
multiline
name
nativeID
needsOffscreenAlphaCompositing
numberOfLines
onAccessibilityAction
onAccessibilityEscape
onAccessibilityTap
onBlur
onChange
onChangeText
onContentSizeChange
onEndEditing
onFocus
onKeyPress
onLayout
onMagicTap
onMoveShouldSetResponder
onMoveShouldSetResponderCapture
onPressIn
onPressOut
onResponderEnd
onResponderGrant
onResponderMove
onResponderReject
onResponderRelease
onResponderStart
onResponderTerminate
onResponderTerminationRequest
onScroll
onSelectionChange
onStartShouldSetResponder
onStartShouldSetResponderCapture
onTextInput
onTouchCancel
onTouchEnd
onTouchEndCapture
onTouchMove
onTouchStart
passwordRules
placeholder
placeholderTextColor
pointerEvents
rejectResponderTermination
removeClippedSubviews
renderToHardwareTextureAndroid
returnKeyLabel
returnKeyType
scrollEnabled
secureTextEntry
selectTextOnFocus
selection
selectionColor
selectionState
shouldRasterizeIOS
showSoftInputOnFocus
spellCheck
style
testID
textAlign
textAlignVertical
textBreakStrategy
textColor
textContentType
textEntryStyle
tvParallaxMagnification
tvParallaxProperties
tvParallaxShiftDistanceX
tvParallaxShiftDistanceY
tvParallaxTiltAngle
underlineColorAndroid
validation
value
Methods
onSubmitEditing
Properties
accessibilityActions
• Optional accessibilityActions: readonly Readonly<Object>[]
Provides an array of custom actions available for accessibility.
Inherited from
InputElementProps.accessibilityActions
Defined in
node_modules/@types/react-native/index.d.ts:2265
accessibilityElementsHidden
• Optional accessibilityElementsHidden: boolean
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden to the screen reader.
platform ios
Inherited from
InputElementProps.accessibilityElementsHidden
Defined in
node_modules/@types/react-native/index.d.ts:2440
accessibilityHint
• Optional accessibilityHint: string
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label.
Inherited from
InputElementProps.accessibilityHint
Defined in
node_modules/@types/react-native/index.d.ts:2284
accessibilityIgnoresInvertColors
• Optional accessibilityIgnoresInvertColors: boolean
https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios
platform ios
Inherited from
InputElementProps.accessibilityIgnoresInvertColors
Defined in
node_modules/@types/react-native/index.d.ts:2470
accessibilityLabel
• Optional accessibilityLabel: string
Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
Inherited from
InputElementProps.accessibilityLabel
Defined in
node_modules/@types/react-native/index.d.ts:2271
accessibilityLiveRegion
• Optional accessibilityLiveRegion: "none" | "polite" | "assertive"
Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only. See http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion for references.
platform android
Inherited from
InputElementProps.accessibilityLiveRegion
Defined in
node_modules/@types/react-native/index.d.ts:2418
accessibilityRole
• Optional accessibilityRole: AccessibilityRole
Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on.
Inherited from
InputElementProps.accessibilityRole
Defined in
node_modules/@types/react-native/index.d.ts:2276
accessibilityState
• Optional accessibilityState: AccessibilityState
Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on.
Inherited from
InputElementProps.accessibilityState
Defined in
node_modules/@types/react-native/index.d.ts:2280
accessibilityValue
• Optional accessibilityValue: AccessibilityValue
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
Inherited from
InputElementProps.accessibilityValue
Defined in
node_modules/@types/react-native/index.d.ts:2289
accessibilityViewIsModal
• Optional accessibilityViewIsModal: boolean
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
platform ios
Inherited from
InputElementProps.accessibilityViewIsModal
Defined in
node_modules/@types/react-native/index.d.ts:2446
accessible
• Optional accessible: boolean
When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.
Inherited from
InputElementProps.accessible
Defined in
node_modules/@types/react-native/index.d.ts:2260
allowFontScaling
• Optional allowFontScaling: boolean
Specifies whether fonts should scale to respect Text Size accessibility settings. The default is true.
Inherited from
InputElementProps.allowFontScaling
Defined in
node_modules/@types/react-native/index.d.ts:1503
autoCapitalize
• Optional autoCapitalize: "none" | "sentences" | "words" | "characters"
Can tell TextInput to automatically capitalize certain characters. characters: all characters, words: first letter of each word sentences: first letter of each sentence (default) none: don't auto capitalize anything
https://reactnative.dev/docs/textinput#autocapitalize
Inherited from
InputElementProps.autoCapitalize
Defined in
node_modules/@types/react-native/index.d.ts:1514
autoComplete
• Optional autoComplete: "name" | "username" | "password" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-number" | "email" | "postal-code" | "street-address" | "tel" | "off"
Determines which content to suggest on auto complete, e.g.username. To disable auto complete, use off.
Android Only
The following values work on Android only:
usernamepasswordemailnametelstreet-addresspostal-codecc-numbercc-csccc-expcc-exp-monthcc-exp-yearoff
Inherited from
InputElementProps.autoComplete
Defined in
node_modules/@types/react-native/index.d.ts:1320
autoCorrect
• Optional autoCorrect: boolean
If false, disables auto-correct. The default value is true.
Inherited from
InputElementProps.autoCorrect
Defined in
node_modules/@types/react-native/index.d.ts:1520
autoFocus
• Optional autoFocus: boolean
If true, focuses the input on componentDidMount. The default value is false.
Inherited from
InputElementProps.autoFocus
Defined in
node_modules/@types/react-native/index.d.ts:1526
bgColor
• Optional bgColor: string
Text entry background color
Inherited from
InputElementProps.bgColor
Defined in
blurOnSubmit
• Optional blurOnSubmit: boolean
If true, the text field will blur when submitted. The default value is true.
Inherited from
InputElementProps.blurOnSubmit
Defined in
node_modules/@types/react-native/index.d.ts:1532
borderColor
• Optional borderColor: string
Text entry border color
Inherited from
InputElementProps.borderColor
Defined in
caretHidden
• Optional caretHidden: boolean
If true, caret is hidden. The default value is false.
Inherited from
InputElementProps.caretHidden
Defined in
node_modules/@types/react-native/index.d.ts:1537
children
• Optional children: ReactNode
Inherited from
InputElementProps.children
Defined in
node_modules/@types/react-native/index.d.ts:2482
clearButtonMode
• Optional clearButtonMode: "never" | "while-editing" | "unless-editing" | "always"
enum('never', 'while-editing', 'unless-editing', 'always') When the clear button should appear on the right side of the text view
Inherited from
InputElementProps.clearButtonMode
Defined in
node_modules/@types/react-native/index.d.ts:1150
clearTextOnFocus
• Optional clearTextOnFocus: boolean
If true, clears the text field automatically when editing begins
Inherited from
InputElementProps.clearTextOnFocus
Defined in
node_modules/@types/react-native/index.d.ts:1155
collapsable
• Optional collapsable: boolean
Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from the native hierarchy as an optimization. Set this property to false to disable this optimization and ensure that this View exists in the native view hierarchy.
Inherited from
InputElementProps.collapsable
Defined in
node_modules/@types/react-native/index.d.ts:2213
contextMenuHidden
• Optional contextMenuHidden: boolean
If true, context menu is hidden. The default value is false.
Inherited from
InputElementProps.contextMenuHidden
Defined in
node_modules/@types/react-native/index.d.ts:1542
control
• Optional control: Control<any, object>
React hook form control
Inherited from
InputElementProps.control
Defined in
dataDetectorTypes
• Optional dataDetectorTypes: DataDetectorTypes | DataDetectorTypes[]
Determines the types of data converted to clickable URLs in the text input. Only valid if multiline={true} and editable={false}. By default no data types are detected.
You can provide one type or an array of many types.
Possible values for dataDetectorTypes are:
'phoneNumber''link''address''calendarEvent''none''all'
Inherited from
InputElementProps.dataDetectorTypes
Defined in
node_modules/@types/react-native/index.d.ts:1173
defaultValue
• Optional defaultValue: string
Pre-defined value
Inherited from
InputElementProps.defaultValue
Defined in
disableFullscreenUI
• Optional disableFullscreenUI: boolean
When false, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When true, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to false.
Inherited from
InputElementProps.disableFullscreenUI
Defined in
node_modules/@types/react-native/index.d.ts:1359
editable
• Optional editable: boolean
If false, text is not editable. The default value is true.
Inherited from
InputElementProps.editable
Defined in
node_modules/@types/react-native/index.d.ts:1554
enablesReturnKeyAutomatically
• Optional enablesReturnKeyAutomatically: boolean
If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false.
Inherited from
InputElementProps.enablesReturnKeyAutomatically
Defined in
node_modules/@types/react-native/index.d.ts:1179
error
• Optional error: FieldError
React hook form error
Inherited from
InputElementProps.error
Defined in
errorColor
• Optional errorColor: string
Error text color
Inherited from
InputElementProps.errorColor
Defined in
focusable
• Optional focusable: boolean
Whether this View should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.
Inherited from
InputElementProps.focusable
Defined in
node_modules/@types/react-native/index.d.ts:2243
hasTVPreferredFocus
• Optional hasTVPreferredFocus: boolean
(Apple TV only) May be set to true to force the Apple TV focus engine to move focus to this view.
platform ios
Inherited from
InputElementProps.hasTVPreferredFocus
Defined in
node_modules/@types/react-native/index.d.ts:2155
hitSlop
• Optional hitSlop: Insets
This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets that are at least 30 - 40 points/density-independent pixels. If a Touchable view has a height of 20 the touchable height can be extended to 40 with hitSlop={{top: 10, bottom: 10, left: 0, right: 0}} NOTE The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
Inherited from
InputElementProps.hitSlop
Defined in
node_modules/@types/react-native/index.d.ts:2493
importantForAccessibility
• Optional importantForAccessibility: "auto" | "yes" | "no" | "no-hide-descendants"
Controls how view is important for accessibility which is if it fires accessibility events and if it is reported to accessibility services that query the screen. Works for Android only. See http://developer.android.com/reference/android/R.attr.html#importantForAccessibility for references.
Possible values: 'auto' - The system determines whether the view is important for accessibility - default (recommended). 'yes' - The view is important for accessibility. 'no' - The view is not important for accessibility. 'no-hide-descendants' - The view is not important for accessibility, nor are any of its descendant views.
Inherited from
InputElementProps.importantForAccessibility
Defined in
node_modules/@types/react-native/index.d.ts:2431
importantForAutofill
• Optional importantForAutofill: "auto" | "yes" | "no" | "noExcludeDescendants" | "yesExcludeDescendants"
Determines whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Defaults to auto. To disable auto complete, use off.
Android Only
The following values work on Android only:
auto- let Android decideno- not important for autofillnoExcludeDescendants- this view and its children aren't important for autofillyes- is important for autofillyesExcludeDescendants- this view is important for autofill but its children aren't
Inherited from
InputElementProps.importantForAutofill
Defined in
node_modules/@types/react-native/index.d.ts:1351
infoText
• Optional infoText: string
Small text between input container and input error
Inherited from
InputElementProps.infoText
Defined in
infoTextColor
• Optional infoTextColor: string
Text between error and container color
Inherited from
InputElementProps.infoTextColor
Defined in
inlineImageLeft
• Optional inlineImageLeft: string
If defined, the provided image resource will be rendered on the left.
Inherited from
InputElementProps.inlineImageLeft
Defined in
node_modules/@types/react-native/index.d.ts:1364
inlineImagePadding
• Optional inlineImagePadding: number
Padding between the inline image, if any, and the text input itself.
Inherited from
InputElementProps.inlineImagePadding
Defined in
node_modules/@types/react-native/index.d.ts:1369
inputAccessoryViewID
• Optional inputAccessoryViewID: string
Used to connect to an InputAccessoryView. Not part of react-natives documentation, but present in examples and code. See https://reactnative.dev/docs/inputaccessoryview for more information.
Inherited from
InputElementProps.inputAccessoryViewID
Defined in
node_modules/@types/react-native/index.d.ts:1717
isTVSelectable
• Optional isTVSelectable: boolean
(Apple TV only) When set to true, this view will be focusable and navigable using the Apple TV remote.
platform ios
Inherited from
InputElementProps.isTVSelectable
Defined in
node_modules/@types/react-native/index.d.ts:2148
keyboardAppearance
• Optional keyboardAppearance: "default" | "light" | "dark"
Determines the color of the keyboard.
Inherited from
InputElementProps.keyboardAppearance
Defined in
node_modules/@types/react-native/index.d.ts:1184
keyboardType
• Optional keyboardType: KeyboardTypeOptions
enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') Determines which keyboard to open, e.g.numeric. The following values work across platforms: - default - numeric - email-address - phone-pad The following values work on iOS: - ascii-capable - numbers-and-punctuation - url - number-pad - name-phone-pad - decimal-pad - twitter - web-search The following values work on Android: - visible-password
Inherited from
InputElementProps.keyboardType
Defined in
node_modules/@types/react-native/index.d.ts:1564
label
• Optional label: string
Small text above the value
Inherited from
InputElementProps.label
Defined in
labelColor
• Optional labelColor: string
Small text above value color
Inherited from
InputElementProps.labelColor
Defined in
labelStyle
• Optional labelStyle: StyleProp<TextStyle>
Small Txt above value styles
Inherited from
InputElementProps.labelStyle
Defined in
maxFontSizeMultiplier
• Optional maxFontSizeMultiplier: null | number
Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values:
null/undefined (default): inherit from the parent node or the global default (0)
0: no max, ignore parent/global default
= 1: sets the maxFontSizeMultiplier of this node to this value
Inherited from
InputElementProps.maxFontSizeMultiplier
Defined in
node_modules/@types/react-native/index.d.ts:1734
maxLength
• Optional maxLength: number
Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.
Inherited from
InputElementProps.maxLength
Defined in
node_modules/@types/react-native/index.d.ts:1570
multiline
• Optional multiline: boolean
If true, the text input can be multiple lines. The default value is false.
Inherited from
InputElementProps.multiline
Defined in
node_modules/@types/react-native/index.d.ts:1575
name
• Optional name: string
React hook form name
Inherited from
InputElementProps.name
Defined in
nativeID
• Optional nativeID: string
Used to reference react managed views from native code.
Inherited from
InputElementProps.nativeID
Defined in
node_modules/@types/react-native/index.d.ts:2545
needsOffscreenAlphaCompositing
• Optional needsOffscreenAlphaCompositing: boolean
Whether this view needs to rendered offscreen and composited with an alpha in order to preserve 100% correct colors and blending behavior. The default (false) falls back to drawing the component and its children with an alpha applied to the paint used to draw each element instead of rendering the full component offscreen and compositing it back with an alpha value. This default may be noticeable and undesired in the case where the View you are setting an opacity on has multiple overlapping elements (e.g. multiple overlapping Views, or text and a background).
Rendering offscreen to preserve correct alpha behavior is extremely expensive and hard to debug for non-native developers, which is why it is not turned on by default. If you do need to enable this property for an animation, consider combining it with renderToHardwareTextureAndroid if the view contents are static (i.e. it doesn't need to be redrawn each frame). If that property is enabled, this View will be rendered off-screen once, saved in a hardware texture, and then composited onto the screen with an alpha each frame without having to switch rendering targets on the GPU.
Inherited from
InputElementProps.needsOffscreenAlphaCompositing
Defined in
node_modules/@types/react-native/index.d.ts:2229
numberOfLines
• Optional numberOfLines: number
Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines.
Inherited from
InputElementProps.numberOfLines
Defined in
node_modules/@types/react-native/index.d.ts:1375
onAccessibilityAction
• Optional onAccessibilityAction: (event: AccessibilityActionEvent) => void
Type declaration
â–¸ (event): void
When accessible is true, the system will try to invoke this function when the user performs an accessibility custom action.
Parameters
event
AccessibilityActionEvent
Returns
void
Inherited from
InputElementProps.onAccessibilityAction
Defined in
node_modules/@types/react-native/index.d.ts:2294
onAccessibilityEscape
• Optional onAccessibilityEscape: () => void
Type declaration
â–¸ (): void
When accessibile is true, the system will invoke this function when the user performs the escape gesture (scrub with two fingers).
platform ios
Returns
void
Inherited from
InputElementProps.onAccessibilityEscape
Defined in
node_modules/@types/react-native/index.d.ts:2452
onAccessibilityTap
• Optional onAccessibilityTap: () => void
Type declaration
â–¸ (): void
When accessible is true, the system will try to invoke this function when the user performs accessibility tap gesture.
platform ios
Returns
void
Inherited from
InputElementProps.onAccessibilityTap
Defined in
node_modules/@types/react-native/index.d.ts:2458
onBlur
• Optional onBlur: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void
Type declaration
â–¸ (e): void
Callback that is called when the text input is blurred
Parameters
e
NativeSyntheticEvent<TextInputFocusEventData>
Returns
void
Inherited from
InputElementProps.onBlur
Defined in
node_modules/@types/react-native/index.d.ts:1580
onChange
• Optional onChange: (e: NativeSyntheticEvent<TextInputChangeEventData>) => void
Type declaration
â–¸ (e): void
Callback that is called when the text input's text changes.
Parameters
e
NativeSyntheticEvent<TextInputChangeEventData>
Returns
void
Inherited from
InputElementProps.onChange
Defined in
node_modules/@types/react-native/index.d.ts:1585
onChangeText
• Optional onChangeText: (text: string) => void
Type declaration
â–¸ (text): void
Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.
Parameters
text
string
Returns
void
Inherited from
InputElementProps.onChangeText
Defined in
node_modules/@types/react-native/index.d.ts:1591
onContentSizeChange
• Optional onContentSizeChange: (e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => void
Type declaration
â–¸ (e): void
Callback that is called when the text input's content size changes. This will be called with { nativeEvent: { contentSize: { width, height } } }.
Only called for multiline text inputs.
Parameters
e
NativeSyntheticEvent<TextInputContentSizeChangeEventData>
Returns
void
Inherited from
InputElementProps.onContentSizeChange
Defined in
node_modules/@types/react-native/index.d.ts:1600
onEndEditing
• Optional onEndEditing: (e: NativeSyntheticEvent<TextInputEndEditingEventData>) => void
Type declaration
â–¸ (e): void
Callback that is called when text input ends.
Parameters
e
NativeSyntheticEvent<TextInputEndEditingEventData>
Returns
void
Inherited from
InputElementProps.onEndEditing
Defined in
node_modules/@types/react-native/index.d.ts:1605
onFocus
• Optional onFocus: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void
Type declaration
â–¸ (e): void
Callback that is called when the text input is focused
Parameters
e
NativeSyntheticEvent<TextInputFocusEventData>
Returns
void
Inherited from
InputElementProps.onFocus
Defined in
node_modules/@types/react-native/index.d.ts:1620
onKeyPress
• Optional onKeyPress: (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => void
Type declaration
â–¸ (e): void
Callback that is called when a key is pressed. This will be called with { nativeEvent: { key: keyValue } } where keyValue is 'Enter' or 'Backspace' for respective keys and the typed-in character otherwise including ' ' for space.
Fires before onChange callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.
Parameters
e
NativeSyntheticEvent<TextInputKeyPressEventData>
Returns
void
Inherited from
InputElementProps.onKeyPress
Defined in
node_modules/@types/react-native/index.d.ts:1657
onLayout
• Optional onLayout: (event: LayoutChangeEvent) => void
Type declaration
â–¸ (event): void
Invoked on mount and layout changes with
{nativeEvent: { layout: {x, y, width, height}}}.
Parameters
event
LayoutChangeEvent
Returns
void
Inherited from
InputElementProps.onLayout
Defined in
node_modules/@types/react-native/index.d.ts:2500
onMagicTap
• Optional onMagicTap: () => void
Type declaration
â–¸ (): void
When accessible is true, the system will invoke this function when the user performs the magic tap gesture.
platform ios
Returns
void
Inherited from
InputElementProps.onMagicTap
Defined in
node_modules/@types/react-native/index.d.ts:2464
onMoveShouldSetResponder
• Optional onMoveShouldSetResponder: (event: GestureResponderEvent) => boolean
Type declaration
â–¸ (event): boolean
Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsiveness?
Parameters
event
GestureResponderEvent
Returns
boolean
Inherited from
InputElementProps.onMoveShouldSetResponder
Defined in
node_modules/@types/react-native/index.d.ts:1978
onMoveShouldSetResponderCapture
• Optional onMoveShouldSetResponderCapture: (event: GestureResponderEvent) => boolean
Type declaration
â–¸ (event): boolean
onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is called first. That means that the deepest component will become responder when multiple Views return true for *ShouldSetResponder handlers. This is desirable in most cases, because it makes sure all controls and buttons are usable.
However, sometimes a parent will want to make sure that it becomes responder. This can be handled by using the capture phase. Before the responder system bubbles up from the deepest component, it will do a capture phase, firing on*ShouldSetResponderCapture. So if a parent View wants to prevent the child from becoming responder on a touch start, it should have a onStartShouldSetResponderCapture handler which returns true.
Parameters
event
GestureResponderEvent
Returns
boolean
Inherited from
InputElementProps.onMoveShouldSetResponderCapture
Defined in
node_modules/@types/react-native/index.d.ts:2054
onPressIn
• Optional onPressIn: (e: NativeSyntheticEvent<NativeTouchEvent>) => void
Type declaration
â–¸ (e): void
Callback that is called when a touch is engaged.
Parameters
e
NativeSyntheticEvent<NativeTouchEvent>
Returns
void
Inherited from
InputElementProps.onPressIn
Defined in
node_modules/@types/react-native/index.d.ts:1610
onPressOut
• Optional onPressOut: (e: NativeSyntheticEvent<NativeTouchEvent>) => void
Type declaration
â–¸ (e): void
Callback that is called when a touch is released.
Parameters
e
NativeSyntheticEvent<NativeTouchEvent>
Returns
void
Inherited from
InputElementProps.onPressOut
Defined in
node_modules/@types/react-native/index.d.ts:1615
onResponderEnd
• Optional onResponderEnd: (event: GestureResponderEvent) => void
Type declaration
â–¸ (event): void
If the View returns true and attempts to become the responder, one of the following will happen:
Parameters
event
GestureResponderEvent
Returns
void
Inherited from
InputElementProps.onResponderEnd
Defined in
node_modules/@types/react-native/index.d.ts:1984
onResponderGrant
• Optional onResponderGrant: (event: GestureResponderEvent) => void
Type declaration
â–¸ (event): void
The View is now responding for touch events. This is the time to highlight and show the user what is happening
Parameters
event
GestureResponderEvent
Returns
void
Inherited from
InputElementProps.onResponderGrant
Defined in
node_modules/@types/react-native/index.d.ts:1990
onResponderMove
• Optional onResponderMove: (event: GestureResponderEvent) => void
Type declaration
â–¸ (event): void
The user is moving their finger
Parameters
event
GestureResponderEvent
Returns
void
Inherited from
InputElementProps.onResponderMove
Defined in
node_modules/@types/react-native/index.d.ts:2004
onResponderReject
• Optional onResponderReject: (event: GestureResponderEvent) => void
Type declaration
â–¸ (event): void
Something else is the responder right now and will not release it
Parameters
event
GestureResponderEvent
Returns
void
Inherited from
InputElementProps.onResponderReject
Defined in
node_modules/@types/react-native/index.d.ts:1995
onResponderRelease
• Optional onResponderRelease: (event: GestureResponderEvent) => void
Type declaration
â–¸ (event): void
Fired at the end of the touch, ie "touchUp"
Parameters
event
GestureResponderEvent
Returns
void
Inherited from
InputElementProps.onResponderRelease
Defined in
node_modules/@types/react-native/index.d.ts:2009
onResponderStart
• Optional onResponderStart: (event: GestureResponderEvent) => void
Type declaration
â–¸ (event): void
Parameters
event
GestureResponderEvent
Returns
void
Inherited from
InputElementProps.onResponderStart
Defined in
node_modules/@types/react-native/index.d.ts:2011
onResponderTerminate
• Optional onResponderTerminate: (event: GestureResponderEvent) => void
Type declaration
â–¸ (event): void
The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationRequest, or might be taken by the OS without asking (happens with control center/ notification center on iOS)
Parameters
event
GestureResponderEvent
Returns
void
Inherited from
InputElementProps.onResponderTerminate
Defined in
node_modules/@types/react-native/index.d.ts:2024
onResponderTerminationRequest
• Optional onResponderTerminationRequest: (event: GestureResponderEvent) => boolean
Type declaration
â–¸ (event): boolean
Something else wants to become responder. Should this view release the responder? Returning true allows release
Parameters
event
GestureResponderEvent
Returns
boolean
Inherited from
InputElementProps.onResponderTerminationRequest
Defined in
node_modules/@types/react-native/index.d.ts:2017
onScroll
• Optional onScroll: (e: NativeSyntheticEvent<TextInputScrollEventData>) => void
Type declaration
â–¸ (e): void
Invoked on content scroll with { nativeEvent: { contentOffset: { x, y } } }.
May also contain other properties from ScrollEvent but on Android contentSize is not provided for performance reasons.
Parameters
e
NativeSyntheticEvent<TextInputScrollEventData>
Returns
void
Inherited from
InputElementProps.onScroll
Defined in
node_modules/@types/react-native/index.d.ts:1646
onSelectionChange
• Optional onSelectionChange: (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void
Type declaration
â–¸ (e): void
Callback that is called when the text input selection is changed.
Parameters
e
NativeSyntheticEvent<TextInputSelectionChangeEventData>
Returns
void
Inherited from
InputElementProps.onSelectionChange
Defined in
node_modules/@types/react-native/index.d.ts:1625
onStartShouldSetResponder
• Optional onStartShouldSetResponder: (event: GestureResponderEvent) => boolean
Type declaration
â–¸ (event): boolean
Does this view want to become responder on the start of a touch?
Parameters
event
GestureResponderEvent
Returns
boolean
Inherited from
InputElementProps.onStartShouldSetResponder
Defined in
node_modules/@types/react-native/index.d.ts:1973
onStartShouldSetResponderCapture
• Optional onStartShouldSetResponderCapture: (event: GestureResponderEvent) => boolean
Type declaration
â–¸ (event): boolean
onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is called first. That means that the deepest component will become responder when multiple Views return true for *ShouldSetResponder handlers. This is desirable in most cases, because it makes sure all controls and buttons are usable.
However, sometimes a parent will want to make sure that it becomes responder. This can be handled by using the capture phase. Before the responder system bubbles up from the deepest component, it will do a capture phase, firing on*ShouldSetResponderCapture. So if a parent View wants to prevent the child from becoming responder on a touch start, it should have a onStartShouldSetResponderCapture handler which returns true.
Parameters
event
GestureResponderEvent
Returns
boolean
Inherited from
InputElementProps.onStartShouldSetResponderCapture
Defined in
node_modules/@types/react-native/index.d.ts:2039
onTextInput
• Optional onTextInput: (e: NativeSyntheticEvent<TextInputTextInputEventData>) => void
Type declaration
â–¸ (e): void
Callback that is called on new text input with the argument { nativeEvent: { text, previousText, range: { start, end } } }.
This prop requires multiline={true} to be set.
Parameters
e
NativeSyntheticEvent<TextInputTextInputEventData>
Returns
void
Inherited from
InputElementProps.onTextInput
Defined in
node_modules/@types/react-native/index.d.ts:1638
onTouchCancel
• Optional onTouchCancel: (event: GestureResponderEvent) => void
Type declaration
â–¸ (event): void
Parameters
event
GestureResponderEvent
Returns
void
Inherited from
InputElementProps.onTouchCancel
Defined in
node_modules/@types/react-native/index.d.ts:557
onTouchEnd
• Optional onTouchEnd: (event: GestureResponderEvent) => void
Type declaration
â–¸ (event): void
Parameters
event
GestureResponderEvent
Returns
void
Inherited from
InputElementProps.onTouchEnd
Defined in
node_modules/@types/react-native/index.d.ts:556
onTouchEndCapture
• Optional onTouchEndCapture: (event: GestureResponderEvent) => void
Type declaration
â–¸ (event): void
Parameters
event
GestureResponderEvent
Returns
void
Inherited from
InputElementProps.onTouchEndCapture
Defined in
node_modules/@types/react-native/index.d.ts:558
onTouchMove
• Optional onTouchMove: (event: GestureResponderEvent) => void
Type declaration
â–¸ (event): void
Parameters
event
GestureResponderEvent
Returns
void
Inherited from
InputElementProps.onTouchMove
Defined in
node_modules/@types/react-native/index.d.ts:555
onTouchStart
• Optional onTouchStart: (event: GestureResponderEvent) => void
Type declaration
â–¸ (event): void
Parameters
event
GestureResponderEvent
Returns
void
Inherited from
InputElementProps.onTouchStart
Defined in
node_modules/@types/react-native/index.d.ts:554
passwordRules
• Optional passwordRules: null | string
Provide rules for your password. For example, say you want to require a password with at least eight characters consisting of a mix of uppercase and lowercase letters, at least one number, and at most two consecutive characters. "required: upper; required: lower; required: digit; max-consecutive: 2; minlength: 8;"
Inherited from
InputElementProps.passwordRules
Defined in
node_modules/@types/react-native/index.d.ts:1191
placeholder
• Optional placeholder: string
The string that will be rendered before text input has been entered
Inherited from
InputElementProps.placeholder
Defined in
node_modules/@types/react-native/index.d.ts:1662
placeholderTextColor
• Optional placeholderTextColor: ColorValue
The text color of the placeholder string
Inherited from
InputElementProps.placeholderTextColor
Defined in
node_modules/@types/react-native/index.d.ts:1667
pointerEvents
• Optional pointerEvents: "none" | "auto" | "box-none" | "box-only"
In the absence of auto property, none is much like CSS's none value. box-none is as if you had applied the CSS class:
.box-none { pointer-events: none; } .box-none * { pointer-events: all; }
box-only is the equivalent of
.box-only { pointer-events: all; } .box-only * { pointer-events: none; }
But since pointerEvents does not affect layout/appearance, and we are already deviating from the spec by adding additional modes, we opt to not include pointerEvents on style. On some platforms, we would need to implement it as a className anyways. Using style or not is an implementation detail of the platform.
Inherited from
InputElementProps.pointerEvents
Defined in
node_modules/@types/react-native/index.d.ts:2525
rejectResponderTermination
• Optional rejectResponderTermination: null | boolean
If true, allows TextInput to pass touch events to the parent component. This allows components to be swipeable from the TextInput on iOS, as is the case on Android by default. If false, TextInput always asks to handle the input (except when disabled).
Inherited from
InputElementProps.rejectResponderTermination
Defined in
node_modules/@types/react-native/index.d.ts:1199
removeClippedSubviews
• Optional removeClippedSubviews: boolean
This is a special performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).
Inherited from
InputElementProps.removeClippedSubviews
Defined in
node_modules/@types/react-native/index.d.ts:2533
renderToHardwareTextureAndroid
• Optional renderToHardwareTextureAndroid: boolean
Whether this view should render itself (and all of its children) into a single hardware texture on the GPU.
On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can just be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation.
Inherited from
InputElementProps.renderToHardwareTextureAndroid
Defined in
node_modules/@types/react-native/index.d.ts:2238
returnKeyLabel
• Optional returnKeyLabel: string
Sets the return key to the label. Use it instead of returnKeyType.
platform android
Inherited from
InputElementProps.returnKeyLabel
Defined in
node_modules/@types/react-native/index.d.ts:1381
returnKeyType
• Optional returnKeyType: ReturnKeyTypeOptions
enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') Determines how the return key should look.
Inherited from
InputElementProps.returnKeyType
Defined in
node_modules/@types/react-native/index.d.ts:1673
scrollEnabled
• Optional scrollEnabled: boolean
If false, scrolling of the text view will be disabled. The default value is true. Only works with multiline={true}
Inherited from
InputElementProps.scrollEnabled
Defined in
node_modules/@types/react-native/index.d.ts:1290
secureTextEntry
• Optional secureTextEntry: boolean
If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false.
Inherited from
InputElementProps.secureTextEntry
Defined in
node_modules/@types/react-native/index.d.ts:1679
selectTextOnFocus
• Optional selectTextOnFocus: boolean
If true, all text will automatically be selected on focus
Inherited from
InputElementProps.selectTextOnFocus
Defined in
node_modules/@types/react-native/index.d.ts:1684
selection
• Optional selection: Object
The start and end of the text input's selection. Set start and end to the same value to position the cursor.
Type declaration
end?
number
start
number
Inherited from
InputElementProps.selection
Defined in
node_modules/@types/react-native/index.d.ts:1690
selectionColor
• Optional selectionColor: string
Text entry selection color
Inherited from
InputElementProps.selectionColor
Defined in
selectionState
• Optional selectionState: DocumentSelectionState
See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document
Inherited from
InputElementProps.selectionState
Defined in
node_modules/@types/react-native/index.d.ts:1204
shouldRasterizeIOS
• Optional shouldRasterizeIOS: boolean
Whether this view should be rendered as a bitmap before compositing.
On iOS, this is useful for animations and interactions that do not modify this component's dimensions nor its children; for example, when translating the position of a static view, rasterization allows the renderer to reuse a cached bitmap of a static view and quickly composite it during each frame.
Rasterization incurs an off-screen drawing pass and the bitmap consumes memory. Test and measure when using this property.
Inherited from
InputElementProps.shouldRasterizeIOS
Defined in
node_modules/@types/react-native/index.d.ts:2204
showSoftInputOnFocus
• Optional showSoftInputOnFocus: boolean
When false, it will prevent the soft keyboard from showing when the field is focused. The default value is true
Inherited from
InputElementProps.showSoftInputOnFocus
Defined in
node_modules/@types/react-native/index.d.ts:1402
spellCheck
• Optional spellCheck: boolean
If false, disables spell-check style (i.e. red underlines). The default value is inherited from autoCorrect
Inherited from
InputElementProps.spellCheck
Defined in
node_modules/@types/react-native/index.d.ts:1209
style
• Optional style: StyleProp<ViewStyle>
View Container styles - including errors and info text
Inherited from
InputElementProps.style
Defined in
testID
• Optional testID: string
Used to locate this view in end-to-end tests
Inherited from
InputElementProps.testID
Defined in
node_modules/@types/react-native/index.d.ts:1710
textAlign
• Optional textAlign: "left" | "center" | "right"
Align the input text to the left, center, or right sides of the input field.
Inherited from
InputElementProps.textAlign
Defined in
node_modules/@types/react-native/index.d.ts:1705
textAlignVertical
• Optional textAlignVertical: "auto" | "center" | "top" | "bottom"
Vertically align text when multiline is set to true
Inherited from
InputElementProps.textAlignVertical
Defined in
node_modules/@types/react-native/index.d.ts:1397
textBreakStrategy
• Optional textBreakStrategy: "simple" | "highQuality" | "balanced"
Set text break strategy on Android API Level 23+, possible values are simple, highQuality, balanced The default value is simple.
Inherited from
InputElementProps.textBreakStrategy
Defined in
node_modules/@types/react-native/index.d.ts:1387
textColor
• Optional textColor: string
Text entry text color
Inherited from
InputElementProps.textColor
Defined in
textContentType
• Optional textContentType: "none" | "name" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "emailAddress" | "familyName" | "fullStreetAddress" | "givenName" | "jobTitle" | "location" | "middleName" | "namePrefix" | "nameSuffix" | "nickname" | "organizationName" | "postalCode" | "streetAddressLine1" | "streetAddressLine2" | "sublocality" | "telephoneNumber" | "username" | "password" | "newPassword" | "oneTimeCode"
Give the keyboard and the system information about the expected semantic meaning for the content that users enter.
For iOS 11+ you can set textContentType to username or password to enable autofill of login details from the device keychain.
For iOS 12+ newPassword can be used to indicate a new password input the user may want to save in the keychain, and oneTimeCode can be used to indicate that a field can be autofilled by a code arriving in an SMS.
To disable autofill, set textContentType to none.
Possible values for textContentType are:
'none''URL''addressCity''addressCityAndState''addressState''countryName''creditCardNumber''emailAddress''familyName''fullStreetAddress''givenName''jobTitle''location''middleName''name''namePrefix''nameSuffix''nickname''organizationName''postalCode''streetAddressLine1''streetAddressLine2''sublocality''telephoneNumber''username''password''newPassword''oneTimeCode'
Inherited from
InputElementProps.textContentType
Defined in
node_modules/@types/react-native/index.d.ts:1256
textEntryStyle
• Optional textEntryStyle: StyleProp<TextStyle>
Input value styles
Inherited from
InputElementProps.textEntryStyle
Defined in
tvParallaxMagnification
• Optional tvParallaxMagnification: number
(Apple TV only) May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus. Defaults to 1.0.
platform ios
Inherited from
InputElementProps.tvParallaxMagnification
Defined in
node_modules/@types/react-native/index.d.ts:2190
tvParallaxProperties
• Optional tvParallaxProperties: TVParallaxProperties
(Apple TV only) Object with properties to control Apple TV parallax effects.
platform ios
Inherited from
InputElementProps.tvParallaxProperties
Defined in
node_modules/@types/react-native/index.d.ts:2162
tvParallaxShiftDistanceX
• Optional tvParallaxShiftDistanceX: number
(Apple TV only) May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus. Defaults to 2.0.
platform ios
Inherited from
InputElementProps.tvParallaxShiftDistanceX
Defined in
node_modules/@types/react-native/index.d.ts:2169
tvParallaxShiftDistanceY
• Optional tvParallaxShiftDistanceY: number
(Apple TV only) May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus. Defaults to 2.0.
platform ios
Inherited from
InputElementProps.tvParallaxShiftDistanceY
Defined in
node_modules/@types/react-native/index.d.ts:2176
tvParallaxTiltAngle
• Optional tvParallaxTiltAngle: number
(Apple TV only) May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus. Defaults to 0.05.
platform ios
Inherited from
InputElementProps.tvParallaxTiltAngle
Defined in
node_modules/@types/react-native/index.d.ts:2183
underlineColorAndroid
• Optional underlineColorAndroid: ColorValue
The color of the textInput underline.
Inherited from
InputElementProps.underlineColorAndroid
Defined in
node_modules/@types/react-native/index.d.ts:1392
validation
• Optional validation: Partial<Object>
React hook form validation
Inherited from
InputElementProps.validation
Defined in
value
• Optional value: string
The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
Inherited from
InputElementProps.value
Defined in
node_modules/@types/react-native/index.d.ts:1726
Methods
onSubmitEditing
â–¸ Optional onSubmitEditing(): void
Additional action to be performed on input submission
Returns
void
Inherited from
InputElementProps.onSubmitEditing
Defined in
Last updated
Was this helpful?