Align TextInput event types with TypeScript (#48971)

Summary: Pull Request resolved: #48971 Changelog: [Internal] Mosltly align event types of TextInput components with TypeScript definitions. Reviewed By: mellyeliu, thatmichael85 Differential Revision: D68713180 fbshipit-source-id: d8e9c0458466ef492fecf516fd58bc5459b35e26
facebook · Jan 31, 2025 · e815fda · e815fda
1 parent 21541b5
commit e815fda
Show file tree

Hide file tree

Showing 5 changed files with 222 additions and 212 deletions.
diff --git a/packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js b/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') {

diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js b/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 TargetEvent = $ReadOnly<{
+  target: number,
+}>;
+
+export type TextInputFocusEventData = TargetEvent;
 
-export type BlurEvent = TargetEvent;
-export type FocusEvent = 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'
@@ -727,12 +731,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 +746,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 +772,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 +791,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 +806,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 +828,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 } } }`.