react-native 0.0.0-e6fc20ee6 → 0.0.0-e9440508e-20211011-2008

package/Libraries/Components/TextInput/TextInput.js

@@ -4,34 +4,39 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
-'use strict';
+import * as React from 'react';
 
-const DeprecatedTextInputPropTypes = require('../../DeprecatedPropTypes/DeprecatedTextInputPropTypes');
-const Platform = require('../../Utilities/Platform');
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const Text = require('../../Text/Text');
-const TextAncestor = require('../../Text/TextAncestor');
-const TextInputState = require('./TextInputState');
-const TouchableWithoutFeedback = require('../Touchable/TouchableWithoutFeedback');
+import DeprecatedTextInputPropTypes from '../../DeprecatedPropTypes/DeprecatedTextInputPropTypes';
 
-const invariant = require('invariant');
-const nullthrows = require('nullthrows');
-const setAndForwardRef = require('../../Utilities/setAndForwardRef');
+import Platform from '../../Utilities/Platform';
+import StyleSheet, {
+  type TextStyleProp,
+  type ViewStyleProp,
+  type ColorValue,
+} from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import TextAncestor from '../../Text/TextAncestor';
+import TextInputState from './TextInputState';
+import invariant from 'invariant';
+import nullthrows from 'nullthrows';
+import setAndForwardRef from '../../Utilities/setAndForwardRef';
+
+import usePressability from '../../Pressability/usePressability';
 
-import type {TextStyleProp, ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ViewProps} from '../View/ViewPropTypes';
-import type {SyntheticEvent, ScrollEvent} from '../../Types/CoreEventTypes';
-import type {PressEvent} from '../../Types/CoreEventTypes';
+import type {
+  SyntheticEvent,
+  ScrollEvent,
+  PressEvent,
+} from '../../Types/CoreEventTypes';
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {TextInputNativeCommands} from './TextInputNativeCommands';
 
-const {useEffect, useRef, useState} = React;
+const {useLayoutEffect, useRef, useState} = React;
 
 type ReactRefSetter<T> = {current: null | T, ...} | ((ref: null | T) => mixed);
 
@@ -141,10 +146,10 @@ export type KeyboardType =
   | 'phone-pad'
   | 'number-pad'
   | 'decimal-pad'
+  | 'url'
   // iOS-only
   | 'ascii-capable'
   | 'numbers-and-punctuation'
-  | 'url'
   | 'name-phone-pad'
   | 'twitter'
   | 'web-search'
