react-native-windows 0.79.2 → 0.80.0-preview.1

package/Libraries/Components/TextInput/TextInput.js

@@ -12,20 +12,46 @@ import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {____TextStyle_Internal as TextStyleInternal} from '../../StyleSheet/StyleSheetTypes';
 import type {
   GestureResponderEvent,
-  NativeSyntheticEvent,
   ScrollEvent,
 } from '../../Types/CoreEventTypes';
-import type {ViewProps} from '../View/ViewPropTypes';
-import type {TextInputInstance, TextInputType} from './TextInput.flow';
+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 './TextInput.flow';
 
-import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import usePressability from '../../Pressability/usePressability';
 import flattenStyle from '../../StyleSheet/flattenStyle';
-import StyleSheet, {
-  type ColorValue,
-  type TextStyleProp,
-  type ViewStyleProp,
-} from '../../StyleSheet/StyleSheet';
+import StyleSheet, {type TextStyleProp} from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import TextAncestor from '../../Text/TextAncestor';
 import Platform from '../../Utilities/Platform';
@@ -58,936 +84,65 @@ if (Platform.OS === 'android') {
     require('./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,
+  EnterKeyHintType,
+  EnterKeyHintTypeAndroid,
+  EnterKeyHintTypeIOS,
+  EnterKeyHintTypeOptions,
+  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<
@@ -1008,7 +163,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,
@@ -1084,94 +239,6 @@ function useTextInputStateSynchronization_STATE({
   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;
-    },
-  };
-}
-
 /**
  * A foundational component for inputting text into the app via a
  * keyboard. Props provide configurability for several features, such as
@@ -1324,10 +391,6 @@ 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,
@@ -1383,6 +446,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
       */
       if (instance != null) {
         // $FlowFixMe[prop-missing] - See the explanation above.
+        // $FlowFixMe[unsafe-object-assign]
         Object.assign(instance, {
           clear(): void {
             if (inputRef.current != null) {
@@ -1612,6 +676,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
         ref={(ref: $FlowFixMe)}
         {...otherProps}
         {...eventHandlers}
+        acceptDragAndDropTypes={props.experimental_acceptDragAndDropTypes}
         accessibilityState={_accessibilityState}
         accessible={accessible}
         submitBehavior={submitBehavior}
@@ -1678,6 +743,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
         accessibilityState={_accessibilityState}
         accessibilityLabelledBy={_accessibilityLabelledBy}
         accessible={accessible}
+        acceptDragAndDropTypes={props.experimental_acceptDragAndDropTypes}
         autoCapitalize={autoCapitalize}
         submitBehavior={submitBehavior}
         caretHidden={caretHidden}
@@ -1806,7 +872,7 @@ const autoCompleteWebToTextContentTypeMap = {
 };
 
 const ExportedForwardRef: component(
-  ref: React.RefSetter<TextInputInstance>,
+  ref?: React.RefSetter<TextInputInstance>,
   ...props: React.ElementConfig<typeof InternalTextInput>
 ) = React.forwardRef(function TextInput(
   {
@@ -1878,12 +944,7 @@ ExportedForwardRef.State = {
 };
 
 export type TextInputComponentStatics = $ReadOnly<{
-  State: $ReadOnly<{
-    currentlyFocusedInput: typeof TextInputState.currentlyFocusedInput,
-    currentlyFocusedField: typeof TextInputState.currentlyFocusedField,
-    focusTextInput: typeof TextInputState.focusTextInput,
-    blurTextInput: typeof TextInputState.blurTextInput,
-  }>,
+  State: TextInputStateType,
 }>;
 
 const styles = StyleSheet.create({