@onekeyfe/react-native-text-input 0.2.9 → 3.0.91

package/src/Input.js

@@ -1,5 +1,3 @@
-/* eslint-disable prettier/prettier */
-
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -13,30 +11,79 @@
 import type {HostInstance} from 'react-native/src/private/types/HostInstance';
 import type {____TextStyle_Internal as TextStyleInternal} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
 import type {
+  BlurEvent,
+  FocusEvent,
   GestureResponderEvent,
-  NativeSyntheticEvent,
   ScrollEvent,
 } from 'react-native/Libraries/Types/CoreEventTypes';
-import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {TextInputInstance, TextInputType} from 'react-native/Libraries/Components/TextInput/TextInput.flow';
-
-import * as ReactNativeFeatureFlags from 'react-native/src/private/featureflags/ReactNativeFeatureFlags.js';
-import usePressability from 'react-native/Libraries/Pressability/usePressability.js';
-import flattenStyle from 'react-native/Libraries/StyleSheet/flattenStyle.js';
-import StyleSheet, {
-  type ColorValue,
-  type TextStyleProp,
-  type ViewStyleProp,
-} from 'react-native/Libraries/StyleSheet/StyleSheet';
+import type {
+  AutoCapitalize,
+  EnterKeyHintType,
+  EnterKeyHintTypeAndroid,
+  EnterKeyHintTypeIOS,
+  EnterKeyHintTypeOptions,
+  InputModeOptions,
+  KeyboardType,
+  KeyboardTypeAndroid,
+  KeyboardTypeIOS,
+  KeyboardTypeOptions,
+  ReturnKeyType,
+  ReturnKeyTypeAndroid,
+  ReturnKeyTypeIOS,
+  ReturnKeyTypeOptions,
+  Selection,
+  SubmitBehavior,
+  TextContentType,
+  TextInputAndroidProps,
+  TextInputBlurEvent,
+  TextInputChangeEvent,
+  TextInputContentSizeChangeEvent,
+  TextInputEditingEvent,
+  TextInputEndEditingEvent,
+  TextInputEvent,
+  TextInputFocusEvent,
+  TextInputInstance,
+  TextInputIOSProps,
+  TextInputKeyPressEvent,
+  TextInputProps,
+  TextInputSelectionChangeEvent,
+  TextInputSubmitEditingEvent,
+  TextInputType,
+} from 'react-native/Libraries/Components/TextInput/TextInput.flow';
+
+import usePressability from 'react-native/Libraries/Pressability/usePressability';
+import flattenStyle from 'react-native/Libraries/StyleSheet/flattenStyle';
+import StyleSheet, {type TextStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import Text from 'react-native/Libraries/Text/Text';
-import TextAncestor from 'react-native/Libraries/Text/TextAncestor';
+import TextAncestorContext from 'react-native/Libraries/Text/TextAncestorContext';
 import Platform from 'react-native/Libraries/Utilities/Platform';
 import useMergeRefs from 'react-native/Libraries/Utilities/useMergeRefs';
 import TextInputState from 'react-native/Libraries/Components/TextInput/TextInputState';
 import invariant from 'invariant';
 import nullthrows from 'nullthrows';
 import * as React from 'react';
-import {useCallback, useLayoutEffect, useRef, useState} from 'react';
+import {useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
+import {findNodeHandle, NativeEventEmitter, NativeModules} from 'react-native';
+
+type OneKeyPasteItem = Readonly<{
+  type: string,
+  data: string,
+}>;
+
+type OneKeyPasteEvent = Readonly<{
+  nativeEvent: Readonly<{
+    items: ReadonlyArray<OneKeyPasteItem>,
+  }>,
+}>;
+
+type OneKeyTextInputProps = TextInputProps & {
+  onPaste?: ?(event: OneKeyPasteEvent) => void,
+};
+
+const iosPasteEmitter =
+  Platform.OS === 'ios' && NativeModules.OneKeyTextInputPasteObserver != null
+    ? new NativeEventEmitter(NativeModules.OneKeyTextInputPasteObserver)
+    : null;
 
 let AndroidTextInput;
 let AndroidTextInputCommands;
@@ -60,939 +107,70 @@ if (Platform.OS === 'android') {
     require('react-native/Libraries/Components/TextInput/RCTMultilineTextInputNativeComponent').Commands;
 }
 
-export type TextInputChangeEventData = $ReadOnly<{
-  eventCount: number,
-  target: number,
-  text: string,
-}>;
-
-export type TextInputChangeEvent =
-  NativeSyntheticEvent<TextInputChangeEventData>;
-
-export type TextInputEvent = NativeSyntheticEvent<
-  $ReadOnly<{
-    eventCount: number,
-    previousText: string,
-    range: $ReadOnly<{
-      start: number,
-      end: number,
-    }>,
-    target: number,
-    text: string,
-  }>,
->;
-
-export type TextInputContentSizeChangeEventData = $ReadOnly<{
-  target: number,
-  contentSize: $ReadOnly<{
-    width: number,
-    height: number,
-  }>,
-}>;
-
-export type TextInputContentSizeChangeEvent =
-  NativeSyntheticEvent<TextInputContentSizeChangeEventData>;
-
-export type TargetEvent = $ReadOnly<{
-  target: number,
-}>;
-
-export type TextInputFocusEventData = TargetEvent;
-
-export type TextInputBlurEvent = NativeSyntheticEvent<TextInputFocusEventData>;
-export type TextInputFocusEvent = NativeSyntheticEvent<TextInputFocusEventData>;
-
-type Selection = $ReadOnly<{
-  start: number,
-  end: number,
-}>;
-
-export type TextInputSelectionChangeEventData = $ReadOnly<{
-  ...TargetEvent,
-  selection: Selection,
-}>;
-
-export type TextInputSelectionChangeEvent =
-  NativeSyntheticEvent<TextInputSelectionChangeEventData>;
-
-type TextInputKeyPressEventData = $ReadOnly<{
-  ...TargetEvent,
-  key: string,
-  target?: ?number,
-  eventCount?: ?number,
-}>;
-
-export type TextInputKeyPressEvent =
-  NativeSyntheticEvent<TextInputKeyPressEventData>;
-
-export type TextInputEndEditingEventData = $ReadOnly<{
-  ...TargetEvent,
-  eventCount: number,
-  text: string,
-}>;
-
-export type TextInputEditingEvent =
-  NativeSyntheticEvent<TextInputEndEditingEventData>;
-
-type DataDetectorTypesType =
-  | 'phoneNumber'
-  | 'link'
-  | 'address'
-  | 'calendarEvent'
-  | 'trackingNumber'
-  | 'flightNumber'
-  | 'lookupSuggestion'
-  | 'none'
-  | 'all';
-
-export type KeyboardType =
-  | 'default'
-  | 'email-address'
-  | 'numeric'
-  | 'phone-pad'
-  | 'number-pad'
-  | 'decimal-pad'
-  | 'url';
-
-export type KeyboardTypeIOS =
-  | 'ascii-capable'
-  | 'numbers-and-punctuation'
-  | 'name-phone-pad'
-  | 'twitter'
-  | 'web-search'
-  // iOS 10+ only
-  | 'ascii-capable-number-pad';
-
-export type KeyboardTypeAndroid = 'visible-password';
-
-export type KeyboardTypeOptions =
-  | KeyboardType
-  | KeyboardTypeIOS
-  | KeyboardTypeAndroid;
-
-export type InputModeOptions =
-  | 'none'
-  | 'text'
-  | 'decimal'
-  | 'numeric'
-  | 'tel'
-  | 'search'
-  | 'email'
-  | 'url';
-
-export type ReturnKeyType = 'done' | 'go' | 'next' | 'search' | 'send';
-
-export type ReturnKeyTypeIOS =
-  | 'default'
-  | 'emergency-call'
-  | 'google'
-  | 'join'
-  | 'route'
-  | 'yahoo';
-
-export type ReturnKeyTypeAndroid = 'none' | 'previous';
-
-export type ReturnKeyTypeOptions =
-  | ReturnKeyType
-  | ReturnKeyTypeIOS
-  | ReturnKeyTypeAndroid;
-
-export type SubmitBehavior = 'submit' | 'blurAndSubmit' | 'newline';
-
-export type AutoCapitalize = 'none' | 'sentences' | 'words' | 'characters';
-
-export type TextContentType =
-  | 'none'
-  | 'URL'
-  | 'addressCity'
-  | 'addressCityAndState'
-  | 'addressState'
-  | 'countryName'
-  | 'creditCardNumber'
-  | 'creditCardExpiration'
-  | 'creditCardExpirationMonth'
-  | 'creditCardExpirationYear'
-  | 'creditCardSecurityCode'
-  | 'creditCardType'
-  | 'creditCardName'
-  | 'creditCardGivenName'
-  | 'creditCardMiddleName'
-  | 'creditCardFamilyName'
-  | 'emailAddress'
-  | 'familyName'
-  | 'fullStreetAddress'
-  | 'givenName'
-  | 'jobTitle'
-  | 'location'
-  | 'middleName'
-  | 'name'
-  | 'namePrefix'
-  | 'nameSuffix'
-  | 'nickname'
-  | 'organizationName'
-  | 'postalCode'
-  | 'streetAddressLine1'
-  | 'streetAddressLine2'
-  | 'sublocality'
-  | 'telephoneNumber'
-  | 'username'
-  | 'password'
-  | 'newPassword'
-  | 'oneTimeCode'
-  | 'birthdate'
-  | 'birthdateDay'
-  | 'birthdateMonth'
-  | 'birthdateYear'
-  | 'cellularEID'
-  | 'cellularIMEI'
-  | 'dateTime'
-  | 'flightNumber'
-  | 'shipmentTrackingNumber';
-
-export type EnterKeyHintTypeAndroid = 'previous';
-
-export type EnterKeyHintTypeIOS = 'enter';
-
-export type EnterKeyHintType = 'done' | 'go' | 'next' | 'search' | 'send';
-
-export type EnterKeyHintTypeOptions =
-  | EnterKeyHintType
-  | EnterKeyHintTypeAndroid
-  | EnterKeyHintTypeIOS;
-
-type PasswordRules = string;
-
-export type TextInputIOSProps = $ReadOnly<{
-  /**
-   * If true, the keyboard shortcuts (undo/redo and copy buttons) are disabled. The default value is false.
-   * @platform ios
-   */
-  disableKeyboardShortcuts?: ?boolean,
-
-  /**
-   * When the clear button should appear on the right side of the text view.
-   * This property is supported only for single-line TextInput component.
-   * @platform ios
-   */
-  clearButtonMode?: ?('never' | 'while-editing' | 'unless-editing' | 'always'),
-
-  /**
-   * If `true`, clears the text field automatically when editing begins.
-   * @platform ios
-   */
-  clearTextOnFocus?: ?boolean,
-
-  /**
-   * 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'`
-   *
-   * @platform ios
-   */
-  dataDetectorTypes?:
-    | ?DataDetectorTypesType
-    | $ReadOnlyArray<DataDetectorTypesType>,
-
-  /**
-   * 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`.
-   * @platform ios
-   */
-  enablesReturnKeyAutomatically?: ?boolean,
-
-  /**
-   * An optional identifier which links a custom InputAccessoryView to
-   * this text input. The InputAccessoryView is rendered above the
-   * keyboard when this text input is focused.
-   * @platform ios
-   */
-  inputAccessoryViewID?: ?string,
-
-  /**
-   * An optional label that overrides the default input accessory view button label.
-   * @platform ios
-   */
-  inputAccessoryViewButtonLabel?: ?string,
-
-  /**
-   * Determines the color of the keyboard.
-   * @platform ios
-   */
-  keyboardAppearance?: ?('default' | 'light' | 'dark'),
-
-  /**
-   * 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;"
-   * @platform ios
-   */
-  passwordRules?: ?PasswordRules,
-
-  /*
-   * 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).
-   * @platform ios
-   */
-  rejectResponderTermination?: ?boolean,
-
-  /**
-   * If `false`, scrolling of the text view will be disabled.
-   * The default value is `true`. Does only work with 'multiline={true}'.
-   * @platform ios
-   */
-  scrollEnabled?: ?boolean,
-
-  /**
-   * If `false`, disables spell-check style (i.e. red underlines).
-   * The default value is inherited from `autoCorrect`.
-   * @platform ios
-   */
-  spellCheck?: ?boolean,
-
-  /**
-   * Give the keyboard and the system information about the
-   * expected semantic meaning for the content that users enter.
-   * `autoComplete` property accomplishes same behavior and is recommended as its supported by both platforms.
-   * Avoid using both `autoComplete` and `textContentType`, you can use `Platform.select` for differing platform behaviors.
-   * For backwards compatibility, when both set, `textContentType` takes precedence on iOS.
-   * @platform ios
-   */
-  textContentType?: ?TextContentType,
-
-  /**
-   * Set line break strategy on iOS.
-   * @platform ios
-   */
-  lineBreakStrategyIOS?: ?('none' | 'standard' | 'hangul-word' | 'push-out'),
-
-  /**
-   * Set line break mode on iOS.
-   * @platform ios
-   */
-  lineBreakModeIOS?: ?(
-    | 'wordWrapping'
-    | 'char'
-    | 'clip'
-    | 'head'
-    | 'middle'
-    | 'tail'
-  ),
-
-  /**
-   * If `false`, the iOS system will not insert an extra space after a paste operation
-   * neither delete one or two spaces after a cut or delete operation.
-   *
-   * The default value is `true`.
-   *
-   * @platform ios
-   */
-  smartInsertDelete?: ?boolean,
-}>;
-
-export type TextInputAndroidProps = $ReadOnly<{
-  /**
-   * When provided it will set the color of the cursor (or "caret") in the component.
-   * Unlike the behavior of `selectionColor` the cursor color will be set independently
-   * from the color of the text selection box.
-   * @platform android
-   */
-  cursorColor?: ?ColorValue,
-
-  /**
-   * 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`.
-   * @platform android
-   */
-  disableFullscreenUI?: ?boolean,
-
-  importantForAutofill?: ?(
-    | 'auto'
-    | 'no'
-    | 'noExcludeDescendants'
-    | 'yes'
-    | 'yesExcludeDescendants'
-  ),
-
-  /**
-   * If defined, the provided image resource will be rendered on the left.
-   * The image resource must be inside `/android/app/src/main/res/drawable` and referenced
-   * like
-   * ```
-   * <TextInput
-   *  inlineImageLeft='search_icon'
-   * />
-   * ```
-   * @platform android
-   */
-  inlineImageLeft?: ?string,
-
-  /**
-   * Padding between the inline image, if any, and the text input itself.
-   * @platform android
-   */
-  inlineImagePadding?: ?number,
-
-  /**
-   * Sets the number of lines for a `TextInput`. Use it with multiline set to
-   * `true` to be able to fill the lines.
-   * @platform android
-   */
-  numberOfLines?: ?number,
-
-  /**
-   * Sets the return key to the label. Use it instead of `returnKeyType`.
-   * @platform android
-   */
-  returnKeyLabel?: ?string,
-
-  /**
-   * Sets the number of rows for a `TextInput`. Use it with multiline set to
-   * `true` to be able to fill the lines.
-   * @platform android
-   */
-  rows?: ?number,
-
-  /**
-   * When `false`, it will prevent the soft keyboard from showing when the field is focused.
-   * Defaults to `true`.
-   */
-  showSoftInputOnFocus?: ?boolean,
-
-  /**
-   * Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`
-   * The default value is `simple`.
-   * @platform android
-   */
-  textBreakStrategy?: ?('simple' | 'highQuality' | 'balanced'),
-
-  /**
-   * The color of the `TextInput` underline.
-   * @platform android
-   */
-  underlineColorAndroid?: ?ColorValue,
-}>;
-
-export type TextInputProps = $ReadOnly<{
-  ...$Diff<ViewProps, $ReadOnly<{style: ?ViewStyleProp}>>,
-  ...TextInputIOSProps,
-  ...TextInputAndroidProps,
-
-  /**
-   * 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.
-   */
-  autoCapitalize?: ?AutoCapitalize,
-
-  /**
-   * Specifies autocomplete hints for the system, so it can provide autofill.
-   * On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content.
-   * To disable autocomplete, set autoComplete to off.
-   *
-   * The following values work across platforms:
-   *
-   * - `additional-name`
-   * - `address-line1`
-   * - `address-line2`
-   * - `birthdate-day` (iOS 17+)
-   * - `birthdate-full` (iOS 17+)
-   * - `birthdate-month` (iOS 17+)
-   * - `birthdate-year` (iOS 17+)
-   * - `cc-number`
-   * - `cc-csc` (iOS 17+)
-   * - `cc-exp` (iOS 17+)
-   * - `cc-exp-day` (iOS 17+)
-   * - `cc-exp-month` (iOS 17+)
-   * - `cc-exp-year` (iOS 17+)
-   * - `country`
-   * - `current-password`
-   * - `email`
-   * - `family-name`
-   * - `given-name`
-   * - `honorific-prefix`
-   * - `honorific-suffix`
-   * - `name`
-   * - `new-password`
-   * - `off`
-   * - `one-time-code`
-   * - `postal-code`
-   * - `street-address`
-   * - `tel`
-   * - `username`
-   *
-   * The following values work on iOS only:
-   *
-   * - `cc-name` (iOS 17+)
-   * - `cc-given-name` (iOS 17+)
-   * - `cc-middle-name` (iOS 17+)
-   * - `cc-family-name` (iOS 17+)
-   * - `cc-type` (iOS 17+)
-   * - `nickname`
-   * - `organization`
-   * - `organization-title`
-   * - `url`
-   *
-   * The following values work on Android only:
-   *
-   * - `gender`
-   * - `name-family`
-   * - `name-given`
-   * - `name-middle`
-   * - `name-middle-initial`
-   * - `name-prefix`
-   * - `name-suffix`
-   * - `password`
-   * - `password-new`
-   * - `postal-address`
-   * - `postal-address-country`
-   * - `postal-address-extended`
-   * - `postal-address-extended-postal-code`
-   * - `postal-address-locality`
-   * - `postal-address-region`
-   * - `sms-otp`
-   * - `tel-country-code`
-   * - `tel-national`
-   * - `tel-device`
-   * - `username-new`
-   */
-  autoComplete?: ?(
-    | 'additional-name'
-    | 'address-line1'
-    | 'address-line2'
-    | 'birthdate-day'
-    | 'birthdate-full'
-    | 'birthdate-month'
-    | 'birthdate-year'
-    | 'cc-csc'
-    | 'cc-exp'
-    | 'cc-exp-day'
-    | 'cc-exp-month'
-    | 'cc-exp-year'
-    | 'cc-number'
-    | 'cc-name'
-    | 'cc-given-name'
-    | 'cc-middle-name'
-    | 'cc-family-name'
-    | 'cc-type'
-    | 'country'
-    | 'current-password'
-    | 'email'
-    | 'family-name'
-    | 'gender'
-    | 'given-name'
-    | 'honorific-prefix'
-    | 'honorific-suffix'
-    | 'name'
-    | 'name-family'
-    | 'name-given'
-    | 'name-middle'
-    | 'name-middle-initial'
-    | 'name-prefix'
-    | 'name-suffix'
-    | 'new-password'
-    | 'nickname'
-    | 'one-time-code'
-    | 'organization'
-    | 'organization-title'
-    | 'password'
-    | 'password-new'
-    | 'postal-address'
-    | 'postal-address-country'
-    | 'postal-address-extended'
-    | 'postal-address-extended-postal-code'
-    | 'postal-address-locality'
-    | 'postal-address-region'
-    | 'postal-code'
-    | 'street-address'
-    | 'sms-otp'
-    | 'tel'
-    | 'tel-country-code'
-    | 'tel-national'
-    | 'tel-device'
-    | 'url'
-    | 'username'
-    | 'username-new'
-    | 'off'
-  ),
-
-  /**
-   * If `false`, disables auto-correct. The default value is `true`.
-   */
-  autoCorrect?: ?boolean,
-
-  /**
-   * If `true`, focuses the input on `componentDidMount`.
-   * The default value is `false`.
-   */
-  autoFocus?: ?boolean,
-
-  /**
-   * Specifies whether fonts should scale to respect Text Size accessibility settings. The
-   * default is `true`.
-   */
-  allowFontScaling?: ?boolean,
-
-  /**
-   * If `true`, caret is hidden. The default value is `false`.
-   *
-   * On Android devices manufactured by Xiaomi with Android Q,
-   * when keyboardType equals 'email-address'this will be set
-   * in native to 'true' to prevent a system related crash. This
-   * will cause cursor to be disabled as a side-effect.
-   *
-   */
-  caretHidden?: ?boolean,
-
-  /*
-   * If `true`, contextMenuHidden is hidden. The default value is `false`.
-   */
-  contextMenuHidden?: ?boolean,
-
-  /**
-   * Provides an initial value that will change when the user starts typing.
-   * Useful for simple use-cases where you do not want to deal with listening
-   * to events and updating the value prop to keep the controlled state in sync.
-   */
-  defaultValue?: ?Stringish,
-
-  /**
-   * If `false`, text is not editable. The default value is `true`.
-   */
-  editable?: ?boolean,
-
-  forwardedRef?: ?React.RefSetter<TextInputInstance>,
-
-  /**
-   * `enterKeyHint` defines what action label (or icon) to present for the enter key on virtual keyboards.
-   *
-   * The following values is supported:
-   *
-   * - `enter`
-   * - `done`
-   * - `go`
-   * - `next`
-   * - `previous`
-   * - `search`
-   * - `send`
-   */
-  enterKeyHint?: ?EnterKeyHintTypeOptions,
-
-  /**
-   * `inputMode` works like the `inputmode` attribute in HTML, it determines which
-   * keyboard to open, e.g.`numeric` and has precedence over keyboardType
-   *
-   * Support the following values:
-   *
-   * - `none`
-   * - `text`
-   * - `decimal`
-   * - `numeric`
-   * - `tel`
-   * - `search`
-   * - `email`
-   * - `url`
-   */
-  inputMode?: ?InputModeOptions,
-
-  /**
-   * Determines which keyboard to open, e.g.`numeric`.
-   *
-   * The following values work across platforms:
-   *
-   * - `default`
-   * - `numeric`
-   * - `number-pad`
-   * - `decimal-pad`
-   * - `email-address`
-   * - `phone-pad`
-   * - `url`
-   *
-   * *iOS Only*
-   *
-   * The following values work on iOS only:
-   *
-   * - `ascii-capable`
-   * - `numbers-and-punctuation`
-   * - `name-phone-pad`
-   * - `twitter`
-   * - `web-search`
-   *
-   * *Android Only*
-   *
-   * The following values work on Android only:
-   *
-   * - `visible-password`
-   *
-   */
-  keyboardType?: ?KeyboardTypeOptions,
-
-  /**
-   * 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
-   */
-  maxFontSizeMultiplier?: ?number,
-
-  /**
-   * Limits the maximum number of characters that can be entered. Use this
-   * instead of implementing the logic in JS to avoid flicker.
-   */
-  maxLength?: ?number,
-
-  /**
-   * If `true`, the text input can be multiple lines.
-   * The default value is `false`.
-   */
-  multiline?: ?boolean,
-
-  /**
-   * Callback that is called when the text input is blurred.
-   */
-  onBlur?: ?(e: TextInputBlurEvent) => mixed,
-
-  /**
-   * Callback that is called when the text input's text changes.
-   */
-  onChange?: ?(e: TextInputChangeEvent) => mixed,
-
-  /**
-   * Callback that is called when the text input's text changes.
-   * Changed text is passed as an argument to the callback handler.
-   */
-  onChangeText?: ?(text: string) => mixed,
-
-  /**
-   * 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.
-   */
-  onContentSizeChange?: ?(e: TextInputContentSizeChangeEvent) => mixed,
-
-  /**
-   * Callback that is called when text input ends.
-   */
-  onEndEditing?: ?(e: TextInputEditingEvent) => mixed,
-
-  /**
-   * Callback that is called when the text input is focused.
-   */
-  onFocus?: ?(e: TextInputFocusEvent) => mixed,
-
-  /**
-   * 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.
-   */
-  onKeyPress?: ?(e: TextInputKeyPressEvent) => mixed,
-
-  /**
-   * Called when a single tap gesture is detected.
-   */
-  onPress?: ?(event: GestureResponderEvent) => mixed,
-
-  /**
-   * Called when a touch is engaged.
-   */
-  onPressIn?: ?(event: GestureResponderEvent) => mixed,
-
-  /**
-   * Called when a touch is released.
-   */
-  onPressOut?: ?(event: GestureResponderEvent) => mixed,
-
-  /**
-   * Callback that is called when the text input selection is changed.
-   * This will be called with
-   * `{ nativeEvent: { selection: { start, end } } }`.
-   */
-  onSelectionChange?: ?(e: TextInputSelectionChangeEvent) => mixed,
-
-  /**
-   * Callback that is called when the text input's submit button is pressed.
-   * Invalid if `multiline={true}` is specified.
-   */
-  onSubmitEditing?: ?(e: TextInputEditingEvent) => mixed,
-
-  /**
-   * 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.
-   */
-  onScroll?: ?(e: ScrollEvent) => mixed,
-
-  /**
-   * The string that will be rendered before text input has been entered.
-   */
-  placeholder?: ?Stringish,
-
-  /**
-   * The text color of the placeholder string.
-   */
-  placeholderTextColor?: ?ColorValue,
-
-  /** `readOnly` works like the `readonly` attribute in HTML.
-   *  If `true`, text is not editable. The default value is `false`.
-   *  See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
-   *  for more details.
-   */
-  readOnly?: ?boolean,
-
-  /**
-   * Determines how the return key should look. On Android you can also use
-   * `returnKeyLabel`.
-   *
-   * *Cross platform*
-   *
-   * The following values work across platforms:
-   *
-   * - `done`
-   * - `go`
-   * - `next`
-   * - `search`
-   * - `send`
-   *
-   * *Android Only*
-   *
-   * The following values work on Android only:
-   *
-   * - `none`
-   * - `previous`
-   *
-   * *iOS Only*
-   *
-   * The following values work on iOS only:
-   *
-   * - `default`
-   * - `emergency-call`
-   * - `google`
-   * - `join`
-   * - `route`
-   * - `yahoo`
-   */
-  returnKeyType?: ?ReturnKeyTypeOptions,
-
-  /**
-   * If `true`, the text input obscures the text entered so that sensitive text
-   * like passwords stay secure. The default value is `false`. Does not work with 'multiline={true}'.
-   */
-  secureTextEntry?: ?boolean,
-
-  /**
-   * The start and end of the text input's selection. Set start and end to
-   * the same value to position the cursor.
-   */
-  selection?: ?$ReadOnly<{
-    start: number,
-    end?: ?number,
-  }>,
-
-  /**
-   * The highlight and cursor color of the text input.
-   */
-  selectionColor?: ?ColorValue,
-
-  /**
-   * The text selection handle color.
-   * @platform android
-   */
-  selectionHandleColor?: ?ColorValue,
-
-  /**
-   * If `true`, all text will automatically be selected on focus.
-   */
-  selectTextOnFocus?: ?boolean,
+export type {
+  AutoCapitalize,
+  BlurEvent,
+  EnterKeyHintType,
+  EnterKeyHintTypeAndroid,
+  EnterKeyHintTypeIOS,
+  EnterKeyHintTypeOptions,
+  FocusEvent,
+  InputModeOptions,
+  KeyboardType,
+  KeyboardTypeAndroid,
+  KeyboardTypeIOS,
+  KeyboardTypeOptions,
+  ReturnKeyType,
+  ReturnKeyTypeAndroid,
+  ReturnKeyTypeIOS,
+  ReturnKeyTypeOptions,
+  SubmitBehavior,
+  TextContentType,
+  TextInputAndroidProps,
+  TextInputBlurEvent,
+  TextInputChangeEvent,
+  TextInputContentSizeChangeEvent,
+  TextInputEditingEvent,
+  TextInputEndEditingEvent,
+  TextInputEvent,
+  TextInputFocusEvent,
+  TextInputIOSProps,
+  TextInputKeyPressEvent,
+  TextInputProps,
+  TextInputSelectionChangeEvent,
+  TextInputSubmitEditingEvent,
+};
 
+type TextInputStateType = Readonly<{
   /**
-   * If `true`, the text field will blur when submitted.
-   * The default value is true for single-line fields and false for
-   * multiline fields. Note that for multiline fields, setting `blurOnSubmit`
-   * to `true` means that pressing return will blur the field and trigger the
-   * `onSubmitEditing` event instead of inserting a newline into the field.
-   *
-   * @deprecated
-   * Note that `submitBehavior` now takes the place of `blurOnSubmit` and will
-   * override any behavior defined by `blurOnSubmit`.
-   * @see submitBehavior
+   * @deprecated Use currentlyFocusedInput
+   * Returns the ID of the currently focused text field, if one exists
+   * If no text field is focused it returns null
    */
-  blurOnSubmit?: ?boolean,
+  currentlyFocusedField: () => ?number,
 
   /**
-   * When the return key is pressed,
-   *
-   * For single line inputs:
-   *
-   * - `'newline`' defaults to `'blurAndSubmit'`
-   * - `undefined` defaults to `'blurAndSubmit'`
-   *
-   * For multiline inputs:
-   *
-   * - `'newline'` adds a newline
-   * - `undefined` defaults to `'newline'`
-   *
-   * For both single line and multiline inputs:
-   *
-   * - `'submit'` will only send a submit event and not blur the input
-   * - `'blurAndSubmit`' will both blur the input and send a submit event
+   * Returns the ref of the currently focused text field, if one exists
+   * If no text field is focused it returns null
    */
-  submitBehavior?: ?SubmitBehavior,
+  currentlyFocusedInput: () => ?HostInstance,
 
   /**
-   * Note that not all Text styles are supported, an incomplete list of what is not supported includes:
-   *
-   * - `borderLeftWidth`
-   * - `borderTopWidth`
-   * - `borderRightWidth`
-   * - `borderBottomWidth`
-   * - `borderTopLeftRadius`
-   * - `borderTopRightRadius`
-   * - `borderBottomRightRadius`
-   * - `borderBottomLeftRadius`
-   *
-   * see [Issue#7070](https://github.com/facebook/react-native/issues/7070)
-   * for more detail.
-   *
-   * [Styles](docs/style.html)
+   * @param textField ref of the text field to focus
+   * Focuses the specified text field
+   * noop if the text field was already focused
    */
-  style?: ?TextStyleProp,
+  focusTextInput: (textField: ?HostInstance) => void,
 
   /**
-   * 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.
+   * @param textField ref of the text field to focus
+   * Unfocuses the specified text field
+   * noop if it wasn't focused
    */
-  value?: ?Stringish,
+  blurTextInput: (textField: ?HostInstance) => void,
 }>;
 
-type ViewCommands = $NonMaybeType<
+type ViewCommands = NonNullable<
   | typeof AndroidTextInputCommands
   | typeof RCTMultilineTextInputNativeCommands
   | typeof RCTSinglelineTextInputNativeCommands,
@@ -1010,7 +188,7 @@ const emptyFunctionThatReturnsTrue = () => true;
  * in native and in JavaScript. This is necessary due to the asynchronous nature
  * of text input events.
  */
-function useTextInputStateSynchronization_STATE({
+function useTextInputStateSynchronization({
   props,
   mostRecentEventCount,
   selection,
@@ -1031,8 +209,8 @@ function useTextInputStateSynchronization_STATE({
   const [lastNativeText, setLastNativeText] = useState<?Stringish>(props.value);
   const [lastNativeSelectionState, setLastNativeSelection] =
     useState<LastNativeSelection>({
-      selection: {start: -1, end: -1},
-      mostRecentEventCount: mostRecentEventCount,
+      mostRecentEventCount,
+      selection: {end: -1, start: -1},
     });
 
   const lastNativeSelection = lastNativeSelectionState.selection;
@@ -1055,7 +233,7 @@ function useTextInputStateSynchronization_STATE({
         lastNativeSelection.end !== selection.end)
     ) {
       nativeUpdate.selection = selection;
-      setLastNativeSelection({selection, mostRecentEventCount});
+      setLastNativeSelection({mostRecentEventCount, selection});
     }
 
     if (Object.keys(nativeUpdate).length === 0) {
@@ -1083,95 +261,7 @@ function useTextInputStateSynchronization_STATE({
     viewCommands,
   ]);
 
-  return {setLastNativeText, setLastNativeSelection};
-}
-
-/**
- * This hook handles the synchronization between the state of the text input
- * in native and in JavaScript. This is necessary due to the asynchronous nature
- * of text input events.
- */
-function useTextInputStateSynchronization_REFS({
-  props,
-  mostRecentEventCount,
-  selection,
-  inputRef,
-  text,
-  viewCommands,
-}: {
-  props: TextInputProps,
-  mostRecentEventCount: number,
-  selection: ?Selection,
-  inputRef: React.RefObject<null | TextInputInstance>,
-  text?: string,
-  viewCommands: ViewCommands,
-}): {
-  setLastNativeText: string => void,
-  setLastNativeSelection: LastNativeSelection => void,
-} {
-  const lastNativeTextRef = useRef<?Stringish>(props.value);
-  const lastNativeSelectionRef = useRef<LastNativeSelection>({
-    selection: {start: -1, end: -1},
-    mostRecentEventCount: mostRecentEventCount,
-  });
-
-  // This is necessary in case native updates the text and JS decides
-  // that the update should be ignored and we should stick with the value
-  // that we have in JS.
-  useLayoutEffect(() => {
-    const nativeUpdate: {text?: string, selection?: Selection} = {};
-
-    const lastNativeSelection = lastNativeSelectionRef.current.selection;
-
-    if (
-      lastNativeTextRef.current !== props.value &&
-      typeof props.value === 'string'
-    ) {
-      nativeUpdate.text = props.value;
-      lastNativeTextRef.current = props.value;
-    }
-
-    if (
-      selection &&
-      lastNativeSelection &&
-      (lastNativeSelection.start !== selection.start ||
-        lastNativeSelection.end !== selection.end)
-    ) {
-      nativeUpdate.selection = selection;
-      lastNativeSelectionRef.current = {selection, mostRecentEventCount};
-    }
-
-    if (Object.keys(nativeUpdate).length === 0) {
-      return;
-    }
-
-    if (inputRef.current != null) {
-      viewCommands.setTextAndSelection(
-        inputRef.current,
-        mostRecentEventCount,
-        text,
-        selection?.start ?? -1,
-        selection?.end ?? -1,
-      );
-    }
-  }, [
-    mostRecentEventCount,
-    inputRef,
-    props.value,
-    props.defaultValue,
-    selection,
-    text,
-    viewCommands,
-  ]);
-
-  return {
-    setLastNativeText: lastNativeText => {
-      lastNativeTextRef.current = lastNativeText;
-    },
-    setLastNativeSelection: lastNativeSelection => {
-      lastNativeSelectionRef.current = lastNativeSelection;
-    },
-  };
+  return {setLastNativeSelection, setLastNativeText};
 }
 
 /**
@@ -1285,7 +375,7 @@ function useTextInputStateSynchronization_REFS({
  * or control this param programmatically with native code.
  *
  */
-function InternalTextInput(props: TextInputProps): React.Node {
+function InternalTextInput(props: OneKeyTextInputProps): React.Node {
   const {
     'aria-busy': ariaBusy,
     'aria-checked': ariaChecked,
@@ -1299,17 +389,34 @@ function InternalTextInput(props: TextInputProps): React.Node {
     selectionColor,
     selectionHandleColor,
     cursorColor,
+    onPaste,
     ...otherProps
   } = props;
 
   const inputRef = useRef<null | TextInputInstance>(null);
 
+  useEffect(() => {
+    if (Platform.OS !== 'ios' || iosPasteEmitter == null || onPaste == null) {
+      return;
+    }
+    const subscription = iosPasteEmitter.addListener(
+      'OneKeyTextInputPaste',
+      (event: {target: number, items: Array<OneKeyPasteItem>}) => {
+        const target = findNodeHandle(inputRef.current);
+        if (target != null && target === event.target) {
+          onPaste({nativeEvent: {items: event.items}});
+        }
+      },
+    );
+    return () => subscription.remove();
+  }, [onPaste]);
+
   const selection: ?Selection =
     propsSelection == null
       ? null
       : {
-          start: propsSelection.start,
           end: propsSelection.end ?? propsSelection.start,
+          start: propsSelection.start,
         };
 
   const text =
@@ -1326,15 +433,11 @@ function InternalTextInput(props: TextInputProps): React.Node {
       : RCTSinglelineTextInputNativeCommands);
 
   const [mostRecentEventCount, setMostRecentEventCount] = useState<number>(0);
-  const useTextInputStateSynchronization =
-    ReactNativeFeatureFlags.useRefsForTextInputState()
-      ? useTextInputStateSynchronization_REFS
-      : useTextInputStateSynchronization_STATE;
   const {setLastNativeText, setLastNativeSelection} =
     useTextInputStateSynchronization({
-      props,
       inputRef,
       mostRecentEventCount,
+      props,
       selection,
       text,
       viewCommands,
@@ -1384,7 +487,14 @@ function InternalTextInput(props: TextInputProps): React.Node {
         before we can get to the long term breaking change.
       */
       if (instance != null) {
+        // Register the input immediately when the ref is set so that focus()
+        // can be called from ref callbacks
+        // Double registering during useLayoutEffect is fine, because the underlying
+        // state is a Set.
+        TextInputState.registerInput(instance);
+
         // $FlowFixMe[prop-missing] - See the explanation above.
+        // $FlowFixMe[unsafe-object-assign]
         Object.assign(instance, {
           clear(): void {
             if (inputRef.current != null) {
@@ -1397,13 +507,17 @@ function InternalTextInput(props: TextInputProps): React.Node {
               );
             }
           },
-          // TODO: Fix this returning true on null === null, when no input is focused
-          isFocused(): boolean {
-            return TextInputState.currentlyFocusedInput() === inputRef.current;
-          },
           getNativeRef(): ?TextInputInstance {
             return inputRef.current;
           },
+          isFocused(): boolean {
+            const currentlyFocusedInput =
+              TextInputState.currentlyFocusedInput();
+            return (
+              currentlyFocusedInput != null &&
+              currentlyFocusedInput === inputRef.current
+            );
+          },
           setSelection(start: number, end: number): void {
             if (inputRef.current != null) {
               viewCommands.setTextAndSelection(
@@ -1421,7 +535,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
     [mostRecentEventCount, viewCommands],
   );
 
-  // $FlowExpectedError[incompatible-call]
+  // $FlowExpectedError[incompatible-type]
   const ref = useMergeRefs<HostInstance>(setLocalRef, props.forwardedRef);
 
   const _onChange = (event: TextInputChangeEvent) => {
@@ -1453,19 +567,19 @@ function InternalTextInput(props: TextInputProps): React.Node {
     }
 
     setLastNativeSelection({
-      selection: event.nativeEvent.selection,
       mostRecentEventCount,
+      selection: event.nativeEvent.selection,
     });
   };
 
-  const _onFocus = (event: TextInputFocusEvent) => {
+  const _onFocus = (event: FocusEvent) => {
     TextInputState.focusInput(inputRef.current);
     if (props.onFocus) {
       props.onFocus(event);
     }
   };
 
-  const _onBlur = (event: TextInputBlurEvent) => {
+  const _onBlur = (event: BlurEvent) => {
     TextInputState.blurInput(inputRef.current);
     if (props.onBlur) {
       props.onBlur(event);
@@ -1516,8 +630,9 @@ function InternalTextInput(props: TextInputProps): React.Node {
     rejectResponderTermination,
   } = props;
 
-  const config = React.useMemo(
+  const config = useMemo(
     () => ({
+      cancelable: Platform.OS === 'ios' ? !rejectResponderTermination : null,
       hitSlop,
       onPress: (event: GestureResponderEvent) => {
         onPress?.(event);
@@ -1527,9 +642,8 @@ function InternalTextInput(props: TextInputProps): React.Node {
           }
         }
       },
-      onPressIn: onPressIn,
-      onPressOut: onPressOut,
-      cancelable: Platform.OS === 'ios' ? !rejectResponderTermination : null,
+      onPressIn,
+      onPressOut,
     }),
     [
       editable,
@@ -1552,6 +666,9 @@ function InternalTextInput(props: TextInputProps): React.Node {
   // so omitting onBlur and onFocus pressability handlers here.
   const {onBlur, onFocus, ...eventHandlers} = usePressability(config);
 
+  const _accessibilityLabel =
+    props?.['aria-label'] ?? props?.accessibilityLabel;
+
   let _accessibilityState;
   if (
     accessibilityState != null ||
@@ -1576,14 +693,14 @@ function InternalTextInput(props: TextInputProps): React.Node {
   if (flattenedStyle != null) {
     let overrides: ?{...TextStyleInternal} = null;
     if (typeof flattenedStyle?.fontWeight === 'number') {
-      overrides = overrides || ({}: {...TextStyleInternal});
+      overrides = overrides || ({} as {...TextStyleInternal});
       overrides.fontWeight =
-        // $FlowFixMe[incompatible-cast]
-        (flattenedStyle.fontWeight.toString(): TextStyleInternal['fontWeight']);
+        // $FlowFixMe[incompatible-type]
+        flattenedStyle.fontWeight.toString() as TextStyleInternal['fontWeight'];
     }
 
     if (flattenedStyle.verticalAlign != null) {
-      overrides = overrides || ({}: {...TextStyleInternal});
+      overrides = overrides || ({} as {...TextStyleInternal});
       overrides.textAlignVertical =
         verticalAlignToTextAlignVerticalMap[flattenedStyle.verticalAlign];
       overrides.verticalAlign = undefined;
@@ -1608,13 +725,19 @@ function InternalTextInput(props: TextInputProps): React.Node {
           flattenedStyle.paddingVertical == null &&
           flattenedStyle.paddingTop == null));
 
+    const _accessibilityElementsHidden =
+      props['aria-hidden'] ?? props.accessibilityElementsHidden;
+
     textInput = (
       <RCTTextInputView
         // Figure out imperative + forward refs.
-        ref={(ref: $FlowFixMe)}
+        ref={ref as $FlowFixMe}
         {...otherProps}
         {...eventHandlers}
+        acceptDragAndDropTypes={props.experimental_acceptDragAndDropTypes}
+        accessibilityLabel={_accessibilityLabel}
         accessibilityState={_accessibilityState}
+        accessibilityElementsHidden={_accessibilityElementsHidden}
         accessible={accessible}
         submitBehavior={submitBehavior}
         caretHidden={caretHidden}
@@ -1643,6 +766,10 @@ function InternalTextInput(props: TextInputProps): React.Node {
     const autoCapitalize = props.autoCapitalize || 'sentences';
     const _accessibilityLabelledBy =
       props?.['aria-labelledby'] ?? props?.accessibilityLabelledBy;
+    const _importantForAccessibility =
+      props['aria-hidden'] === true
+        ? ('no-hide-descendants' as const)
+        : undefined;
     const placeholder = props.placeholder ?? '';
     let children = props.children;
     const childCount = React.Children.count(children);
@@ -1655,14 +782,13 @@ function InternalTextInput(props: TextInputProps): React.Node {
     }
     // For consistency with iOS set cursor/selectionHandle color as selectionColor
     const colorProps = {
+      cursorColor: cursorColor === undefined ? selectionColor : cursorColor,
       selectionColor,
       selectionHandleColor:
         selectionHandleColor === undefined
           ? selectionColor
           : selectionHandleColor,
-      cursorColor: cursorColor === undefined ? selectionColor : cursorColor,
     };
-    const { onPaste, ...rest } = otherProps;
     textInput = (
       /* $FlowFixMe[prop-missing] the types for AndroidTextInput don't match up
        * exactly with the props for TextInput. This will need to get fixed */
@@ -1674,30 +800,33 @@ function InternalTextInput(props: TextInputProps): React.Node {
        * fixed */
       <AndroidTextInput
         // Figure out imperative + forward refs.
-        ref={(ref: $FlowFixMe)}
-        {...rest}
+        ref={ref as $FlowFixMe}
+        {...otherProps}
         {...colorProps}
         {...eventHandlers}
-        onPaste={onPaste}
-        accessibilityState={_accessibilityState}
+        accessibilityLabel={_accessibilityLabel}
         accessibilityLabelledBy={_accessibilityLabelledBy}
+        accessibilityState={_accessibilityState}
         accessible={accessible}
+        acceptDragAndDropTypes={props.experimental_acceptDragAndDropTypes}
         autoCapitalize={autoCapitalize}
         submitBehavior={submitBehavior}
         caretHidden={caretHidden}
         children={children}
         disableFullscreenUI={props.disableFullscreenUI}
         focusable={tabIndex !== undefined ? !tabIndex : focusable}
+        importantForAccessibility={_importantForAccessibility}
         mostRecentEventCount={mostRecentEventCount}
         nativeID={id ?? props.nativeID}
         numberOfLines={props.rows ?? props.numberOfLines}
         onBlur={_onBlur}
         onChange={_onChange}
         onFocus={_onFocus}
+        onPaste={onPaste}
         /* $FlowFixMe[prop-missing] the types for AndroidTextInput don't match
          * up exactly with the props for TextInput. This will need to get fixed
          */
-        /* $FlowFixMe[incompatible-type-arg] the types for AndroidTextInput
+        /* $FlowFixMe[incompatible-type] the types for AndroidTextInput
          * don't match up exactly with the props for TextInput. This will need
          * to get fixed */
         onScroll={_onScroll}
@@ -1709,34 +838,34 @@ function InternalTextInput(props: TextInputProps): React.Node {
       />
     );
   }
-  return (
-    <TextAncestor.Provider value={true}>{textInput}</TextAncestor.Provider>
-  );
+  return <TextAncestorContext value={true}>{textInput}</TextAncestorContext>;
 }
 
 const enterKeyHintToReturnTypeMap = {
-  enter: 'default',
   done: 'done',
+  enter: 'default',
   go: 'go',
   next: 'next',
   previous: 'previous',
   search: 'search',
   send: 'send',
-};
+} as const;
 
 const inputModeToKeyboardTypeMap = {
-  none: 'default',
-  text: 'default',
   decimal: 'decimal-pad',
+  email: 'email-address',
+  none: 'default',
   numeric: 'number-pad',
+  search:
+    Platform.OS === 'ios' ? ('web-search' as const) : ('default' as const),
   tel: 'phone-pad',
-  search: Platform.OS === 'ios' ? 'web-search' : 'default',
-  email: 'email-address',
+  text: 'default',
   url: 'url',
-};
+} as const;
 
 // Map HTML autocomplete values to Android autoComplete values
 const autoCompleteWebToAutoCompleteAndroidMap = {
+  'additional-name': 'name-middle',
   'address-line1': 'postal-address-region',
   'address-line2': 'postal-address-locality',
   bday: 'birthdate-full',
@@ -1751,12 +880,11 @@ const autoCompleteWebToAutoCompleteAndroidMap = {
   country: 'postal-address-country',
   'current-password': 'password',
   email: 'email',
+  'family-name': 'name-family',
+  'given-name': 'name-given',
   'honorific-prefix': 'name-prefix',
   'honorific-suffix': 'name-suffix',
   name: 'name',
-  'additional-name': 'name-middle',
-  'family-name': 'name-family',
-  'given-name': 'name-given',
   'new-password': 'password-new',
   off: 'off',
   'one-time-code': 'sms-otp',
@@ -1767,37 +895,37 @@ const autoCompleteWebToAutoCompleteAndroidMap = {
   'tel-country-code': 'tel-country-code',
   'tel-national': 'tel-national',
   username: 'username',
-};
+} as const;
 
 // Map HTML autocomplete values to iOS textContentType values
 const autoCompleteWebToTextContentTypeMap = {
+  'additional-name': 'middleName',
   'address-line1': 'streetAddressLine1',
   'address-line2': 'streetAddressLine2',
   bday: 'birthdate',
   'bday-day': 'birthdateDay',
   'bday-month': 'birthdateMonth',
   'bday-year': 'birthdateYear',
+  'cc-additional-name': 'creditCardMiddleName',
   'cc-csc': 'creditCardSecurityCode',
+  'cc-exp': 'creditCardExpiration',
   'cc-exp-month': 'creditCardExpirationMonth',
   'cc-exp-year': 'creditCardExpirationYear',
-  'cc-exp': 'creditCardExpiration',
-  'cc-given-name': 'creditCardGivenName',
-  'cc-additional-name': 'creditCardMiddleName',
   'cc-family-name': 'creditCardFamilyName',
+  'cc-given-name': 'creditCardGivenName',
   'cc-name': 'creditCardName',
   'cc-number': 'creditCardNumber',
   'cc-type': 'creditCardType',
-  'current-password': 'password',
   country: 'countryName',
+  'current-password': 'password',
   email: 'emailAddress',
-  name: 'name',
-  'additional-name': 'middleName',
   'family-name': 'familyName',
   'given-name': 'givenName',
-  nickname: 'nickname',
   'honorific-prefix': 'namePrefix',
   'honorific-suffix': 'nameSuffix',
+  name: 'name',
   'new-password': 'newPassword',
+  nickname: 'nickname',
   off: 'none',
   'one-time-code': 'oneTimeCode',
   organization: 'organizationName',
@@ -1807,29 +935,30 @@ const autoCompleteWebToTextContentTypeMap = {
   tel: 'telephoneNumber',
   url: 'URL',
   username: 'username',
-};
+} as const;
 
-const ExportedForwardRef: component(
-  ref: React.RefSetter<TextInputInstance>,
+const TextInput: component(
+  ref?: React.RefSetter<TextInputInstance>,
   ...props: React.ElementConfig<typeof InternalTextInput>
-) = React.forwardRef(function TextInput(
-  {
-    allowFontScaling = true,
-    rejectResponderTermination = true,
-    underlineColorAndroid = 'transparent',
-    autoComplete,
-    textContentType,
-    readOnly,
-    editable,
-    enterKeyHint,
-    returnKeyType,
-    inputMode,
-    showSoftInputOnFocus,
-    keyboardType,
-    ...restProps
-  },
-  forwardedRef: React.RefSetter<TextInputInstance>,
-) {
+) = function TextInput({
+  ref: forwardedRef,
+  allowFontScaling = true,
+  rejectResponderTermination = true,
+  underlineColorAndroid = 'transparent',
+  autoComplete,
+  textContentType,
+  readOnly,
+  editable,
+  enterKeyHint,
+  returnKeyType,
+  inputMode,
+  showSoftInputOnFocus,
+  keyboardType,
+  ...restProps
+}: {
+  ref?: React.RefSetter<TextInputInstance>,
+  ...React.ElementConfig<typeof InternalTextInput>,
+}) {
   return (
     <InternalTextInput
       allowFontScaling={allowFontScaling}
@@ -1849,8 +978,8 @@ const ExportedForwardRef: component(
         Platform.OS === 'android'
           ? // $FlowFixMe[invalid-computed-prop]
             // $FlowFixMe[prop-missing]
-            autoCompleteWebToAutoCompleteAndroidMap[autoComplete] ??
-            autoComplete
+            (autoCompleteWebToAutoCompleteAndroidMap[autoComplete] ??
+            autoComplete)
           : undefined
       }
       textContentType={
@@ -1859,8 +988,7 @@ const ExportedForwardRef: component(
           : Platform.OS === 'ios' &&
               autoComplete &&
               autoComplete in autoCompleteWebToTextContentTypeMap
-            ? // $FlowFixMe[invalid-computed-prop]
-              // $FlowFixMe[prop-missing]
+            ? // $FlowFixMe[prop-missing]
               autoCompleteWebToTextContentTypeMap[autoComplete]
             : textContentType
       }
@@ -1868,26 +996,20 @@ const ExportedForwardRef: component(
       forwardedRef={forwardedRef}
     />
   );
-});
+};
 
-ExportedForwardRef.displayName = 'TextInput';
+TextInput.displayName = 'TextInput';
 
 // $FlowFixMe[prop-missing]
-ExportedForwardRef.State = {
-  currentlyFocusedInput: TextInputState.currentlyFocusedInput,
-
+TextInput.State = {
+  blurTextInput: TextInputState.blurTextInput,
   currentlyFocusedField: TextInputState.currentlyFocusedField,
+  currentlyFocusedInput: TextInputState.currentlyFocusedInput,
   focusTextInput: TextInputState.focusTextInput,
-  blurTextInput: TextInputState.blurTextInput,
 };
 
-export type TextInputComponentStatics = $ReadOnly<{
-  State: $ReadOnly<{
-    currentlyFocusedInput: typeof TextInputState.currentlyFocusedInput,
-    currentlyFocusedField: typeof TextInputState.currentlyFocusedField,
-    focusTextInput: typeof TextInputState.focusTextInput,
-    blurTextInput: typeof TextInputState.blurTextInput,
-  }>,
+export type TextInputComponentStatics = Readonly<{
+  State: TextInputStateType,
 }>;
 
 const styles = StyleSheet.create({
@@ -1901,10 +1023,10 @@ const styles = StyleSheet.create({
 
 const verticalAlignToTextAlignVerticalMap = {
   auto: 'auto',
-  top: 'top',
   bottom: 'bottom',
   middle: 'center',
-};
+  top: 'top',
+} as const;
 
 // $FlowFixMe[unclear-type] Unclear type. Using `any` type is not safe.
-export default ExportedForwardRef as any as TextInputType;
+export default TextInput as any as TextInputType;