Align TextInput types with TypeScript (#48972)

Summary:

Changelog: [Internal]

Align TextInput types with TypeScript definitions.

Reviewed By: huntie

Differential Revision: D68713179

packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js

@@ -76,7 +76,7 @@ import * as React from 'react';
  * For an example, look at InputAccessoryViewExample.js in RNTester.
  */
 
-type Props = $ReadOnly<{
+export type InputAccessoryViewProps = $ReadOnly<{
   +children: React.Node,
   /**
    * An ID which is used to associate this `InputAccessoryView` to
@@ -87,7 +87,9 @@ type Props = $ReadOnly<{
   backgroundColor?: ?ColorValue,
 }>;
 
-const InputAccessoryView: React.ComponentType<Props> = (props: Props) => {
+const InputAccessoryView: React.ComponentType<InputAccessoryViewProps> = (
+  props: InputAccessoryViewProps,
+) => {
   const {width} = useWindowDimensions();
 
   if (Platform.OS === 'ios') {

packages/react-native/Libraries/Components/TextInput/TextInput.flow.js

@@ -25,13 +25,13 @@ import * as React from 'react';
 
 type ReactRefSetter<T> = {current: null | T, ...} | ((ref: null | T) => mixed);
 
-export type ChangeEvent = SyntheticEvent<
-  $ReadOnly<{
-    eventCount: number,
-    target: number,
-    text: string,
-  }>,
->;
+export type TextInputChangeEventData = $ReadOnly<{
+  eventCount: number,
+  target: number,
+  text: string,
+}>;
+
+export type TextInputChangeEvent = SyntheticEvent<TextInputChangeEventData>;
 
 export type TextInputEvent = SyntheticEvent<
   $ReadOnly<{
@@ -46,52 +46,56 @@ export type TextInputEvent = SyntheticEvent<
   }>,
 >;
 
-export type ContentSizeChangeEvent = SyntheticEvent<
-  $ReadOnly<{
-    target: number,
-    contentSize: $ReadOnly<{
-      width: number,
-      height: number,
-    }>,
+export type TextInputContentSizeChangeEventData = $ReadOnly<{
+  target: number,
+  contentSize: $ReadOnly<{
+    width: number,
+    height: number,
   }>,
->;
+}>;
 
-type TargetEvent = SyntheticEvent<
-  $ReadOnly<{
-    target: number,
-  }>,
->;
+export type TextInputContentSizeChangeEvent =
+  SyntheticEvent<TextInputContentSizeChangeEventData>;
 
-export type BlurEvent = TargetEvent;
-export type FocusEvent = TargetEvent;
+export type TargetEvent = $ReadOnly<{
+  target: number,
+}>;
+
+export type TextInputFocusEventData = TargetEvent;
+
+export type TextInputBlurEvent = SyntheticEvent<TextInputFocusEventData>;
+export type TextInputFocusEvent = SyntheticEvent<TextInputFocusEventData>;
 
 type Selection = $ReadOnly<{
   start: number,
   end: number,
 }>;
 
-export type SelectionChangeEvent = SyntheticEvent<
-  $ReadOnly<{
-    selection: Selection,
-    target: number,
-  }>,
->;
+export type TextInputSelectionChangeEventData = $ReadOnly<{
+  ...TargetEvent,
+  selection: Selection,
+}>;
 
-export type KeyPressEvent = SyntheticEvent<
-  $ReadOnly<{
-    key: string,
-    target?: ?number,
-    eventCount?: ?number,
-  }>,
->;
+export type TextInputSelectionChangeEvent =
+  SyntheticEvent<TextInputSelectionChangeEventData>;
 
-export type EditingEvent = SyntheticEvent<
-  $ReadOnly<{
-    eventCount: number,
-    text: string,
-    target: number,
-  }>,
->;
+export type TextInputKeyPressEventData = $ReadOnly<{
+  ...TargetEvent,
+  key: string,
+  target?: ?number,
+  eventCount: number,
+}>;
+
+export type TextInputKeyPressEvent = SyntheticEvent<TextInputKeyPressEventData>;
+
+export type TextInputEndEditingEventData = $ReadOnly<{
+  ...TargetEvent,
+  eventCount: number,
+  text: string,
+}>;
+
+export type TextInputEditingEvent =
+  SyntheticEvent<TextInputEndEditingEventData>;
 
 type DataDetectorTypesType =
   | 'phoneNumber'
@@ -105,26 +109,31 @@ type DataDetectorTypesType =
   | 'all';
 
 export type KeyboardType =
-  // Cross Platform
   | 'default'
   | 'email-address'
   | 'numeric'
   | 'phone-pad'
   | 'number-pad'
   | 'decimal-pad'
-  | 'url'
-  // iOS-only
+  | 'url';
+
+export type KeyboardTypeIOS =
   | 'ascii-capable'
   | 'numbers-and-punctuation'
   | 'name-phone-pad'
   | 'twitter'
   | 'web-search'
   // iOS 10+ only
-  | 'ascii-capable-number-pad'
-  // Android-only
-  | 'visible-password';
+  | 'ascii-capable-number-pad';
 
-export type InputMode =
+export type KeyboardTypeAndroid = 'visible-password';
+
+export type KeyboardTypeOptions =
+  | KeyboardType
+  | KeyboardTypeIOS
+  | KeyboardTypeAndroid;
+
+export type InputModeOptions =
   | 'none'
   | 'text'
   | 'decimal'
@@ -134,17 +143,9 @@ export type InputMode =
   | 'email'
   | 'url';
 
-export type ReturnKeyType =
-  // Cross Platform
-  | 'done'
-  | 'go'
-  | 'next'
-  | 'search'
-  | 'send'
-  // Android-only
-  | 'none'
-  | 'previous'
-  // iOS-only
+export type ReturnKeyType = 'done' | 'go' | 'next' | 'search' | 'send';
+
+export type ReturnKeyTypeIOS =
   | 'default'
   | 'emergency-call'
   | 'google'
@@ -152,6 +153,13 @@ export type ReturnKeyType =
   | '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';
@@ -204,18 +212,20 @@ export type TextContentType =
   | 'flightNumber'
   | 'shipmentTrackingNumber';
 
-export type enterKeyHintType =
-  | 'enter'
-  | 'done'
-  | 'go'
-  | 'next'
-  | 'previous'
-  | 'search'
-  | 'send';
+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;
 
-type IOSProps = $ReadOnly<{
+export type TextInputIOSProps = $ReadOnly<{
   /**
    * If true, the keyboard shortcuts (undo/redo and copy buttons) are disabled. The default value is false.
    * @platform ios
@@ -352,7 +362,7 @@ type IOSProps = $ReadOnly<{
   smartInsertDelete?: ?boolean,
 }>;
 
-type AndroidProps = $ReadOnly<{
+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
@@ -446,10 +456,10 @@ type AndroidProps = $ReadOnly<{
   underlineColorAndroid?: ?ColorValue,
 }>;
 
-export type Props = $ReadOnly<{
+export type TextInputProps = $ReadOnly<{
   ...$Diff<ViewProps, $ReadOnly<{style: ?ViewStyleProp}>>,
-  ...IOSProps,
-  ...AndroidProps,
+  ...TextInputIOSProps,
+  ...TextInputAndroidProps,
 
   /**
    * Can tell `TextInput` to automatically capitalize certain characters.
@@ -652,7 +662,7 @@ export type Props = $ReadOnly<{
    * - `search`
    * - `send`
    */
-  enterKeyHint?: ?enterKeyHintType,
+  enterKeyHint?: ?EnterKeyHintTypeOptions,
 
   /**
    * `inputMode` works like the `inputmode` attribute in HTML, it determines which
@@ -669,7 +679,7 @@ export type Props = $ReadOnly<{
    * - `email`
    * - `url`
    */
-  inputMode?: ?InputMode,
+  inputMode?: ?InputModeOptions,
 
   /**
    * Determines which keyboard to open, e.g.`numeric`.
@@ -701,7 +711,7 @@ export type Props = $ReadOnly<{
    * - `visible-password`
    *
    */
-  keyboardType?: ?KeyboardType,
+  keyboardType?: ?KeyboardTypeOptions,
 
   /**
    * Specifies largest possible scale a font can reach when `allowFontScaling` is enabled.
@@ -727,12 +737,12 @@ export type Props = $ReadOnly<{
   /**
    * Callback that is called when the text input is blurred.
    */
-  onBlur?: ?(e: BlurEvent) => mixed,
+  onBlur?: ?(e: TextInputBlurEvent) => mixed,
 
   /**
    * Callback that is called when the text input's text changes.
    */
-  onChange?: ?(e: ChangeEvent) => mixed,
+  onChange?: ?(e: TextInputChangeEvent) => mixed,
 
   /**
    * DANGER: this API is not stable and will change in the future.
@@ -742,7 +752,7 @@ export type Props = $ReadOnly<{
    *
    * @platform ios
    */
-  unstable_onChangeSync?: ?(e: ChangeEvent) => mixed,
+  unstable_onChangeSync?: ?(e: TextInputChangeEvent) => mixed,
 
   /**
    * Callback that is called when the text input's text changes.
@@ -768,17 +778,17 @@ export type Props = $ReadOnly<{
    *
    * Only called for multiline text inputs.
    */
-  onContentSizeChange?: ?(e: ContentSizeChangeEvent) => mixed,
+  onContentSizeChange?: ?(e: TextInputContentSizeChangeEvent) => mixed,
 
   /**
    * Callback that is called when text input ends.
    */
-  onEndEditing?: ?(e: EditingEvent) => mixed,
+  onEndEditing?: ?(e: TextInputEditingEvent) => mixed,
 
   /**
    * Callback that is called when the text input is focused.
    */
-  onFocus?: ?(e: FocusEvent) => mixed,
+  onFocus?: ?(e: TextInputFocusEvent) => mixed,
 
   /**
    * Callback that is called when a key is pressed.
@@ -787,7 +797,7 @@ export type Props = $ReadOnly<{
    * the typed-in character otherwise including `' '` for space.
    * Fires before `onChange` callbacks.
    */
-  onKeyPress?: ?(e: KeyPressEvent) => mixed,
+  onKeyPress?: ?(e: TextInputKeyPressEvent) => mixed,
 
   /**
    * DANGER: this API is not stable and will change in the future.
@@ -802,7 +812,7 @@ export type Props = $ReadOnly<{
    *
    * @platform ios
    */
-  unstable_onKeyPressSync?: ?(e: KeyPressEvent) => mixed,
+  unstable_onKeyPressSync?: ?(e: TextInputKeyPressEvent) => mixed,
 
   /**
    * Called when a single tap gesture is detected.
@@ -824,13 +834,13 @@ export type Props = $ReadOnly<{
    * This will be called with
    * `{ nativeEvent: { selection: { start, end } } }`.
    */
-  onSelectionChange?: ?(e: SelectionChangeEvent) => mixed,
+  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: EditingEvent) => mixed,
+  onSubmitEditing?: ?(e: TextInputEditingEvent) => mixed,
 
   /**
    * Invoked on content scroll with `{ nativeEvent: { contentOffset: { x, y } } }`.
@@ -888,7 +898,7 @@ export type Props = $ReadOnly<{
    * - `route`
    * - `yahoo`
    */
-  returnKeyType?: ?ReturnKeyType,
+  returnKeyType?: ?ReturnKeyTypeOptions,
 
   /**
    * If `true`, the text input obscures the text entered so that sensitive text
@@ -1100,7 +1110,7 @@ type ImperativeMethods = $ReadOnly<{
  */
 type InternalTextInput = component(
   ref: React.RefSetter<$ReadOnly<{...HostInstance, ...ImperativeMethods}>>,
-  ...Props
+  ...TextInputProps
 );
 
 export type TextInputComponentStatics = $ReadOnly<{

packages/react-native/Libraries/Components/TextInput/TextInput.js

@@ -66,13 +66,13 @@ if (Platform.OS === 'android') {
     require('./RCTMultilineTextInputNativeComponent').Commands;
 }
 
-export type ChangeEvent = SyntheticEvent<
-  $ReadOnly<{
-    eventCount: number,
-    target: number,
-    text: string,
-  }>,
->;
+export type TextInputChangeEventData = $ReadOnly<{
+  eventCount: number,
+  target: number,
+  text: string,
+}>;
+
+export type TextInputChangeEvent = SyntheticEvent<TextInputChangeEventData>;
 
 export type TextInputEvent = SyntheticEvent<
   $ReadOnly<{
@@ -87,52 +87,56 @@ export type TextInputEvent = SyntheticEvent<
   }>,
 >;
 
-export type ContentSizeChangeEvent = SyntheticEvent<
-  $ReadOnly<{
-    target: number,
-    contentSize: $ReadOnly<{
-      width: number,
-      height: number,
-    }>,
+export type TextInputContentSizeChangeEventData = $ReadOnly<{
+  target: number,
+  contentSize: $ReadOnly<{
+    width: number,
+    height: number,
   }>,
->;
+}>;
 
-type TargetEvent = SyntheticEvent<
-  $ReadOnly<{
-    target: number,
-  }>,
->;
+export type TextInputContentSizeChangeEvent =
+  SyntheticEvent<TextInputContentSizeChangeEventData>;
 
-export type BlurEvent = TargetEvent;
-export type FocusEvent = TargetEvent;
+export type TargetEvent = $ReadOnly<{
+  target: number,
+}>;
+
+export type TextInputFocusEventData = TargetEvent;
+
+export type TextInputBlurEvent = SyntheticEvent<TextInputFocusEventData>;
+export type TextInputFocusEvent = SyntheticEvent<TextInputFocusEventData>;
 
 type Selection = $ReadOnly<{
   start: number,
   end: number,
 }>;
 
-export type SelectionChangeEvent = SyntheticEvent<
-  $ReadOnly<{
-    selection: Selection,
-    target: number,
-  }>,
->;
+export type TextInputSelectionChangeEventData = $ReadOnly<{
+  ...TargetEvent,
+  selection: Selection,
+}>;
 
-export type KeyPressEvent = SyntheticEvent<
-  $ReadOnly<{
-    key: string,
-    target?: ?number,
-    eventCount?: ?number,
-  }>,
->;
+export type TextInputSelectionChangeEvent =
+  SyntheticEvent<TextInputSelectionChangeEventData>;
 
-export type EditingEvent = SyntheticEvent<
-  $ReadOnly<{
-    eventCount: number,
-    text: string,
-    target: number,
-  }>,
->;
+type TextInputKeyPressEventData = $ReadOnly<{
+  ...TargetEvent,
+  key: string,
+  target?: ?number,
+  eventCount?: ?number,
+}>;
+
+export type TextInputKeyPressEvent = SyntheticEvent<TextInputKeyPressEventData>;
+
+export type TextInputEndEditingEventData = $ReadOnly<{
+  ...TargetEvent,
+  eventCount: number,
+  text: string,
+}>;
+
+export type TextInputEditingEvent =
+  SyntheticEvent<TextInputEndEditingEventData>;
 
 type DataDetectorTypesType =
   | 'phoneNumber'
@@ -146,26 +150,31 @@ type DataDetectorTypesType =
   | 'all';
 
 export type KeyboardType =
-  // Cross Platform
   | 'default'
   | 'email-address'
   | 'numeric'
   | 'phone-pad'
   | 'number-pad'
   | 'decimal-pad'
-  | 'url'
-  // iOS-only
+  | 'url';
+
+export type KeyboardTypeIOS =
   | 'ascii-capable'
   | 'numbers-and-punctuation'
   | 'name-phone-pad'
   | 'twitter'
   | 'web-search'
   // iOS 10+ only
-  | 'ascii-capable-number-pad'
-  // Android-only
-  | 'visible-password';
+  | 'ascii-capable-number-pad';
 
-export type InputMode =
+export type KeyboardTypeAndroid = 'visible-password';
+
+export type KeyboardTypeOptions =
+  | KeyboardType
+  | KeyboardTypeIOS
+  | KeyboardTypeAndroid;
+
+export type InputModeOptions =
   | 'none'
   | 'text'
   | 'decimal'
@@ -175,17 +184,9 @@ export type InputMode =
   | 'email'
   | 'url';
 
-export type ReturnKeyType =
-  // Cross Platform
-  | 'done'
-  | 'go'
-  | 'next'
-  | 'search'
-  | 'send'
-  // Android-only
-  | 'none'
-  | 'previous'
-  // iOS-only
+export type ReturnKeyType = 'done' | 'go' | 'next' | 'search' | 'send';
+
+export type ReturnKeyTypeIOS =
   | 'default'
   | 'emergency-call'
   | 'google'
@@ -193,6 +194,13 @@ export type ReturnKeyType =
   | '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';
@@ -245,21 +253,20 @@ export type TextContentType =
   | 'flightNumber'
   | 'shipmentTrackingNumber';
 
-export type enterKeyHintType =
-  // Cross Platform
-  | 'done'
-  | 'go'
-  | 'next'
-  | 'search'
-  | 'send'
-  // Android-only
-  | 'previous'
-  // iOS-only
-  | 'enter';
+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;
 
-type IOSProps = $ReadOnly<{
+export type TextInputIOSProps = $ReadOnly<{
   /**
    * If true, the keyboard shortcuts (undo/redo and copy buttons) are disabled. The default value is false.
    * @platform ios
@@ -399,7 +406,7 @@ type IOSProps = $ReadOnly<{
   smartInsertDelete?: ?boolean,
 }>;
 
-type AndroidProps = $ReadOnly<{
+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
@@ -485,10 +492,10 @@ type AndroidProps = $ReadOnly<{
   underlineColorAndroid?: ?ColorValue,
 }>;
 
-export type Props = $ReadOnly<{
+export type TextInputProps = $ReadOnly<{
   ...$Diff<ViewProps, $ReadOnly<{style: ?ViewStyleProp}>>,
-  ...IOSProps,
-  ...AndroidProps,
+  ...TextInputIOSProps,
+  ...TextInputAndroidProps,
 
   /**
    * Can tell `TextInput` to automatically capitalize certain characters.
@@ -691,7 +698,7 @@ export type Props = $ReadOnly<{
    * - `search`
    * - `send`
    */
-  enterKeyHint?: ?enterKeyHintType,
+  enterKeyHint?: ?EnterKeyHintTypeOptions,
 
   /**
    * `inputMode` works like the `inputmode` attribute in HTML, it determines which
@@ -708,7 +715,7 @@ export type Props = $ReadOnly<{
    * - `email`
    * - `url`
    */
-  inputMode?: ?InputMode,
+  inputMode?: ?InputModeOptions,
 
   /**
    * Determines which keyboard to open, e.g.`numeric`.
@@ -740,7 +747,7 @@ export type Props = $ReadOnly<{
    * - `visible-password`
    *
    */
-  keyboardType?: ?KeyboardType,
+  keyboardType?: ?KeyboardTypeOptions,
 
   /**
    * Specifies largest possible scale a font can reach when `allowFontScaling` is enabled.
@@ -766,12 +773,12 @@ export type Props = $ReadOnly<{
   /**
    * Callback that is called when the text input is blurred.
    */
-  onBlur?: ?(e: BlurEvent) => mixed,
+  onBlur?: ?(e: TextInputBlurEvent) => mixed,
 
   /**
    * Callback that is called when the text input's text changes.
    */
-  onChange?: ?(e: ChangeEvent) => mixed,
+  onChange?: ?(e: TextInputChangeEvent) => mixed,
 
   /**
    * Callback that is called when the text input's text changes.
@@ -786,17 +793,17 @@ export type Props = $ReadOnly<{
    *
    * Only called for multiline text inputs.
    */
-  onContentSizeChange?: ?(e: ContentSizeChangeEvent) => mixed,
+  onContentSizeChange?: ?(e: TextInputContentSizeChangeEvent) => mixed,
 
   /**
    * Callback that is called when text input ends.
    */
-  onEndEditing?: ?(e: EditingEvent) => mixed,
+  onEndEditing?: ?(e: TextInputEditingEvent) => mixed,
 
   /**
    * Callback that is called when the text input is focused.
    */
-  onFocus?: ?(e: FocusEvent) => mixed,
+  onFocus?: ?(e: TextInputFocusEvent) => mixed,
 
   /**
    * Callback that is called when a key is pressed.
@@ -805,7 +812,7 @@ export type Props = $ReadOnly<{
    * the typed-in character otherwise including `' '` for space.
    * Fires before `onChange` callbacks.
    */
-  onKeyPress?: ?(e: KeyPressEvent) => mixed,
+  onKeyPress?: ?(e: TextInputKeyPressEvent) => mixed,
 
   /**
    * Called when a single tap gesture is detected.
@@ -827,13 +834,13 @@ export type Props = $ReadOnly<{
    * This will be called with
    * `{ nativeEvent: { selection: { start, end } } }`.
    */
-  onSelectionChange?: ?(e: SelectionChangeEvent) => mixed,
+  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: EditingEvent) => mixed,
+  onSubmitEditing?: ?(e: TextInputEditingEvent) => mixed,
 
   /**
    * Invoked on content scroll with `{ nativeEvent: { contentOffset: { x, y } } }`.
@@ -891,7 +898,7 @@ export type Props = $ReadOnly<{
    * - `route`
    * - `yahoo`
    */
-  returnKeyType?: ?ReturnKeyType,
+  returnKeyType?: ?ReturnKeyTypeOptions,
 
   /**
    * If `true`, the text input obscures the text entered so that sensitive text
@@ -1015,7 +1022,7 @@ function useTextInputStateSynchronization_STATE({
   text,
   viewCommands,
 }: {
-  props: Props,
+  props: TextInputProps,
   mostRecentEventCount: number,
   selection: ?Selection,
   inputRef: React.RefObject<null | HostInstance>,
@@ -1096,7 +1103,7 @@ function useTextInputStateSynchronization_REFS({
   text,
   viewCommands,
 }: {
-  props: Props,
+  props: TextInputProps,
   mostRecentEventCount: number,
   selection: ?Selection,
   inputRef: React.RefObject<null | HostInstance>,
@@ -1282,7 +1289,7 @@ function useTextInputStateSynchronization_REFS({
  * or control this param programmatically with native code.
  *
  */
-function InternalTextInput(props: Props): React.Node {
+function InternalTextInput(props: TextInputProps): React.Node {
   const {
     'aria-busy': ariaBusy,
     'aria-checked': ariaChecked,
@@ -1419,7 +1426,7 @@ function InternalTextInput(props: Props): React.Node {
 
   const ref = useMergeRefs<TextInputInstance>(setLocalRef, props.forwardedRef);
 
-  const _onChange = (event: ChangeEvent) => {
+  const _onChange = (event: TextInputChangeEvent) => {
     const currentText = event.nativeEvent.text;
     props.onChange && props.onChange(event);
     props.onChangeText && props.onChangeText(currentText);
@@ -1438,7 +1445,7 @@ function InternalTextInput(props: Props): React.Node {
     setMostRecentEventCount(event.nativeEvent.eventCount);
   };
 
-  const _onSelectionChange = (event: SelectionChangeEvent) => {
+  const _onSelectionChange = (event: TextInputSelectionChangeEvent) => {
     props.onSelectionChange && props.onSelectionChange(event);
 
     if (inputRef.current == null) {
@@ -1453,14 +1460,14 @@ function InternalTextInput(props: Props): React.Node {
     });
   };
 
-  const _onFocus = (event: FocusEvent) => {
+  const _onFocus = (event: TextInputFocusEvent) => {
     TextInputState.focusInput(inputRef.current);
     if (props.onFocus) {
       props.onFocus(event);
     }
   };
 
-  const _onBlur = (event: BlurEvent) => {
+  const _onBlur = (event: TextInputBlurEvent) => {
     TextInputState.blurInput(inputRef.current);
     if (props.onBlur) {
       props.onBlur(event);

packages/react-native/Libraries/Types/CoreEventTypes.js

@@ -271,12 +271,14 @@ export type ScrollEvent = SyntheticEvent<
 export type BlurEvent = SyntheticEvent<
   $ReadOnly<{
     target: number,
+    ...
   }>,
 >;
 
 export type FocusEvent = SyntheticEvent<
   $ReadOnly<{
     target: number,
+    ...
   }>,
 >;
 

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -2836,13 +2836,13 @@ declare export default HostComponent<NativeProps>;
 `;
 
 exports[`public API should not change unintentionally Libraries/Components/TextInput/InputAccessoryView.js 1`] = `
-"type Props = $ReadOnly<{
+"export type InputAccessoryViewProps = $ReadOnly<{
   +children: React.Node,
   nativeID?: ?string,
   style?: ?ViewStyleProp,
   backgroundColor?: ?ColorValue,
 }>;
-declare const InputAccessoryView: React.ComponentType<Props>;
+declare const InputAccessoryView: React.ComponentType<InputAccessoryViewProps>;
 declare export default typeof InputAccessoryView;
 "
 `;
@@ -2884,13 +2884,12 @@ exports[`public API should not change unintentionally Libraries/Components/TextI
 "type ReactRefSetter<T> =
   | { current: null | T, ... }
   | ((ref: null | T) => mixed);
-export type ChangeEvent = SyntheticEvent<
-  $ReadOnly<{
-    eventCount: number,
-    target: number,
-    text: string,
-  }>,
->;
+export type TextInputChangeEventData = $ReadOnly<{
+  eventCount: number,
+  target: number,
+  text: string,
+}>;
+export type TextInputChangeEvent = SyntheticEvent<TextInputChangeEventData>;
 export type TextInputEvent = SyntheticEvent<
   $ReadOnly<{
     eventCount: number,
@@ -2903,46 +2902,45 @@ export type TextInputEvent = SyntheticEvent<
     text: string,
   }>,
 >;
-export type ContentSizeChangeEvent = SyntheticEvent<
-  $ReadOnly<{
-    target: number,
-    contentSize: $ReadOnly<{
-      width: number,
-      height: number,
-    }>,
+export type TextInputContentSizeChangeEventData = $ReadOnly<{
+  target: number,
+  contentSize: $ReadOnly<{
+    width: number,
+    height: number,
   }>,
->;
-type TargetEvent = SyntheticEvent<
-  $ReadOnly<{
-    target: number,
-  }>,
->;
-export type BlurEvent = TargetEvent;
-export type FocusEvent = TargetEvent;
+}>;
+export type TextInputContentSizeChangeEvent =
+  SyntheticEvent<TextInputContentSizeChangeEventData>;
+export type TargetEvent = $ReadOnly<{
+  target: number,
+}>;
+export type TextInputFocusEventData = TargetEvent;
+export type TextInputBlurEvent = SyntheticEvent<TextInputFocusEventData>;
+export type TextInputFocusEvent = SyntheticEvent<TextInputFocusEventData>;
 type Selection = $ReadOnly<{
   start: number,
   end: number,
 }>;
-export type SelectionChangeEvent = SyntheticEvent<
-  $ReadOnly<{
-    selection: Selection,
-    target: number,
-  }>,
->;
-export type KeyPressEvent = SyntheticEvent<
-  $ReadOnly<{
-    key: string,
-    target?: ?number,
-    eventCount?: ?number,
-  }>,
->;
-export type EditingEvent = SyntheticEvent<
-  $ReadOnly<{
-    eventCount: number,
-    text: string,
-    target: number,
-  }>,
->;
+export type TextInputSelectionChangeEventData = $ReadOnly<{
+  ...TargetEvent,
+  selection: Selection,
+}>;
+export type TextInputSelectionChangeEvent =
+  SyntheticEvent<TextInputSelectionChangeEventData>;
+export type TextInputKeyPressEventData = $ReadOnly<{
+  ...TargetEvent,
+  key: string,
+  target?: ?number,
+  eventCount: number,
+}>;
+export type TextInputKeyPressEvent = SyntheticEvent<TextInputKeyPressEventData>;
+export type TextInputEndEditingEventData = $ReadOnly<{
+  ...TargetEvent,
+  eventCount: number,
+  text: string,
+}>;
+export type TextInputEditingEvent =
+  SyntheticEvent<TextInputEndEditingEventData>;
 type DataDetectorTypesType =
   | \\"phoneNumber\\"
   | \\"link\\"
@@ -2960,15 +2958,20 @@ export type KeyboardType =
   | \\"phone-pad\\"
   | \\"number-pad\\"
   | \\"decimal-pad\\"
-  | \\"url\\"
+  | \\"url\\";
+export type KeyboardTypeIOS =
   | \\"ascii-capable\\"
   | \\"numbers-and-punctuation\\"
   | \\"name-phone-pad\\"
   | \\"twitter\\"
   | \\"web-search\\"
-  | \\"ascii-capable-number-pad\\"
-  | \\"visible-password\\";
-export type InputMode =
+  | \\"ascii-capable-number-pad\\";
+export type KeyboardTypeAndroid = \\"visible-password\\";
+export type KeyboardTypeOptions =
+  | KeyboardType
+  | KeyboardTypeIOS
+  | KeyboardTypeAndroid;
+export type InputModeOptions =
   | \\"none\\"
   | \\"text\\"
   | \\"decimal\\"
@@ -2977,20 +2980,19 @@ export type InputMode =
   | \\"search\\"
   | \\"email\\"
   | \\"url\\";
-export type ReturnKeyType =
-  | \\"done\\"
-  | \\"go\\"
-  | \\"next\\"
-  | \\"search\\"
-  | \\"send\\"
-  | \\"none\\"
-  | \\"previous\\"
+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 =
@@ -3040,16 +3042,15 @@ export type TextContentType =
   | \\"dateTime\\"
   | \\"flightNumber\\"
   | \\"shipmentTrackingNumber\\";
-export type enterKeyHintType =
-  | \\"enter\\"
-  | \\"done\\"
-  | \\"go\\"
-  | \\"next\\"
-  | \\"previous\\"
-  | \\"search\\"
-  | \\"send\\";
+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;
-type IOSProps = $ReadOnly<{
+export type TextInputIOSProps = $ReadOnly<{
   disableKeyboardShortcuts?: ?boolean,
   clearButtonMode?: ?(\\"never\\" | \\"while-editing\\" | \\"unless-editing\\" | \\"always\\"),
   clearTextOnFocus?: ?boolean,
@@ -3076,7 +3077,7 @@ type IOSProps = $ReadOnly<{
   ),
   smartInsertDelete?: ?boolean,
 }>;
-type AndroidProps = $ReadOnly<{
+export type TextInputAndroidProps = $ReadOnly<{
   cursorColor?: ?ColorValue,
   selectionHandleColor?: ?ColorValue,
   disableFullscreenUI?: ?boolean,
@@ -3096,10 +3097,10 @@ type AndroidProps = $ReadOnly<{
   textBreakStrategy?: ?(\\"simple\\" | \\"highQuality\\" | \\"balanced\\"),
   underlineColorAndroid?: ?ColorValue,
 }>;
-export type Props = $ReadOnly<{
+export type TextInputProps = $ReadOnly<{
   ...$Diff<ViewProps, $ReadOnly<{ style: ?ViewStyleProp }>>,
-  ...IOSProps,
-  ...AndroidProps,
+  ...TextInputIOSProps,
+  ...TextInputAndroidProps,
   autoCapitalize?: ?AutoCapitalize,
   autoComplete?: ?(
     | \\"additional-name\\"
@@ -3168,32 +3169,32 @@ export type Props = $ReadOnly<{
   defaultValue?: ?Stringish,
   editable?: ?boolean,
   forwardedRef?: ?ReactRefSetter<HostInstance & ImperativeMethods>,
-  enterKeyHint?: ?enterKeyHintType,
-  inputMode?: ?InputMode,
-  keyboardType?: ?KeyboardType,
+  enterKeyHint?: ?EnterKeyHintTypeOptions,
+  inputMode?: ?InputModeOptions,
+  keyboardType?: ?KeyboardTypeOptions,
   maxFontSizeMultiplier?: ?number,
   maxLength?: ?number,
   multiline?: ?boolean,
-  onBlur?: ?(e: BlurEvent) => mixed,
-  onChange?: ?(e: ChangeEvent) => mixed,
-  unstable_onChangeSync?: ?(e: ChangeEvent) => mixed,
+  onBlur?: ?(e: TextInputBlurEvent) => mixed,
+  onChange?: ?(e: TextInputChangeEvent) => mixed,
+  unstable_onChangeSync?: ?(e: TextInputChangeEvent) => mixed,
   onChangeText?: ?(text: string) => mixed,
   unstable_onChangeTextSync?: ?(text: string) => mixed,
-  onContentSizeChange?: ?(e: ContentSizeChangeEvent) => mixed,
-  onEndEditing?: ?(e: EditingEvent) => mixed,
-  onFocus?: ?(e: FocusEvent) => mixed,
-  onKeyPress?: ?(e: KeyPressEvent) => mixed,
-  unstable_onKeyPressSync?: ?(e: KeyPressEvent) => mixed,
+  onContentSizeChange?: ?(e: TextInputContentSizeChangeEvent) => mixed,
+  onEndEditing?: ?(e: TextInputEditingEvent) => mixed,
+  onFocus?: ?(e: TextInputFocusEvent) => mixed,
+  onKeyPress?: ?(e: TextInputKeyPressEvent) => mixed,
+  unstable_onKeyPressSync?: ?(e: TextInputKeyPressEvent) => mixed,
   onPress?: ?(event: PressEvent) => mixed,
   onPressIn?: ?(event: PressEvent) => mixed,
   onPressOut?: ?(event: PressEvent) => mixed,
-  onSelectionChange?: ?(e: SelectionChangeEvent) => mixed,
-  onSubmitEditing?: ?(e: EditingEvent) => mixed,
+  onSelectionChange?: ?(e: TextInputSelectionChangeEvent) => mixed,
+  onSubmitEditing?: ?(e: TextInputEditingEvent) => mixed,
   onScroll?: ?(e: ScrollEvent) => mixed,
   placeholder?: ?Stringish,
   placeholderTextColor?: ?ColorValue,
   readOnly?: ?boolean,
-  returnKeyType?: ?ReturnKeyType,
+  returnKeyType?: ?ReturnKeyTypeOptions,
   secureTextEntry?: ?boolean,
   selection?: ?$ReadOnly<{
     start: number,
@@ -3214,7 +3215,7 @@ type ImperativeMethods = $ReadOnly<{
 }>;
 type InternalTextInput = component(
   ref: React.RefSetter<$ReadOnly<{ ...HostInstance, ...ImperativeMethods }>>,
-  ...Props
+  ...TextInputProps
 );
 export type TextInputComponentStatics = $ReadOnly<{
   State: $ReadOnly<{
@@ -3238,13 +3239,12 @@ type TextInputInstance = HostInstance & {
   +getNativeRef: () => ?HostInstance,
   +setSelection: (start: number, end: number) => void,
 };
-export type ChangeEvent = SyntheticEvent<
-  $ReadOnly<{
-    eventCount: number,
-    target: number,
-    text: string,
-  }>,
->;
+export type TextInputChangeEventData = $ReadOnly<{
+  eventCount: number,
+  target: number,
+  text: string,
+}>;
+export type TextInputChangeEvent = SyntheticEvent<TextInputChangeEventData>;
 export type TextInputEvent = SyntheticEvent<
   $ReadOnly<{
     eventCount: number,
@@ -3257,46 +3257,45 @@ export type TextInputEvent = SyntheticEvent<
     text: string,
   }>,
 >;
-export type ContentSizeChangeEvent = SyntheticEvent<
-  $ReadOnly<{
-    target: number,
-    contentSize: $ReadOnly<{
-      width: number,
-      height: number,
-    }>,
+export type TextInputContentSizeChangeEventData = $ReadOnly<{
+  target: number,
+  contentSize: $ReadOnly<{
+    width: number,
+    height: number,
   }>,
->;
-type TargetEvent = SyntheticEvent<
-  $ReadOnly<{
-    target: number,
-  }>,
->;
-export type BlurEvent = TargetEvent;
-export type FocusEvent = TargetEvent;
+}>;
+export type TextInputContentSizeChangeEvent =
+  SyntheticEvent<TextInputContentSizeChangeEventData>;
+export type TargetEvent = $ReadOnly<{
+  target: number,
+}>;
+export type TextInputFocusEventData = TargetEvent;
+export type TextInputBlurEvent = SyntheticEvent<TextInputFocusEventData>;
+export type TextInputFocusEvent = SyntheticEvent<TextInputFocusEventData>;
 type Selection = $ReadOnly<{
   start: number,
   end: number,
 }>;
-export type SelectionChangeEvent = SyntheticEvent<
-  $ReadOnly<{
-    selection: Selection,
-    target: number,
-  }>,
->;
-export type KeyPressEvent = SyntheticEvent<
-  $ReadOnly<{
-    key: string,
-    target?: ?number,
-    eventCount?: ?number,
-  }>,
->;
-export type EditingEvent = SyntheticEvent<
-  $ReadOnly<{
-    eventCount: number,
-    text: string,
-    target: number,
-  }>,
->;
+export type TextInputSelectionChangeEventData = $ReadOnly<{
+  ...TargetEvent,
+  selection: Selection,
+}>;
+export type TextInputSelectionChangeEvent =
+  SyntheticEvent<TextInputSelectionChangeEventData>;
+type TextInputKeyPressEventData = $ReadOnly<{
+  ...TargetEvent,
+  key: string,
+  target?: ?number,
+  eventCount?: ?number,
+}>;
+export type TextInputKeyPressEvent = SyntheticEvent<TextInputKeyPressEventData>;
+export type TextInputEndEditingEventData = $ReadOnly<{
+  ...TargetEvent,
+  eventCount: number,
+  text: string,
+}>;
+export type TextInputEditingEvent =
+  SyntheticEvent<TextInputEndEditingEventData>;
 type DataDetectorTypesType =
   | \\"phoneNumber\\"
   | \\"link\\"
@@ -3314,15 +3313,20 @@ export type KeyboardType =
   | \\"phone-pad\\"
   | \\"number-pad\\"
   | \\"decimal-pad\\"
-  | \\"url\\"
+  | \\"url\\";
+export type KeyboardTypeIOS =
   | \\"ascii-capable\\"
   | \\"numbers-and-punctuation\\"
   | \\"name-phone-pad\\"
   | \\"twitter\\"
   | \\"web-search\\"
-  | \\"ascii-capable-number-pad\\"
-  | \\"visible-password\\";
-export type InputMode =
+  | \\"ascii-capable-number-pad\\";
+export type KeyboardTypeAndroid = \\"visible-password\\";
+export type KeyboardTypeOptions =
+  | KeyboardType
+  | KeyboardTypeIOS
+  | KeyboardTypeAndroid;
+export type InputModeOptions =
   | \\"none\\"
   | \\"text\\"
   | \\"decimal\\"
@@ -3331,20 +3335,19 @@ export type InputMode =
   | \\"search\\"
   | \\"email\\"
   | \\"url\\";
-export type ReturnKeyType =
-  | \\"done\\"
-  | \\"go\\"
-  | \\"next\\"
-  | \\"search\\"
-  | \\"send\\"
-  | \\"none\\"
-  | \\"previous\\"
+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 =
@@ -3394,16 +3397,15 @@ export type TextContentType =
   | \\"dateTime\\"
   | \\"flightNumber\\"
   | \\"shipmentTrackingNumber\\";
-export type enterKeyHintType =
-  | \\"done\\"
-  | \\"go\\"
-  | \\"next\\"
-  | \\"search\\"
-  | \\"send\\"
-  | \\"previous\\"
-  | \\"enter\\";
+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;
-type IOSProps = $ReadOnly<{
+export type TextInputIOSProps = $ReadOnly<{
   disableKeyboardShortcuts?: ?boolean,
   clearButtonMode?: ?(\\"never\\" | \\"while-editing\\" | \\"unless-editing\\" | \\"always\\"),
   clearTextOnFocus?: ?boolean,
@@ -3430,7 +3432,7 @@ type IOSProps = $ReadOnly<{
   ),
   smartInsertDelete?: ?boolean,
 }>;
-type AndroidProps = $ReadOnly<{
+export type TextInputAndroidProps = $ReadOnly<{
   cursorColor?: ?ColorValue,
   disableFullscreenUI?: ?boolean,
   importantForAutofill?: ?(
@@ -3449,10 +3451,10 @@ type AndroidProps = $ReadOnly<{
   textBreakStrategy?: ?(\\"simple\\" | \\"highQuality\\" | \\"balanced\\"),
   underlineColorAndroid?: ?ColorValue,
 }>;
-export type Props = $ReadOnly<{
+export type TextInputProps = $ReadOnly<{
   ...$Diff<ViewProps, $ReadOnly<{ style: ?ViewStyleProp }>>,
-  ...IOSProps,
-  ...AndroidProps,
+  ...TextInputIOSProps,
+  ...TextInputAndroidProps,
   autoCapitalize?: ?AutoCapitalize,
   autoComplete?: ?(
     | \\"additional-name\\"
@@ -3521,29 +3523,29 @@ export type Props = $ReadOnly<{
   defaultValue?: ?Stringish,
   editable?: ?boolean,
   forwardedRef?: ?ReactRefSetter<TextInputInstance>,
-  enterKeyHint?: ?enterKeyHintType,
-  inputMode?: ?InputMode,
-  keyboardType?: ?KeyboardType,
+  enterKeyHint?: ?EnterKeyHintTypeOptions,
+  inputMode?: ?InputModeOptions,
+  keyboardType?: ?KeyboardTypeOptions,
   maxFontSizeMultiplier?: ?number,
   maxLength?: ?number,
   multiline?: ?boolean,
-  onBlur?: ?(e: BlurEvent) => mixed,
-  onChange?: ?(e: ChangeEvent) => mixed,
+  onBlur?: ?(e: TextInputBlurEvent) => mixed,
+  onChange?: ?(e: TextInputChangeEvent) => mixed,
   onChangeText?: ?(text: string) => mixed,
-  onContentSizeChange?: ?(e: ContentSizeChangeEvent) => mixed,
-  onEndEditing?: ?(e: EditingEvent) => mixed,
-  onFocus?: ?(e: FocusEvent) => mixed,
-  onKeyPress?: ?(e: KeyPressEvent) => mixed,
+  onContentSizeChange?: ?(e: TextInputContentSizeChangeEvent) => mixed,
+  onEndEditing?: ?(e: TextInputEditingEvent) => mixed,
+  onFocus?: ?(e: TextInputFocusEvent) => mixed,
+  onKeyPress?: ?(e: TextInputKeyPressEvent) => mixed,
   onPress?: ?(event: PressEvent) => mixed,
   onPressIn?: ?(event: PressEvent) => mixed,
   onPressOut?: ?(event: PressEvent) => mixed,
-  onSelectionChange?: ?(e: SelectionChangeEvent) => mixed,
-  onSubmitEditing?: ?(e: EditingEvent) => mixed,
+  onSelectionChange?: ?(e: TextInputSelectionChangeEvent) => mixed,
+  onSubmitEditing?: ?(e: TextInputEditingEvent) => mixed,
   onScroll?: ?(e: ScrollEvent) => mixed,
   placeholder?: ?Stringish,
   placeholderTextColor?: ?ColorValue,
   readOnly?: ?boolean,
-  returnKeyType?: ?ReturnKeyType,
+  returnKeyType?: ?ReturnKeyTypeOptions,
   secureTextEntry?: ?boolean,
   selection?: ?$ReadOnly<{
     start: number,
@@ -8590,11 +8592,13 @@ export type ScrollEvent = SyntheticEvent<
 export type BlurEvent = SyntheticEvent<
   $ReadOnly<{
     target: number,
+    ...
   }>,
 >;
 export type FocusEvent = SyntheticEvent<
   $ReadOnly<{
     target: number,
+    ...
   }>,
 >;
 export type MouseEvent = SyntheticEvent<

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js

@@ -14,7 +14,7 @@ import type {
   RNTesterModule,
   RNTesterModuleExample,
 } from '../../types/RNTesterTypes';
-import type {KeyboardType} from 'react-native/Libraries/Components/TextInput/TextInput';
+import type {KeyboardTypeOptions} from 'react-native/Libraries/Components/TextInput/TextInput';
 
 import RNTesterText from '../../components/RNTesterText';
 import ExampleTextInput from './ExampleTextInput';
@@ -124,11 +124,11 @@ class TextInputAccessoryViewChangeKeyboardExample extends React.Component<
 
 class TextInputAccessoryViewDefaultDoneButtonExample extends React.Component<
   $ReadOnly<{
-    keyboardType: KeyboardType,
+    keyboardType: KeyboardTypeOptions,
   }>,
   {text: string},
 > {
-  constructor(props: void | $ReadOnly<{keyboardType: KeyboardType}>) {
+  constructor(props: void | $ReadOnly<{keyboardType: KeyboardTypeOptions}>) {
     // $FlowFixMe[incompatible-call]
     super(props);
     this.state = {text: ''};