@@ -206,26 +211,6 @@ export type TextContentType =
 type PasswordRules = string;
 
 type IOSProps = $ReadOnly<{|
-  /**
-   * If `false`, disables spell-check style (i.e. red underlines).
-   * The default value is inherited from `autoCorrect`.
-   * @platform ios
-   */
-  spellCheck?: ?boolean,
-
-  /**
-   * Determines the color of the keyboard.
-   * @platform ios
-   */
-  keyboardAppearance?: ?('default' | 'light' | 'dark'),
-
-  /**
-   * 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,
-
   /**
    * When the clear button should appear on the right side of the text view.
    * This property is supported only for single-line TextInput component.
@@ -261,6 +246,13 @@ type IOSProps = $ReadOnly<{|
     | ?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
@@ -270,11 +262,10 @@ type IOSProps = $ReadOnly<{|
   inputAccessoryViewID?: ?string,
 
   /**
-   * Give the keyboard and the system information about the
-   * expected semantic meaning for the content that users enter.
+   * Determines the color of the keyboard.
    * @platform ios
    */
-  textContentType?: ?TextContentType,
+  keyboardAppearance?: ?('default' | 'light' | 'dark'),
 
   /**
    * Provide rules for your password.
@@ -299,6 +290,20 @@ type IOSProps = $ReadOnly<{|
    * @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.
+   * @platform ios
+   */
+  textContentType?: ?TextContentType,
 |}>;
 
 type AndroidProps = $ReadOnly<{|
@@ -326,35 +331,46 @@ type AndroidProps = $ReadOnly<{|
    *
    * @platform android
    */
-  autoCompleteType?: ?(
+  autoComplete?: ?(
+    | 'birthdate-day'
+    | 'birthdate-full'
+    | 'birthdate-month'
+    | 'birthdate-year'
     | 'cc-csc'
     | 'cc-exp'
+    | 'cc-exp-day'
     | 'cc-exp-month'
     | 'cc-exp-year'
     | 'cc-number'
     | 'email'
+    | 'gender'
     | 'name'
+    | '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'
     | 'postal-code'
     | 'street-address'
+    | 'sms-otp'
     | 'tel'
+    | 'tel-country-code'
+    | 'tel-national'
+    | 'tel-device'
     | 'username'
+    | 'username-new'
     | 'off'
   ),
 
-  /**
-   * Sets the return key to the label. Use it instead of `returnKeyType`.
-   * @platform android
-   */
-  returnKeyLabel?: ?string,
-
-  /**
-   * 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,
-
   /**
    * 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
@@ -365,18 +381,13 @@ type AndroidProps = $ReadOnly<{|
    */
   disableFullscreenUI?: ?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,
+  importantForAutofill?: ?(
+    | 'auto'
+    | 'no'
+    | 'noExcludeDescendants'
+    | 'yes'
+    | 'yesExcludeDescendants'
+  ),
 
   /**
    * If defined, the provided image resource will be rendered on the left.
@@ -397,19 +408,37 @@ type AndroidProps = $ReadOnly<{|
    */
   inlineImagePadding?: ?number,
 
-  importantForAutofill?: ?(
-    | 'auto'
-    | 'no'
-    | 'noExcludeDescendants'
-    | 'yes'
-    | 'yesExcludeDescendants'
-  ),
+  /**
+   * 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,
 
   /**
    * 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 Props = $ReadOnly<{|
@@ -445,19 +474,46 @@ export type Props = $ReadOnly<{|
   allowFontScaling?: ?boolean,
 
   /**
-   * 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
+   * 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.
    */
-  maxFontSizeMultiplier?: ?number,
+  blurOnSubmit?: ?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 diabled 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?: ?ReactRefSetter<
+    React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
+  >,
+
   /**
    * Determines which keyboard to open, e.g.`numeric`.
    *
@@ -469,6 +525,7 @@ export type Props = $ReadOnly<{|
    * - `decimal-pad`
    * - `email-address`
    * - `phone-pad`
+   * - `url`
    *
    * *iOS Only*
    *
@@ -476,7 +533,6 @@ export type Props = $ReadOnly<{|
    *
    * - `ascii-capable`
    * - `numbers-and-punctuation`
-   * - `url`
    * - `name-phone-pad`
    * - `twitter`
    * - `web-search`
@@ -486,42 +542,18 @@ export type Props = $ReadOnly<{|
    * The following values work on Android only:
    *
    * - `visible-password`
+   *
    */
   keyboardType?: ?KeyboardType,
 
   /**
-   * 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`
+   * 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
    */
-  returnKeyType?: ?ReturnKeyType,
+  maxFontSizeMultiplier?: ?number,
 
   /**
    * Limits the maximum number of characters that can be entered. Use this
@@ -540,11 +572,6 @@ export type Props = $ReadOnly<{|
    */
   onBlur?: ?(e: BlurEvent) => mixed,
 
-  /**
-   * Callback that is called when the text input is focused.
-   */
-  onFocus?: ?(e: FocusEvent) => mixed,
-
   /**
    * Callback that is called when the text input's text changes.
    */
@@ -570,6 +597,30 @@ export type Props = $ReadOnly<{|
    */
   onEndEditing?: ?(e: EditingEvent) => mixed,
 
+  /**
+   * Callback that is called when the text input is focused.
+   */
+  onFocus?: ?(e: FocusEvent) => 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: KeyPressEvent) => mixed,
+
+  /**
+   * Called when a touch is engaged.
+   */
+  onPressIn?: ?(event: PressEvent) => mixed,
+
+  /**
+   * Called when a touch is released.
+   */
+  onPressOut?: ?(event: PressEvent) => mixed,
+
   /**
    * Callback that is called when the text input selection is changed.
    * This will be called with
@@ -583,15 +634,6 @@ export type Props = $ReadOnly<{|
    */
   onSubmitEditing?: ?(e: EditingEvent) => 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: KeyPressEvent) => mixed,
-
   /**
    * Invoked on content scroll with `{ nativeEvent: { contentOffset: { x, y } } }`.
    * May also contain other properties from ScrollEvent but on Android contentSize
@@ -610,15 +652,44 @@ export type Props = $ReadOnly<{|
   placeholderTextColor?: ?ColorValue,
 
   /**
-   * 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}'.
+   * 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`
    */
-  secureTextEntry?: ?boolean,
+  returnKeyType?: ?ReturnKeyType,
 
   /**
-   * The highlight and cursor color of the text input.
+   * 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}'.
    */
-  selectionColor?: ?ColorValue,
+  secureTextEntry?: ?boolean,
 
   /**
    * The start and end of the text input's selection. Set start and end to
@@ -630,37 +701,15 @@ export type Props = $ReadOnly<{|
   |}>,
 
   /**
-   * 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.
-   */
-  value?: ?Stringish,
-
-  /**
-   * 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.
+   * The highlight and cursor color of the text input.
    */
-  defaultValue?: ?Stringish,
+  selectionColor?: ?ColorValue,
 
   /**
    * If `true`, all text will automatically be selected on focus.
    */
   selectTextOnFocus?: ?boolean,
 
-  /**
-   * 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.
-   */
-  blurOnSubmit?: ?boolean,
-
   /**
    * Note that not all Text styles are supported, an incomplete list of what is not supported includes:
    *
@@ -681,19 +730,15 @@ export type Props = $ReadOnly<{|
   style?: ?TextStyleProp,
 
   /**
-   * If `true`, caret is hidden. The default value is `false`.
-   * This property is supported only for single-line TextInput component on iOS.
-   */
-  caretHidden?: ?boolean,
-
-  /*
-   * If `true`, contextMenuHidden is hidden. The default value is `false`.
+   * 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.
    */
-  contextMenuHidden?: ?boolean,
-
-  forwardedRef?: ?ReactRefSetter<
-    React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
-  >,
+  value?: ?Stringish,
 |}>;
 
 type ImperativeMethods = $ReadOnly<{|
@@ -826,6 +871,8 @@ function InternalTextInput(props: Props): React.Node {
   // Therefore, we ignore selections and pass them through until the selection event has
   // been sent.
   // Note that this mitigation is NOT needed for Fabric.
+  // discovered when upgrading react-hooks
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   let selection: ?Selection =
     props.selection == null
       ? null
@@ -850,13 +897,14 @@ function InternalTextInput(props: Props): React.Node {
     selection = null;
   }
 
-  let viewCommands: TextInputNativeCommands<HostComponent<any>>;
+  let viewCommands;
   if (AndroidTextInputCommands) {
     viewCommands = AndroidTextInputCommands;
   } else {
-    viewCommands = props.multiline
-      ? RCTMultilineTextInputNativeCommands
-      : RCTSinglelineTextInputNativeCommands;
+    viewCommands =
+      props.multiline === true
+        ? RCTMultilineTextInputNativeCommands
+        : RCTSinglelineTextInputNativeCommands;
   }
 
   const text =
@@ -869,7 +917,7 @@ function InternalTextInput(props: Props): React.Node {
   // 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.
-  useEffect(() => {
+  useLayoutEffect(() => {
     const nativeUpdate = {};
 
     if (lastNativeText !== props.value && typeof props.value === 'string') {
@@ -912,7 +960,7 @@ function InternalTextInput(props: Props): React.Node {
     viewCommands,
   ]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const inputRefValue = inputRef.current;
 
     if (inputRefValue != null) {
@@ -920,19 +968,14 @@ function InternalTextInput(props: Props): React.Node {
 
       return () => {
         TextInputState.unregisterInput(inputRefValue);
+
+        if (TextInputState.currentlyFocusedInput() === inputRefValue) {
+          nullthrows(inputRefValue).blur();
+        }
       };
     }
   }, [inputRef]);
 
-  useEffect(() => {
-    // When unmounting we need to blur the input
-    return () => {
-      if (isFocused()) {
-        nullthrows(inputRef.current).blur();
-      }
-    };
-  }, [inputRef]);
-
   function clear(): void {
     if (inputRef.current != null) {
       viewCommands.setTextAndSelection(
@@ -989,12 +1032,6 @@ function InternalTextInput(props: Props): React.Node {
     },
   });
 
-  const _onPress = (event: PressEvent) => {
-    if (props.editable || props.editable === undefined) {
-      nullthrows(inputRef.current).focus();
-    }
-  };
-
   const _onChange = (event: ChangeEvent) => {
     const text = event.nativeEvent.text;
     props.onChange && props.onChange(event);
@@ -1048,36 +1085,68 @@ function InternalTextInput(props: Props): React.Node {
   };
 
   let textInput = null;
-  let additionalTouchableProps: {|
-    rejectResponderTermination?: $PropertyType<
-      Props,
-      'rejectResponderTermination',
-    >,
-    // This is a hack to let Flow know we want an exact object
-  |} = {...null};
 
   // The default value for `blurOnSubmit` is true for single-line fields and
   // false for multi-line fields.
   const blurOnSubmit = props.blurOnSubmit ?? !props.multiline;
 
-  if (Platform.OS === 'ios') {
-    const RCTTextInputView = props.multiline
-      ? RCTMultilineTextInputView
-      : RCTSinglelineTextInputView;
+  const accessible = props.accessible !== false;
+  const focusable = props.focusable !== false;
+
+  const config = React.useMemo(
+    () => ({
+      onPress: (event: PressEvent) => {
+        if (props.editable !== false) {
+          if (inputRef.current != null) {
+            inputRef.current.focus();
+          }
+        }
+      },
+      onPressIn: props.onPressIn,
+      onPressOut: props.onPressOut,
+      cancelable:
+        Platform.OS === 'ios' ? !props.rejectResponderTermination : null,
+    }),
+    [
+      props.editable,
+      props.onPressIn,
+      props.onPressOut,
+      props.rejectResponderTermination,
+    ],
+  );
+
+  // Hide caret during test runs due to a flashing caret
+  // makes screenshot tests flakey
+  let caretHidden = props.caretHidden;
+  if (Platform.isTesting) {
+    caretHidden = true;
+  }
 
-    const style = props.multiline
-      ? [styles.multilineInput, props.style]
-      : props.style;
+  // TextInput handles onBlur and onFocus events
+  // so omitting onBlur and onFocus pressability handlers here.
+  const {onBlur, onFocus, ...eventHandlers} = usePressability(config) || {};
+
+  if (Platform.OS === 'ios') {
+    const RCTTextInputView =
+      props.multiline === true
+        ? RCTMultilineTextInputView
+        : RCTSinglelineTextInputView;
 
-    additionalTouchableProps.rejectResponderTermination =
-      props.rejectResponderTermination;
+    const style =
+      props.multiline === true
+        ? [styles.multilineInput, props.style]
+        : props.style;
 
     textInput = (
       <RCTTextInputView
         ref={_setNativeRef}
         {...props}
+        {...eventHandlers}
+        accessible={accessible}
         blurOnSubmit={blurOnSubmit}
+        caretHidden={caretHidden}
         dataDetectorTypes={props.dataDetectorTypes}
+        focusable={focusable}
         mostRecentEventCount={mostRecentEventCount}
         onBlur={_onBlur}
         onChange={_onChange}
@@ -1094,10 +1163,11 @@ function InternalTextInput(props: Props): React.Node {
   } else if (Platform.OS === 'android') {
     const style = [props.style];
     const autoCapitalize = props.autoCapitalize || 'sentences';
+    const placeholder = props.placeholder ?? '';
     let children = props.children;
     const childCount = React.Children.count(children);
     invariant(
-      !(props.value && childCount),
+      !(props.value != null && childCount),
       'Cannot specify both value and children.',
     );
     if (childCount > 1) {
@@ -1105,23 +1175,38 @@ function InternalTextInput(props: Props): React.Node {
     }
 
     textInput = (
-      /* $FlowFixMe the types for AndroidTextInput don't match up exactly with
-        the props for TextInput. This will need to get fixed */
+      /* $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] 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 don't
+       * match up exactly with the props for TextInput. This will need to get
+       * fixed */
       <AndroidTextInput
         ref={_setNativeRef}
         {...props}
+        {...eventHandlers}
+        accessible={accessible}
         autoCapitalize={autoCapitalize}
         blurOnSubmit={blurOnSubmit}
+        caretHidden={caretHidden}
         children={children}
         disableFullscreenUI={props.disableFullscreenUI}
+        focusable={focusable}
         mostRecentEventCount={mostRecentEventCount}
         onBlur={_onBlur}
         onChange={_onChange}
         onFocus={_onFocus}
-        /* $FlowFixMe the types for AndroidTextInput don't match up exactly
-         * with the props for TextInput. This will need to get fixed */
+        /* $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
+         * don't match up exactly with the props for TextInput. This will need
+         * to get fixed */
         onScroll={_onScroll}
         onSelectionChange={_onSelectionChange}
+        placeholder={placeholder}
         selection={selection}
         style={style}
         text={text}
@@ -1130,20 +1215,7 @@ function InternalTextInput(props: Props): React.Node {
     );
   }
   return (
-    <TextAncestor.Provider value={true}>
-      <TouchableWithoutFeedback
-        onLayout={props.onLayout}
-        onPress={_onPress}
-        accessible={props.accessible}
-        accessibilityLabel={props.accessibilityLabel}
-        accessibilityRole={props.accessibilityRole}
-        accessibilityState={props.accessibilityState}
-        nativeID={props.nativeID}
-        testID={props.testID}
-        {...additionalTouchableProps}>
-        {textInput}
-      </TouchableWithoutFeedback>
-    </TextAncestor.Provider>
+    <TextAncestor.Provider value={true}>{textInput}</TextAncestor.Provider>
   );
 }
 
@@ -1151,26 +1223,31 @@ const ExportedForwardRef: React.AbstractComponent<
   React.ElementConfig<typeof InternalTextInput>,
   React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
 > = React.forwardRef(function TextInput(
-  props,
+  {
+    allowFontScaling = true,
+    rejectResponderTermination = true,
+    underlineColorAndroid = 'transparent',
+    ...restProps
+  },
   forwardedRef: ReactRefSetter<
     React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
   >,
 ) {
-  return <InternalTextInput {...props} forwardedRef={forwardedRef} />;
+  return (
+    <InternalTextInput
+      allowFontScaling={allowFontScaling}
+      rejectResponderTermination={rejectResponderTermination}
+      underlineColorAndroid={underlineColorAndroid}
+      {...restProps}
+      forwardedRef={forwardedRef}
+    />
+  );
 });
 
-// $FlowFixMe
-ExportedForwardRef.defaultProps = {
-  allowFontScaling: true,
-  rejectResponderTermination: true,
-  underlineColorAndroid: 'transparent',
-};
-
 // TODO: Deprecate this
-// $FlowFixMe
 ExportedForwardRef.propTypes = DeprecatedTextInputPropTypes;
 
-// $FlowFixMe
+// $FlowFixMe[prop-missing]
 ExportedForwardRef.State = {
   currentlyFocusedInput: TextInputState.currentlyFocusedInput,
 
@@ -1198,6 +1275,7 @@ const styles = StyleSheet.create({
   },
 });
 
+// $FlowFixMe[unclear-type] Unclear type. Using `any` type is not safe.
 module.exports = ((ExportedForwardRef: any): React.AbstractComponent<
   React.ElementConfig<typeof InternalTextInput>,
   $ReadOnly<{|