UNPKG

28.1 kBTypeScriptView Raw
1/**
2 * Copyright (c) Meta Platforms, Inc. and affiliates.
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 *
7 * @format
8 */
9
10import type * as React from 'react';
11import {Constructor} from '../../../types/private/Utilities';
12import {TimerMixin} from '../../../types/private/TimerMixin';
13import {
14 HostInstance,
15 NativeMethods,
16} from '../../../types/public/ReactNativeTypes';
17import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
18import {TextStyle} from '../../StyleSheet/StyleSheetTypes';
19import {
20 NativeSyntheticEvent,
21 NativeTouchEvent,
22 TargetedEvent,
23} from '../../Types/CoreEventTypes';
24import EventEmitter from '../../vendor/emitter/EventEmitter';
25import {AccessibilityProps} from '../View/ViewAccessibility';
26import {ViewProps} from '../View/ViewPropTypes';
27
28export type KeyboardType =
29 | 'default'
30 | 'number-pad'
31 | 'decimal-pad'
32 | 'numeric'
33 | 'email-address'
34 | 'phone-pad'
35 | 'url';
36export type KeyboardTypeIOS =
37 | 'ascii-capable'
38 | 'numbers-and-punctuation'
39 | 'name-phone-pad'
40 | 'twitter'
41 | 'web-search';
42export type KeyboardTypeAndroid = 'visible-password';
43export type KeyboardTypeOptions =
44 | KeyboardType
45 | KeyboardTypeAndroid
46 | KeyboardTypeIOS;
47
48export type InputModeOptions =
49 | 'none'
50 | 'text'
51 | 'decimal'
52 | 'numeric'
53 | 'tel'
54 | 'search'
55 | 'email'
56 | 'url';
57
58export type ReturnKeyType = 'done' | 'go' | 'next' | 'search' | 'send';
59export type ReturnKeyTypeAndroid = 'none' | 'previous';
60export type ReturnKeyTypeIOS =
61 | 'default'
62 | 'google'
63 | 'join'
64 | 'route'
65 | 'yahoo'
66 | 'emergency-call';
67
68export type ReturnKeyTypeOptions =
69 | ReturnKeyType
70 | ReturnKeyTypeAndroid
71 | ReturnKeyTypeIOS;
72
73export type EnterKeyHintTypeAndroid = 'previous';
74export type EnterKeyHintTypeIOS = 'enter';
75export type EnterKeyHintType = 'done' | 'go' | 'next' | 'search' | 'send';
76
77export type EnterKeyHintTypeOptions =
78 | EnterKeyHintType
79 | EnterKeyHintTypeAndroid
80 | EnterKeyHintTypeIOS;
81
82type DataDetectorTypes =
83 | 'phoneNumber'
84 | 'link'
85 | 'address'
86 | 'calendarEvent'
87 | 'trackingNumber'
88 | 'flightNumber'
89 | 'lookupSuggestion'
90 | 'none'
91 | 'all';
92
93export type SubmitBehavior = 'submit' | 'blurAndSubmit' | 'newline';
94
95/**
96 * DocumentSelectionState is responsible for maintaining selection information
97 * for a document.
98 *
99 * It is intended for use by AbstractTextEditor-based components for
100 * identifying the appropriate start/end positions to modify the
101 * DocumentContent, and for programmatically setting browser selection when
102 * components re-render.
103 */
104export interface DocumentSelectionState extends EventEmitter {
105 new (anchor: number, focus: number): DocumentSelectionState;
106
107 /**
108 * Apply an update to the state. If either offset value has changed,
109 * set the values and emit the `change` event. Otherwise no-op.
110 *
111 */
112 update(anchor: number, focus: number): void;
113
114 /**
115 * Given a max text length, constrain our selection offsets to ensure
116 * that the selection remains strictly within the text range.
117 *
118 */
119 constrainLength(maxLength: number): void;
120
121 focus(): void;
122 blur(): void;
123 hasFocus(): boolean;
124 isCollapsed(): boolean;
125 isBackward(): boolean;
126
127 getAnchorOffset(): number;
128 getFocusOffset(): number;
129 getStartOffset(): number;
130 getEndOffset(): number;
131 overlaps(start: number, end: number): boolean;
132}
133
134/**
135 * IOS Specific properties for TextInput
136 * @see https://reactnative.dev/docs/textinput#props
137 */
138export interface TextInputIOSProps {
139 /**
140 * If true, the keyboard shortcuts (undo/redo and copy buttons) are disabled. The default value is false.
141 */
142 disableKeyboardShortcuts?: boolean | undefined;
143
144 /**
145 * enum('never', 'while-editing', 'unless-editing', 'always')
146 * When the clear button should appear on the right side of the text view
147 */
148 clearButtonMode?:
149 | 'never'
150 | 'while-editing'
151 | 'unless-editing'
152 | 'always'
153 | undefined;
154
155 /**
156 * If true, clears the text field automatically when editing begins
157 */
158 clearTextOnFocus?: boolean | undefined;
159
160 /**
161 * Determines the types of data converted to clickable URLs in the text input.
162 * Only valid if `multiline={true}` and `editable={false}`.
163 * By default no data types are detected.
164 *
165 * You can provide one type or an array of many types.
166 *
167 * Possible values for `dataDetectorTypes` are:
168 *
169 * - `'phoneNumber'`
170 * - `'link'`
171 * - `'address'`
172 * - `'calendarEvent'`
173 * - `'none'`
174 * - `'all'`
175 */
176 dataDetectorTypes?: DataDetectorTypes | DataDetectorTypes[] | undefined;
177
178 /**
179 * If true, the keyboard disables the return key when there is no text and automatically enables it when there is text.
180 * The default value is false.
181 */
182 enablesReturnKeyAutomatically?: boolean | undefined;
183
184 /**
185 * Determines the color of the keyboard.
186 */
187 keyboardAppearance?: 'default' | 'light' | 'dark' | undefined;
188
189 /**
190 * Provide rules for your password.
191 * 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.
192 * "required: upper; required: lower; required: digit; max-consecutive: 2; minlength: 8;"
193 */
194 passwordRules?: string | null | undefined;
195
196 /**
197 * If `true`, allows TextInput to pass touch events to the parent component.
198 * This allows components to be swipeable from the TextInput on iOS,
199 * as is the case on Android by default.
200 * If `false`, TextInput always asks to handle the input (except when disabled).
201 */
202 rejectResponderTermination?: boolean | null | undefined;
203
204 /**
205 * See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document
206 */
207 selectionState?: DocumentSelectionState | undefined;
208
209 /**
210 * If false, disables spell-check style (i.e. red underlines). The default value is inherited from autoCorrect
211 */
212 spellCheck?: boolean | undefined;
213
214 /**
215 * Give the keyboard and the system information about the expected
216 * semantic meaning for the content that users enter.
217 *
218 * To disable autofill, set textContentType to `none`.
219 *
220 * Possible values for `textContentType` are:
221 *
222 * - `'none'`
223 * - `'URL'`
224 * - `'addressCity'`
225 * - `'addressCityAndState'`
226 * - `'addressState'`
227 * - `'countryName'`
228 * - `'creditCardNumber'`
229 * - `'creditCardExpiration'` (iOS 17+)
230 * - `'creditCardExpirationMonth'` (iOS 17+)
231 * - `'creditCardExpirationYear'` (iOS 17+)
232 * - `'creditCardSecurityCode'` (iOS 17+)
233 * - `'creditCardType'` (iOS 17+)
234 * - `'creditCardName'` (iOS 17+)
235 * - `'creditCardGivenName'` (iOS 17+)
236 * - `'creditCardMiddleName'` (iOS 17+)
237 * - `'creditCardFamilyName'` (iOS 17+)
238 * - `'emailAddress'`
239 * - `'familyName'`
240 * - `'fullStreetAddress'`
241 * - `'givenName'`
242 * - `'jobTitle'`
243 * - `'location'`
244 * - `'middleName'`
245 * - `'name'`
246 * - `'namePrefix'`
247 * - `'nameSuffix'`
248 * - `'nickname'`
249 * - `'organizationName'`
250 * - `'postalCode'`
251 * - `'streetAddressLine1'`
252 * - `'streetAddressLine2'`
253 * - `'sublocality'`
254 * - `'telephoneNumber'`
255 * - `'username'`
256 * - `'password'`
257 * - `'newPassword'`
258 * - `'oneTimeCode'`
259 * - `'birthdate'` (iOS 17+)
260 * - `'birthdateDay'` (iOS 17+)
261 * - `'birthdateMonth'` (iOS 17+)
262 * - `'birthdateYear'` (iOS 17+)
263 * - `'cellularEID'` (iOS 17.4+)
264 * - `'cellularIMEI'` (iOS 17.4+)
265 * - `'dateTime'` (iOS 15+)
266 * - `'flightNumber'` (iOS 15+)
267 * - `'shipmentTrackingNumber'` (iOS 15+)
268 *
269 */
270 textContentType?:
271 | 'none'
272 | 'URL'
273 | 'addressCity'
274 | 'addressCityAndState'
275 | 'addressState'
276 | 'countryName'
277 | 'creditCardNumber'
278 | 'creditCardExpiration'
279 | 'creditCardExpirationMonth'
280 | 'creditCardExpirationYear'
281 | 'creditCardSecurityCode'
282 | 'creditCardType'
283 | 'creditCardName'
284 | 'creditCardGivenName'
285 | 'creditCardMiddleName'
286 | 'creditCardFamilyName'
287 | 'emailAddress'
288 | 'familyName'
289 | 'fullStreetAddress'
290 | 'givenName'
291 | 'jobTitle'
292 | 'location'
293 | 'middleName'
294 | 'name'
295 | 'namePrefix'
296 | 'nameSuffix'
297 | 'nickname'
298 | 'organizationName'
299 | 'postalCode'
300 | 'streetAddressLine1'
301 | 'streetAddressLine2'
302 | 'sublocality'
303 | 'telephoneNumber'
304 | 'username'
305 | 'password'
306 | 'newPassword'
307 | 'oneTimeCode'
308 | 'birthdate'
309 | 'birthdateDay'
310 | 'birthdateMonth'
311 | 'birthdateYear'
312 | 'cellularEID'
313 | 'cellularIMEI'
314 | 'dateTime'
315 | 'flightNumber'
316 | 'shipmentTrackingNumber'
317 | undefined;
318
319 /**
320 * If false, scrolling of the text view will be disabled. The default value is true. Only works with multiline={true}
321 */
322 scrollEnabled?: boolean | undefined;
323
324 /**
325 * Set line break strategy on iOS.
326 */
327 lineBreakStrategyIOS?:
328 | 'none'
329 | 'standard'
330 | 'hangul-word'
331 | 'push-out'
332 | undefined;
333
334 /**
335 * Set line break mode on iOS.
336 * @platform ios
337 */
338 lineBreakModeIOS?:
339 | 'wordWrapping'
340 | 'char'
341 | 'clip'
342 | 'head'
343 | 'middle'
344 | 'tail'
345 | undefined;
346
347 /**
348 * If `false`, the iOS system will not insert an extra space after a paste operation
349 * neither delete one or two spaces after a cut or delete operation.
350 *
351 * The default value is `true`.
352 */
353 smartInsertDelete?: boolean | undefined;
354}
355
356/**
357 * Android Specific properties for TextInput
358 * @see https://reactnative.dev/docs/textinput#props
359 */
360export interface TextInputAndroidProps {
361 /**
362 * When provided it will set the color of the cursor (or "caret") in the component.
363 * Unlike the behavior of `selectionColor` the cursor color will be set independently
364 * from the color of the text selection box.
365 * @platform android
366 */
367 cursorColor?: ColorValue | null | undefined;
368
369 /**
370 * When provided it will set the color of the selection handles when highlighting text.
371 * Unlike the behavior of `selectionColor` the handle color will be set independently
372 * from the color of the text selection box.
373 * @platform android
374 */
375 selectionHandleColor?: ColorValue | null | undefined;
376
377 /**
378 * Determines whether the individual fields in your app should be included in a
379 * view structure for autofill purposes on Android API Level 26+. Defaults to auto.
380 * To disable auto complete, use `off`.
381 *
382 * *Android Only*
383 *
384 * The following values work on Android only:
385 *
386 * - `auto` - let Android decide
387 * - `no` - not important for autofill
388 * - `noExcludeDescendants` - this view and its children aren't important for autofill
389 * - `yes` - is important for autofill
390 * - `yesExcludeDescendants` - this view is important for autofill but its children aren't
391 */
392 importantForAutofill?:
393 | 'auto'
394 | 'no'
395 | 'noExcludeDescendants'
396 | 'yes'
397 | 'yesExcludeDescendants'
398 | undefined;
399
400 /**
401 * When false, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone),
402 * the OS may choose to have the user edit the text inside of a full screen text input mode.
403 * When true, this feature is disabled and users will always edit the text directly inside of the text input.
404 * Defaults to false.
405 */
406 disableFullscreenUI?: boolean | undefined;
407
408 /**
409 * If defined, the provided image resource will be rendered on the left.
410 */
411 inlineImageLeft?: string | undefined;
412
413 /**
414 * Padding between the inline image, if any, and the text input itself.
415 */
416 inlineImagePadding?: number | undefined;
417
418 /**
419 * Sets the number of lines for a TextInput.
420 * Use it with multiline set to true to be able to fill the lines.
421 */
422 numberOfLines?: number | undefined;
423
424 /**
425 * Sets the return key to the label. Use it instead of `returnKeyType`.
426 * @platform android
427 */
428 returnKeyLabel?: string | undefined;
429
430 /**
431 * Set text break strategy on Android API Level 23+, possible values are simple, highQuality, balanced
432 * The default value is simple.
433 */
434 textBreakStrategy?: 'simple' | 'highQuality' | 'balanced' | undefined;
435
436 /**
437 * The color of the textInput underline.
438 */
439 underlineColorAndroid?: ColorValue | undefined;
440
441 /**
442 * Vertically align text when `multiline` is set to true
443 */
444 textAlignVertical?: 'auto' | 'top' | 'bottom' | 'center' | undefined;
445
446 /**
447 * When false, it will prevent the soft keyboard from showing when the field is focused. The default value is true
448 */
449 showSoftInputOnFocus?: boolean | undefined;
450
451 /**
452 * Vertically align text when `multiline` is set to true
453 */
454 verticalAlign?: 'auto' | 'top' | 'bottom' | 'middle' | undefined;
455}
456
457/**
458 * @see TextInputProps.onFocus
459 */
460export interface TextInputFocusEventData extends TargetedEvent {
461 text: string;
462 eventCount: number;
463}
464
465/**
466 * @see TextInputProps.onScroll
467 */
468export interface TextInputScrollEventData {
469 contentOffset: {x: number; y: number};
470}
471
472/**
473 * @see TextInputProps.onSelectionChange
474 */
475export interface TextInputSelectionChangeEventData extends TargetedEvent {
476 selection: {
477 start: number;
478 end: number;
479 };
480}
481
482/**
483 * @see TextInputProps.onKeyPress
484 */
485export interface TextInputKeyPressEventData {
486 key: string;
487}
488
489/**
490 * @see TextInputProps.onChange
491 */
492export interface TextInputChangeEventData extends TargetedEvent {
493 eventCount: number;
494 text: string;
495}
496
497/**
498 * @see TextInputProps.onContentSizeChange
499 */
500export interface TextInputContentSizeChangeEventData {
501 contentSize: {width: number; height: number};
502}
503
504/**
505 * @see TextInputProps.onEndEditing
506 */
507export interface TextInputEndEditingEventData {
508 text: string;
509}
510
511/**
512 * @see TextInputProps.onSubmitEditing
513 */
514export interface TextInputSubmitEditingEventData {
515 text: string;
516}
517
518/**
519 * @see https://reactnative.dev/docs/textinput#props
520 */
521export interface TextInputProps
522 extends ViewProps,
523 TextInputIOSProps,
524 TextInputAndroidProps,
525 AccessibilityProps {
526 /**
527 * Specifies whether fonts should scale to respect Text Size accessibility settings.
528 * The default is `true`.
529 */
530 allowFontScaling?: boolean | undefined;
531
532 /**
533 * Can tell TextInput to automatically capitalize certain characters.
534 * characters: all characters,
535 * words: first letter of each word
536 * sentences: first letter of each sentence (default)
537 * none: don't auto capitalize anything
538 *
539 * https://reactnative.dev/docs/textinput#autocapitalize
540 */
541 autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters' | undefined;
542
543 /**
544 * Specifies autocomplete hints for the system, so it can provide autofill.
545 * On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content.
546 * To disable autocomplete, set autoComplete to off.
547 *
548 * The following values work across platforms:
549 *
550 * - `additional-name`
551 * - `address-line1`
552 * - `address-line2`
553 * - `cc-number`
554 * - `country`
555 * - `current-password`
556 * - `email`
557 * - `family-name`
558 * - `given-name`
559 * - `honorific-prefix`
560 * - `honorific-suffix`
561 * - `name`
562 * - `new-password`
563 * - `off`
564 * - `one-time-code`
565 * - `postal-code`
566 * - `street-address`
567 * - `tel`
568 * - `username`
569 *
570 * The following values work on iOS only:
571 *
572 * - `nickname`
573 * - `organization`
574 * - `organization-title`
575 * - `url`
576 *
577 * The following values work on Android only:
578 *
579 * - `birthdate-day`
580 * - `birthdate-full`
581 * - `birthdate-month`
582 * - `birthdate-year`
583 * - `cc-csc`
584 * - `cc-exp`
585 * - `cc-exp-day`
586 * - `cc-exp-month`
587 * - `cc-exp-year`
588 * - `gender`
589 * - `name-family`
590 * - `name-given`
591 * - `name-middle`
592 * - `name-middle-initial`
593 * - `name-prefix`
594 * - `name-suffix`
595 * - `password`
596 * - `password-new`
597 * - `postal-address`
598 * - `postal-address-country`
599 * - `postal-address-extended`
600 * - `postal-address-extended-postal-code`
601 * - `postal-address-locality`
602 * - `postal-address-region`
603 * - `sms-otp`
604 * - `tel-country-code`
605 * - `tel-national`
606 * - `tel-device`
607 * - `username-new`
608 */
609 autoComplete?:
610 | 'additional-name'
611 | 'address-line1'
612 | 'address-line2'
613 | 'birthdate-day'
614 | 'birthdate-full'
615 | 'birthdate-month'
616 | 'birthdate-year'
617 | 'cc-csc'
618 | 'cc-exp'
619 | 'cc-exp-day'
620 | 'cc-exp-month'
621 | 'cc-exp-year'
622 | 'cc-number'
623 | 'cc-name'
624 | 'cc-given-name'
625 | 'cc-middle-name'
626 | 'cc-family-name'
627 | 'cc-type'
628 | 'country'
629 | 'current-password'
630 | 'email'
631 | 'family-name'
632 | 'gender'
633 | 'given-name'
634 | 'honorific-prefix'
635 | 'honorific-suffix'
636 | 'name'
637 | 'name-family'
638 | 'name-given'
639 | 'name-middle'
640 | 'name-middle-initial'
641 | 'name-prefix'
642 | 'name-suffix'
643 | 'new-password'
644 | 'nickname'
645 | 'one-time-code'
646 | 'organization'
647 | 'organization-title'
648 | 'password'
649 | 'password-new'
650 | 'postal-address'
651 | 'postal-address-country'
652 | 'postal-address-extended'
653 | 'postal-address-extended-postal-code'
654 | 'postal-address-locality'
655 | 'postal-address-region'
656 | 'postal-code'
657 | 'street-address'
658 | 'sms-otp'
659 | 'tel'
660 | 'tel-country-code'
661 | 'tel-national'
662 | 'tel-device'
663 | 'url'
664 | 'username'
665 | 'username-new'
666 | 'off'
667 | undefined;
668
669 /**
670 * If false, disables auto-correct.
671 * The default value is true.
672 */
673 autoCorrect?: boolean | undefined;
674
675 /**
676 * If true, focuses the input on componentDidMount.
677 * The default value is false.
678 */
679 autoFocus?: boolean | undefined;
680
681 /**
682 * If `true`, the text field will blur when submitted.
683 * The default value is true for single-line fields and false for
684 * multiline fields. Note that for multiline fields, setting `blurOnSubmit`
685 * to `true` means that pressing return will blur the field and trigger the
686 * `onSubmitEditing` event instead of inserting a newline into the field.
687 *
688 * @deprecated
689 * Note that `submitBehavior` now takes the place of `blurOnSubmit` and will
690 * override any behavior defined by `blurOnSubmit`.
691 * @see submitBehavior
692 */
693 blurOnSubmit?: boolean | undefined;
694
695 /**
696 * When the return key is pressed,
697 *
698 * For single line inputs:
699 *
700 * - `'newline`' defaults to `'blurAndSubmit'`
701 * - `undefined` defaults to `'blurAndSubmit'`
702 *
703 * For multiline inputs:
704 *
705 * - `'newline'` adds a newline
706 * - `undefined` defaults to `'newline'`
707 *
708 * For both single line and multiline inputs:
709 *
710 * - `'submit'` will only send a submit event and not blur the input
711 * - `'blurAndSubmit`' will both blur the input and send a submit event
712 */
713 submitBehavior?: SubmitBehavior | undefined;
714
715 /**
716 * If true, caret is hidden. The default value is false.
717 */
718 caretHidden?: boolean | undefined;
719
720 /**
721 * If true, context menu is hidden. The default value is false.
722 */
723 contextMenuHidden?: boolean | undefined;
724
725 /**
726 * Provides an initial value that will change when the user starts typing.
727 * Useful for simple use-cases where you don't want to deal with listening to events
728 * and updating the value prop to keep the controlled state in sync.
729 */
730 defaultValue?: string | undefined;
731
732 /**
733 * If false, text is not editable. The default value is true.
734 */
735 editable?: boolean | undefined;
736
737 /**
738 * enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad',
739 * 'decimal-pad', 'twitter', 'web-search', 'visible-password')
740 * Determines which keyboard to open, e.g.numeric.
741 * The following values work across platforms: - default - numeric - email-address - phone-pad
742 * The following values work on iOS: - ascii-capable - numbers-and-punctuation - url - number-pad - name-phone-pad - decimal-pad - twitter - web-search
743 * The following values work on Android: - visible-password
744 */
745 keyboardType?: KeyboardTypeOptions | undefined;
746
747 /**
748 * Works like the inputmode attribute in HTML, it determines which keyboard to open, e.g. numeric and has precedence over keyboardType.
749 */
750 inputMode?: InputModeOptions | undefined;
751
752 /**
753 * Limits the maximum number of characters that can be entered.
754 * Use this instead of implementing the logic in JS to avoid flicker.
755 */
756 maxLength?: number | undefined;
757
758 /**
759 * If true, the text input can be multiple lines. The default value is false.
760 */
761 multiline?: boolean | undefined;
762
763 /**
764 * Callback that is called when the text input is blurred
765 */
766 onBlur?:
767 | ((e: NativeSyntheticEvent<TextInputFocusEventData>) => void)
768 | undefined;
769
770 /**
771 * Callback that is called when the text input's text changes.
772 */
773 onChange?:
774 | ((e: NativeSyntheticEvent<TextInputChangeEventData>) => void)
775 | undefined;
776
777 /**
778 * Callback that is called when the text input's text changes.
779 * Changed text is passed as an argument to the callback handler.
780 */
781 onChangeText?: ((text: string) => void) | undefined;
782
783 /**
784 * Callback that is called when the text input's content size changes.
785 * This will be called with
786 * `{ nativeEvent: { contentSize: { width, height } } }`.
787 *
788 * Only called for multiline text inputs.
789 */
790 onContentSizeChange?:
791 | ((e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => void)
792 | undefined;
793
794 /**
795 * Callback that is called when text input ends.
796 */
797 onEndEditing?:
798 | ((e: NativeSyntheticEvent<TextInputEndEditingEventData>) => void)
799 | undefined;
800
801 /**
802 * Called when a single tap gesture is detected.
803 */
804 onPress?: ((e: NativeSyntheticEvent<NativeTouchEvent>) => void) | undefined;
805
806 /**
807 * Callback that is called when a touch is engaged.
808 */
809 onPressIn?: ((e: NativeSyntheticEvent<NativeTouchEvent>) => void) | undefined;
810
811 /**
812 * Callback that is called when a touch is released.
813 */
814 onPressOut?:
815 | ((e: NativeSyntheticEvent<NativeTouchEvent>) => void)
816 | undefined;
817
818 /**
819 * Callback that is called when the text input is focused
820 */
821 onFocus?:
822 | ((e: NativeSyntheticEvent<TextInputFocusEventData>) => void)
823 | undefined;
824
825 /**
826 * Callback that is called when the text input selection is changed.
827 */
828 onSelectionChange?:
829 | ((e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void)
830 | undefined;
831
832 /**
833 * Callback that is called when the text input's submit button is pressed.
834 */
835 onSubmitEditing?:
836 | ((e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => void)
837 | undefined;
838
839 /**
840 * Invoked on content scroll with
841 * `{ nativeEvent: { contentOffset: { x, y } } }`.
842 *
843 * May also contain other properties from ScrollEvent but on Android contentSize is not provided for performance reasons.
844 */
845 onScroll?:
846 | ((e: NativeSyntheticEvent<TextInputScrollEventData>) => void)
847 | undefined;
848
849 /**
850 * Callback that is called when a key is pressed.
851 * This will be called with
852 * `{ nativeEvent: { key: keyValue } }`
853 * where keyValue is 'Enter' or 'Backspace' for respective keys and the typed-in character otherwise including ' ' for space.
854 *
855 * Fires before onChange callbacks.
856 * Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.
857 */
858 onKeyPress?:
859 | ((e: NativeSyntheticEvent<TextInputKeyPressEventData>) => void)
860 | undefined;
861
862 /**
863 * The string that will be rendered before text input has been entered
864 */
865 placeholder?: string | undefined;
866
867 /**
868 * The text color of the placeholder string
869 */
870 placeholderTextColor?: ColorValue | undefined;
871
872 /**
873 * If `true`, text is not editable. The default value is `false`.
874 */
875 readOnly?: boolean | undefined;
876
877 /**
878 * enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call')
879 * Determines how the return key should look.
880 */
881 returnKeyType?: ReturnKeyTypeOptions | undefined;
882
883 /**
884 * Determines what text should be shown to the return key on virtual keyboards.
885 * Has precedence over the returnKeyType prop.
886 */
887 enterKeyHint?: EnterKeyHintTypeOptions | undefined;
888
889 /**
890 * If true, the text input obscures the text entered so that sensitive text like passwords stay secure.
891 * The default value is false.
892 */
893 secureTextEntry?: boolean | undefined;
894
895 /**
896 * If true, all text will automatically be selected on focus
897 */
898 selectTextOnFocus?: boolean | undefined;
899
900 /**
901 * The start and end of the text input's selection. Set start and end to
902 * the same value to position the cursor.
903 */
904 selection?: {start: number; end?: number | undefined} | undefined;
905
906 /**
907 * The highlight (and cursor on ios) color of the text input
908 */
909 selectionColor?: ColorValue | undefined;
910
911 /**
912 * Styles
913 */
914 style?: StyleProp<TextStyle> | undefined;
915
916 /**
917 * Align the input text to the left, center, or right sides of the input field.
918 */
919 textAlign?: 'left' | 'center' | 'right' | undefined;
920
921 /**
922 * Used to locate this view in end-to-end tests
923 */
924 testID?: string | undefined;
925
926 /**
927 * Used to connect to an InputAccessoryView. Not part of react-natives documentation, but present in examples and
928 * code.
929 * See https://reactnative.dev/docs/inputaccessoryview for more information.
930 */
931 inputAccessoryViewID?: string | undefined;
932
933 /**
934 * The value to show for the text input. TextInput is a controlled component,
935 * which means the native value will be forced to match this value prop if provided.
936 * 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.
937 * In addition to simply setting the same value, either set editable={false},
938 * or set/update maxLength to prevent unwanted edits without flicker.
939 */
940 value?: string | undefined;
941
942 /**
943 * Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values:
944 * - null/undefined (default): inherit from the parent node or the global default (0)
945 * - 0: no max, ignore parent/global default
946 * - >= 1: sets the maxFontSizeMultiplier of this node to this value
947 */
948 maxFontSizeMultiplier?: number | null | undefined;
949}
950
951/**
952 * This class is responsible for coordinating the "focused"
953 * state for TextInputs. All calls relating to the keyboard
954 * should be funneled through here
955 */
956interface TextInputState {
957 /**
958 * @deprecated Use currentlyFocusedInput
959 * Returns the ID of the currently focused text field, if one exists
960 * If no text field is focused it returns null
961 */
962 currentlyFocusedField(): number;
963
964 /**
965 * Returns the ref of the currently focused text field, if one exists
966 * If no text field is focused it returns null
967 */
968 currentlyFocusedInput(): HostInstance;
969
970 /**
971 * @param textField ref of the text field to focus
972 * Focuses the specified text field
973 * noop if the text field was already focused
974 */
975 focusTextInput(textField?: HostInstance): void;
976
977 /**
978 * @param textField ref of the text field to focus
979 * Unfocuses the specified text field
980 * noop if it wasn't focused
981 */
982 blurTextInput(textField?: HostInstance): void;
983}
984
985/**
986 * @see https://reactnative.dev/docs/textinput#methods
987 */
988declare class TextInputComponent extends React.Component<TextInputProps> {}
989declare const TextInputBase: Constructor<NativeMethods> &
990 Constructor<TimerMixin> &
991 typeof TextInputComponent;
992export class TextInput extends TextInputBase {
993 /**
994 * Access the current focus state.
995 */
996 static State: TextInputState;
997
998 /**
999 * Returns if the input is currently focused.
1000 */
1001 isFocused: () => boolean;
1002
1003 /**
1004 * Removes all text from the input.
1005 */
1006 clear: () => void;
1007
1008 /**
1009 * Sets the start and end positions of text selection.
1010 */
1011 setSelection: (start: number, end: number) => void;
1012}