diff --git a/packages/react-native/Libraries/Components/Switch/Switch.d.ts b/packages/react-native/Libraries/Components/Switch/Switch.d.ts index 64a735d6648..c875390930b 100644 --- a/packages/react-native/Libraries/Components/Switch/Switch.d.ts +++ b/packages/react-native/Libraries/Components/Switch/Switch.d.ts @@ -38,6 +38,9 @@ export interface SwitchPropsIOS extends ViewProps { tintColor?: ColorValue | undefined; } +/** + * @deprecated Use `SwitchChangeEvent` instead. + */ export interface SwitchChangeEventData extends TargetedEvent { value: boolean; } diff --git a/packages/react-native/Libraries/Components/Switch/Switch.js b/packages/react-native/Libraries/Components/Switch/Switch.js index 25c09e03472..cf00162a14f 100644 --- a/packages/react-native/Libraries/Components/Switch/Switch.js +++ b/packages/react-native/Libraries/Components/Switch/Switch.js @@ -46,7 +46,7 @@ export type SwitchPropsIOS = { tintColor?: ?ColorValue, }; -export type SwitchChangeEventData = $ReadOnly<{ +type SwitchChangeEventData = $ReadOnly<{ target: number, value: boolean, }>; diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.d.ts b/packages/react-native/Libraries/Components/TextInput/TextInput.d.ts index 2bd7fe7c505..7204efc93ab 100644 --- a/packages/react-native/Libraries/Components/TextInput/TextInput.d.ts +++ b/packages/react-native/Libraries/Components/TextInput/TextInput.d.ts @@ -455,7 +455,7 @@ export interface TextInputAndroidProps { } /** - * @see TextInputProps.onFocus + * @deprecated Use `TextInputFocusEvent` instead */ export interface TextInputFocusEventData extends TargetedEvent { text: string; @@ -463,14 +463,25 @@ export interface TextInputFocusEventData extends TargetedEvent { } /** - * @see TextInputProps.onScroll + * @see TextInputProps.onFocus + */ +export type TextInputFocusEvent = NativeSyntheticEvent; + +/** + * @deprecated Use `TextInputScrollEvent` instead */ export interface TextInputScrollEventData { contentOffset: {x: number; y: number}; } /** - * @see TextInputProps.onSelectionChange + * @see TextInputProps.onScroll + */ +export type TextInputScrollEvent = + NativeSyntheticEvent; + +/** + * @deprecated Use `TextInputSelectionChangeEvent` instead */ export interface TextInputSelectionChangeEventData extends TargetedEvent { selection: { @@ -480,14 +491,26 @@ export interface TextInputSelectionChangeEventData extends TargetedEvent { } /** - * @see TextInputProps.onKeyPress + * @see TextInputProps.onSelectionChange + */ +export type TextInputSelectionChangeEvent = + NativeSyntheticEvent; + +/** + * @deprecated Use `TextInputKeyPressEvent` instead */ export interface TextInputKeyPressEventData { key: string; } /** - * @see TextInputProps.onChange + * @see TextInputProps.onKeyPress + */ +export type TextInputKeyPressEvent = + NativeSyntheticEvent; + +/** + * @deprecated Use `TextInputChangeEvent` instead */ export interface TextInputChangeEventData extends TargetedEvent { eventCount: number; @@ -495,26 +518,50 @@ export interface TextInputChangeEventData extends TargetedEvent { } /** - * @see TextInputProps.onContentSizeChange + * @see TextInputProps.onChange + */ +export type TextInputChangeEvent = + NativeSyntheticEvent; + +/** + * @deprecated Use `TextInputContentSizeChangeEvent` instead */ export interface TextInputContentSizeChangeEventData { contentSize: {width: number; height: number}; } /** - * @see TextInputProps.onEndEditing + * @see TextInputProps.onContentSizeChange + */ +export type TextInputContentSizeChangeEvent = + NativeSyntheticEvent; + +/** + * @deprecated Use `TextInputEndEditingEvent` instead */ export interface TextInputEndEditingEventData { text: string; } /** - * @see TextInputProps.onSubmitEditing + * @see TextInputProps.onEndEditing + */ +export type TextInputEndEditingEvent = + NativeSyntheticEvent; + +/** + * @deprecated Use `TextInputSubmitEditingEvent` instead */ export interface TextInputSubmitEditingEventData { text: string; } +/** + * @see TextInputProps.onSubmitEditing + */ +export type TextInputSubmitEditingEvent = + NativeSyntheticEvent; + /** * @see https://reactnative.dev/docs/textinput#props */ @@ -763,16 +810,12 @@ export interface TextInputProps /** * Callback that is called when the text input is blurred */ - onBlur?: - | ((e: NativeSyntheticEvent) => void) - | undefined; + onBlur?: ((e: TextInputFocusEvent) => void) | undefined; /** * Callback that is called when the text input's text changes. */ - onChange?: - | ((e: NativeSyntheticEvent) => void) - | undefined; + onChange?: ((e: TextInputChangeEvent) => void) | undefined; /** * Callback that is called when the text input's text changes. @@ -788,15 +831,13 @@ export interface TextInputProps * Only called for multiline text inputs. */ onContentSizeChange?: - | ((e: NativeSyntheticEvent) => void) + | ((e: TextInputContentSizeChangeEvent) => void) | undefined; /** * Callback that is called when text input ends. */ - onEndEditing?: - | ((e: NativeSyntheticEvent) => void) - | undefined; + onEndEditing?: ((e: TextInputEndEditingEvent) => void) | undefined; /** * Called when a single tap gesture is detected. @@ -818,23 +859,17 @@ export interface TextInputProps /** * Callback that is called when the text input is focused */ - onFocus?: - | ((e: NativeSyntheticEvent) => void) - | undefined; + onFocus?: ((e: TextInputFocusEvent) => void) | undefined; /** * Callback that is called when the text input selection is changed. */ - onSelectionChange?: - | ((e: NativeSyntheticEvent) => void) - | undefined; + onSelectionChange?: ((e: TextInputSelectionChangeEvent) => void) | undefined; /** * Callback that is called when the text input's submit button is pressed. */ - onSubmitEditing?: - | ((e: NativeSyntheticEvent) => void) - | undefined; + onSubmitEditing?: ((e: TextInputSubmitEditingEvent) => void) | undefined; /** * Invoked on content scroll with @@ -842,9 +877,7 @@ export interface TextInputProps * * May also contain other properties from ScrollEvent but on Android contentSize is not provided for performance reasons. */ - onScroll?: - | ((e: NativeSyntheticEvent) => void) - | undefined; + onScroll?: ((e: TextInputScrollEvent) => void) | undefined; /** * Callback that is called when a key is pressed. @@ -855,9 +888,7 @@ export interface TextInputProps * Fires before onChange callbacks. * Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs. */ - onKeyPress?: - | ((e: NativeSyntheticEvent) => void) - | undefined; + onKeyPress?: ((e: TextInputKeyPressEvent) => void) | undefined; /** * The string that will be rendered before text input has been entered diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js b/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js index 6a675e4839b..2c236d03f86 100644 --- a/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js +++ b/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js @@ -23,14 +23,13 @@ import { } from '../../StyleSheet/StyleSheet'; import * as React from 'react'; -export type TextInputChangeEventData = $ReadOnly<{ +type TextInputChangeEventData = $ReadOnly<{ eventCount: number, target: number, text: string, }>; -export type TextInputChangeEvent = - NativeSyntheticEvent; +type TextInputChangeEvent = NativeSyntheticEvent; export type TextInputEvent = NativeSyntheticEvent< $ReadOnly<{ @@ -45,7 +44,7 @@ export type TextInputEvent = NativeSyntheticEvent< }>, >; -export type TextInputContentSizeChangeEventData = $ReadOnly<{ +type TextInputContentSizeChangeEventData = $ReadOnly<{ target: number, contentSize: $ReadOnly<{ width: number, @@ -56,11 +55,11 @@ export type TextInputContentSizeChangeEventData = $ReadOnly<{ export type TextInputContentSizeChangeEvent = NativeSyntheticEvent; -export type TargetEvent = $ReadOnly<{ +type TargetEvent = $ReadOnly<{ target: number, }>; -export type TextInputFocusEventData = TargetEvent; +type TextInputFocusEventData = TargetEvent; export type TextInputBlurEvent = NativeSyntheticEvent; export type TextInputFocusEvent = NativeSyntheticEvent; @@ -70,7 +69,7 @@ type Selection = $ReadOnly<{ end: number, }>; -export type TextInputSelectionChangeEventData = $ReadOnly<{ +type TextInputSelectionChangeEventData = $ReadOnly<{ ...TargetEvent, selection: Selection, }>; @@ -78,7 +77,7 @@ export type TextInputSelectionChangeEventData = $ReadOnly<{ export type TextInputSelectionChangeEvent = NativeSyntheticEvent; -export type TextInputKeyPressEventData = $ReadOnly<{ +type TextInputKeyPressEventData = $ReadOnly<{ ...TargetEvent, key: string, target?: ?number, @@ -88,27 +87,27 @@ export type TextInputKeyPressEventData = $ReadOnly<{ export type TextInputKeyPressEvent = NativeSyntheticEvent; -/** - * @see TextInputProps.onEndEditing - */ -export type TextInputEndEditingEventData = $ReadOnly<{ +type TextInputEndEditingEventData = $ReadOnly<{ ...TargetEvent, eventCount: number, text: string, }>; +/** + * @see TextInputProps.onEndEditing + */ export type TextInputEndEditingEvent = NativeSyntheticEvent; +type TextInputSubmitEditingEventData = $ReadOnly<{ + ...TargetEvent, + eventCount: number, + text: string, +}>; + /** * @see TextInputProps.onSubmitEditing */ -export type TextInputSubmitEditingEventData = $ReadOnly<{ - ...TargetEvent, - eventCount: number, - text: string, -}>; - export type TextInputSubmitEditingEvent = NativeSyntheticEvent; diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.js b/packages/react-native/Libraries/Components/TextInput/TextInput.js index fd134e2e514..af3560f265f 100644 --- a/packages/react-native/Libraries/Components/TextInput/TextInput.js +++ b/packages/react-native/Libraries/Components/TextInput/TextInput.js @@ -60,7 +60,7 @@ if (Platform.OS === 'android') { /** * @see TextInputProps.onChange */ -export type TextInputChangeEventData = $ReadOnly<{ +type TextInputChangeEventData = $ReadOnly<{ eventCount: number, target: number, text: string, @@ -82,10 +82,7 @@ export type TextInputEvent = NativeSyntheticEvent< }>, >; -/** - * @see TextInputProps.onContentSizeChange - */ -export type TextInputContentSizeChangeEventData = $ReadOnly<{ +type TextInputContentSizeChangeEventData = $ReadOnly<{ target: number, contentSize: $ReadOnly<{ width: number, @@ -93,6 +90,9 @@ export type TextInputContentSizeChangeEventData = $ReadOnly<{ }>, }>; +/** + * @see TextInputProps.onContentSizeChange + */ export type TextInputContentSizeChangeEvent = NativeSyntheticEvent; @@ -100,71 +100,78 @@ export type TargetEvent = $ReadOnly<{ target: number, }>; +type TextInputFocusEventData = TargetEvent; + +/** + * @see TextInputProps.onBlur + */ +export type TextInputBlurEvent = NativeSyntheticEvent; + /** * @see TextInputProps.onFocus */ -export type TextInputFocusEventData = TargetEvent; - -export type TextInputBlurEvent = NativeSyntheticEvent; export type TextInputFocusEvent = NativeSyntheticEvent; +type TextInputScrollEventData = { + contentOffset: {x: number, y: number}, +}; + /** * @see TextInputProps.onScroll */ -export type TextInputScrollEventData = { - contentOffset: {x: number, y: number}, -}; +export type TextInputScrollEvent = + NativeSyntheticEvent; type Selection = $ReadOnly<{ start: number, end: number, }>; -/** - * @see TextInputProps.onSelectionChange - */ -export type TextInputSelectionChangeEventData = $ReadOnly<{ +type TextInputSelectionChangeEventData = $ReadOnly<{ ...TargetEvent, selection: Selection, }>; +/** + * @see TextInputProps.onSelectionChange + */ export type TextInputSelectionChangeEvent = NativeSyntheticEvent; -/** - * @see TextInputProps.onKeyPress - */ -export type TextInputKeyPressEventData = $ReadOnly<{ +type TextInputKeyPressEventData = $ReadOnly<{ ...TargetEvent, key: string, target?: ?number, eventCount?: ?number, }>; +/** + * @see TextInputProps.onKeyPress + */ export type TextInputKeyPressEvent = NativeSyntheticEvent; +type TextInputEndEditingEventData = $ReadOnly<{ + ...TargetEvent, + eventCount: number, + text: string, +}>; + /** * @see TextInputProps.onEndEditing */ -export type TextInputEndEditingEventData = $ReadOnly<{ +export type TextInputEndEditingEvent = + NativeSyntheticEvent; + +type TextInputSubmitEditingEventData = $ReadOnly<{ ...TargetEvent, eventCount: number, text: string, }>; -export type TextInputEndEditingEvent = - NativeSyntheticEvent; - /** * @see TextInputProps.onSubmitEditing */ -export type TextInputSubmitEditingEventData = $ReadOnly<{ - ...TargetEvent, - eventCount: number, - text: string, -}>; - export type TextInputSubmitEditingEvent = NativeSyntheticEvent; diff --git a/packages/react-native/Libraries/Image/Image.d.ts b/packages/react-native/Libraries/Image/Image.d.ts index d50679a548b..4ebf9eb1685 100644 --- a/packages/react-native/Libraries/Image/Image.d.ts +++ b/packages/react-native/Libraries/Image/Image.d.ts @@ -19,13 +19,19 @@ import {ImageResizeMode} from './ImageResizeMode'; import {ImageRequireSource, ImageURISource} from './ImageSource'; /** - * @see ImagePropsIOS.onProgress + * @deprecated Use `ImageProgressEventIOS` instead. */ export interface ImageProgressEventDataIOS { loaded: number; total: number; } +/** + * @see https://reactnative.dev/docs/image#onprogress + */ +export type ImageProgressEventIOS = + NativeSyntheticEvent; + export interface ImagePropsIOS { /** * blurRadius: the blur radius of the blur filter added to the image @@ -44,9 +50,7 @@ export interface ImagePropsIOS { /** * Invoked on download progress with {nativeEvent: {loaded, total}} */ - onProgress?: - | ((event: NativeSyntheticEvent) => void) - | undefined; + onProgress?: ((event: ImageProgressEventIOS) => void) | undefined; /** * Invoked when a partial load of the image is complete. The definition of @@ -99,6 +103,9 @@ export type ImageSourcePropType = | ImageURISource[] | ImageRequireSource; +/** + * @deprecated Use `ImageLoadEvent` instead. + */ export interface ImageLoadEventData { source: { height: number; @@ -107,10 +114,23 @@ export interface ImageLoadEventData { }; } +/** + * @see https://reactnative.dev/docs/image#onload + */ +export type ImageLoadEvent = NativeSyntheticEvent; + +/** + * @deprecated Use `ImageErrorEvent` instead. + */ export interface ImageErrorEventData { error: any; } +/** + * @see https://reactnative.dev/docs/image#onerror + */ +export type ImageErrorEvent = NativeSyntheticEvent; + /** * @see https://reactnative.dev/docs/image#resolveassetsource */ @@ -145,17 +165,13 @@ export interface ImagePropsBase /** * Invoked on load error with {nativeEvent: {error}} */ - onError?: - | ((error: NativeSyntheticEvent) => void) - | undefined; + onError?: ((error: ImageErrorEvent) => void) | undefined; /** * Invoked when load completes successfully * { source: { uri, height, width } }. */ - onLoad?: - | ((event: NativeSyntheticEvent) => void) - | undefined; + onLoad?: ((event: ImageLoadEvent) => void) | undefined; /** * Invoked when load either succeeds or fails diff --git a/packages/react-native/Libraries/Image/Image.js.flow b/packages/react-native/Libraries/Image/Image.js.flow index ed1d07a664a..2bc8666634d 100644 --- a/packages/react-native/Libraries/Image/Image.js.flow +++ b/packages/react-native/Libraries/Image/Image.js.flow @@ -11,12 +11,12 @@ import type {Image} from './ImageTypes.flow'; export type { - ImageProgressEventDataIOS, + ImageProgressEventIOS, ImagePropsIOS, ImagePropsAndroid, ImageSourcePropType, - ImageLoadEventData, - ImageErrorEventData, + ImageLoadEvent, + ImageErrorEvent, ImagePropsBase, ImageProps, ImageBackgroundProps, diff --git a/packages/react-native/Libraries/Image/ImageProps.js b/packages/react-native/Libraries/Image/ImageProps.js index c2a9ce254f3..a8293465547 100644 --- a/packages/react-native/Libraries/Image/ImageProps.js +++ b/packages/react-native/Libraries/Image/ImageProps.js @@ -29,19 +29,27 @@ import type {ElementRef, RefSetter} from 'react'; export type ImageSourcePropType = ImageSource; -/** - * @see ImagePropsIOS.onProgress - */ -export type ImageProgressEventDataIOS = { +type ImageProgressEventDataIOS = { loaded: number, total: number, }; -export type ImageErrorEventData = { +/** + * @see ImagePropsIOS.onProgress + */ +export type ImageProgressEventIOS = NativeSyntheticEvent< + $ReadOnly, +>; + +type ImageErrorEventData = { error: string, }; -export type ImageLoadEventData = { +export type ImageErrorEvent = NativeSyntheticEvent< + $ReadOnly, +>; + +type ImageLoadEventData = { source: { height: number, width: number, @@ -71,9 +79,7 @@ export type ImagePropsIOS = $ReadOnly<{ * * See https://reactnative.dev/docs/image#onprogress */ - onProgress?: ?( - event: NativeSyntheticEvent<$ReadOnly>, - ) => void, + onProgress?: ?(event: ImageProgressEventIOS) => void, }>; export type ImagePropsAndroid = $ReadOnly<{ @@ -202,9 +208,7 @@ export type ImagePropsBase = $ReadOnly<{ * * See https://reactnative.dev/docs/image#onerror */ - onError?: ?( - event: NativeSyntheticEvent<$ReadOnly>, - ) => void, + onError?: ?(event: ImageErrorEvent) => void, /** * onLayout function diff --git a/packages/react-native/Libraries/Text/Text.d.ts b/packages/react-native/Libraries/Text/Text.d.ts index 0e478676ca8..c6f3314d821 100644 --- a/packages/react-native/Libraries/Text/Text.d.ts +++ b/packages/react-native/Libraries/Text/Text.d.ts @@ -16,8 +16,7 @@ import {TextStyle, ViewStyle} from '../StyleSheet/StyleSheetTypes'; import { GestureResponderEvent, LayoutChangeEvent, - NativeSyntheticEvent, - TextLayoutEventData, + TextLayoutEvent, } from '../Types/CoreEventTypes'; export interface TextPropsIOS { @@ -163,9 +162,7 @@ export interface TextProps /** * Invoked on Text layout */ - onTextLayout?: - | ((event: NativeSyntheticEvent) => void) - | undefined; + onTextLayout?: ((event: TextLayoutEvent) => void) | undefined; /** * This function is called on press. diff --git a/packages/react-native/Libraries/Types/CoreEventTypes.d.ts b/packages/react-native/Libraries/Types/CoreEventTypes.d.ts index 96c0b42ab7c..281195f3d90 100644 --- a/packages/react-native/Libraries/Types/CoreEventTypes.d.ts +++ b/packages/react-native/Libraries/Types/CoreEventTypes.d.ts @@ -33,12 +33,17 @@ interface TextLayoutLine { } /** - * @see TextProps.onTextLayout + * @deprecated Use `TextLayoutEvent` instead. */ export interface TextLayoutEventData extends TargetedEvent { lines: TextLayoutLine[]; } +/** + * @see TextProps.onTextLayout + */ +export type TextLayoutEvent = NativeSyntheticEvent; + // Similar to React.SyntheticEvent except for nativeEvent export interface NativeSyntheticEvent extends React.BaseSyntheticEvent {} diff --git a/packages/react-native/Libraries/Types/CoreEventTypes.js b/packages/react-native/Libraries/Types/CoreEventTypes.js index 003ed7ec73a..da8e9aa08fa 100644 --- a/packages/react-native/Libraries/Types/CoreEventTypes.js +++ b/packages/react-native/Libraries/Types/CoreEventTypes.js @@ -76,7 +76,7 @@ export type LayoutChangeEvent = NativeSyntheticEvent< }>, >; -export type TextLayoutEventData = $ReadOnly<{ +type TextLayoutEventData = $ReadOnly<{ lines: Array, }>; diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap index 7d4dc2d4d9b..20812339e52 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap @@ -2363,7 +2363,7 @@ exports[`public API should not change unintentionally Libraries/Components/Switc thumbTintColor?: ?ColorValue, tintColor?: ?ColorValue, }; -export type SwitchChangeEventData = $ReadOnly<{ +type SwitchChangeEventData = $ReadOnly<{ target: number, value: boolean, }>; @@ -2644,13 +2644,12 @@ declare export default PartialViewConfigWithoutName; `; exports[`public API should not change unintentionally Libraries/Components/TextInput/TextInput.flow.js 1`] = ` -"export type TextInputChangeEventData = $ReadOnly<{ +"type TextInputChangeEventData = $ReadOnly<{ eventCount: number, target: number, text: string, }>; -export type TextInputChangeEvent = - NativeSyntheticEvent; +type TextInputChangeEvent = NativeSyntheticEvent; export type TextInputEvent = NativeSyntheticEvent< $ReadOnly<{ eventCount: number, @@ -2663,7 +2662,7 @@ export type TextInputEvent = NativeSyntheticEvent< text: string, }>, >; -export type TextInputContentSizeChangeEventData = $ReadOnly<{ +type TextInputContentSizeChangeEventData = $ReadOnly<{ target: number, contentSize: $ReadOnly<{ width: number, @@ -2672,23 +2671,23 @@ export type TextInputContentSizeChangeEventData = $ReadOnly<{ }>; export type TextInputContentSizeChangeEvent = NativeSyntheticEvent; -export type TargetEvent = $ReadOnly<{ +type TargetEvent = $ReadOnly<{ target: number, }>; -export type TextInputFocusEventData = TargetEvent; +type TextInputFocusEventData = TargetEvent; export type TextInputBlurEvent = NativeSyntheticEvent; export type TextInputFocusEvent = NativeSyntheticEvent; type Selection = $ReadOnly<{ start: number, end: number, }>; -export type TextInputSelectionChangeEventData = $ReadOnly<{ +type TextInputSelectionChangeEventData = $ReadOnly<{ ...TargetEvent, selection: Selection, }>; export type TextInputSelectionChangeEvent = NativeSyntheticEvent; -export type TextInputKeyPressEventData = $ReadOnly<{ +type TextInputKeyPressEventData = $ReadOnly<{ ...TargetEvent, key: string, target?: ?number, @@ -2696,14 +2695,14 @@ export type TextInputKeyPressEventData = $ReadOnly<{ }>; export type TextInputKeyPressEvent = NativeSyntheticEvent; -export type TextInputEndEditingEventData = $ReadOnly<{ +type TextInputEndEditingEventData = $ReadOnly<{ ...TargetEvent, eventCount: number, text: string, }>; export type TextInputEndEditingEvent = NativeSyntheticEvent; -export type TextInputSubmitEditingEventData = $ReadOnly<{ +type TextInputSubmitEditingEventData = $ReadOnly<{ ...TargetEvent, eventCount: number, text: string, @@ -3001,7 +3000,7 @@ export type TextInputType = InternalTextInput & TextInputComponentStatics; `; exports[`public API should not change unintentionally Libraries/Components/TextInput/TextInput.js 1`] = ` -"export type TextInputChangeEventData = $ReadOnly<{ +"type TextInputChangeEventData = $ReadOnly<{ eventCount: number, target: number, text: string, @@ -3020,7 +3019,7 @@ export type TextInputEvent = NativeSyntheticEvent< text: string, }>, >; -export type TextInputContentSizeChangeEventData = $ReadOnly<{ +type TextInputContentSizeChangeEventData = $ReadOnly<{ target: number, contentSize: $ReadOnly<{ width: number, @@ -3032,23 +3031,25 @@ export type TextInputContentSizeChangeEvent = export type TargetEvent = $ReadOnly<{ target: number, }>; -export type TextInputFocusEventData = TargetEvent; +type TextInputFocusEventData = TargetEvent; export type TextInputBlurEvent = NativeSyntheticEvent; export type TextInputFocusEvent = NativeSyntheticEvent; -export type TextInputScrollEventData = { +type TextInputScrollEventData = { contentOffset: { x: number, y: number }, }; +export type TextInputScrollEvent = + NativeSyntheticEvent; type Selection = $ReadOnly<{ start: number, end: number, }>; -export type TextInputSelectionChangeEventData = $ReadOnly<{ +type TextInputSelectionChangeEventData = $ReadOnly<{ ...TargetEvent, selection: Selection, }>; export type TextInputSelectionChangeEvent = NativeSyntheticEvent; -export type TextInputKeyPressEventData = $ReadOnly<{ +type TextInputKeyPressEventData = $ReadOnly<{ ...TargetEvent, key: string, target?: ?number, @@ -3056,14 +3057,14 @@ export type TextInputKeyPressEventData = $ReadOnly<{ }>; export type TextInputKeyPressEvent = NativeSyntheticEvent; -export type TextInputEndEditingEventData = $ReadOnly<{ +type TextInputEndEditingEventData = $ReadOnly<{ ...TargetEvent, eventCount: number, text: string, }>; export type TextInputEndEditingEvent = NativeSyntheticEvent; -export type TextInputSubmitEditingEventData = $ReadOnly<{ +type TextInputSubmitEditingEventData = $ReadOnly<{ ...TargetEvent, eventCount: number, text: string, @@ -4588,12 +4589,12 @@ declare export function getUrlCacheBreaker(): string; exports[`public API should not change unintentionally Libraries/Image/Image.js.flow 1`] = ` "export type { - ImageProgressEventDataIOS, + ImageProgressEventIOS, ImagePropsIOS, ImagePropsAndroid, ImageSourcePropType, - ImageLoadEventData, - ImageErrorEventData, + ImageLoadEvent, + ImageErrorEvent, ImagePropsBase, ImageProps, ImageBackgroundProps, @@ -4645,14 +4646,20 @@ declare export function useWrapRefWithImageAttachedCallbacks( exports[`public API should not change unintentionally Libraries/Image/ImageProps.js 1`] = ` "export type ImageSourcePropType = ImageSource; -export type ImageProgressEventDataIOS = { +type ImageProgressEventDataIOS = { loaded: number, total: number, }; -export type ImageErrorEventData = { +export type ImageProgressEventIOS = NativeSyntheticEvent< + $ReadOnly, +>; +type ImageErrorEventData = { error: string, }; -export type ImageLoadEventData = { +export type ImageErrorEvent = NativeSyntheticEvent< + $ReadOnly, +>; +type ImageLoadEventData = { source: { height: number, width: number, @@ -4665,9 +4672,7 @@ export type ImageLoadEvent = NativeSyntheticEvent< export type ImagePropsIOS = $ReadOnly<{ defaultSource?: ?ImageSource, onPartialLoad?: ?() => void, - onProgress?: ?( - event: NativeSyntheticEvent<$ReadOnly> - ) => void, + onProgress?: ?(event: ImageProgressEventIOS) => void, }>; export type ImagePropsAndroid = $ReadOnly<{ loadingIndicatorSource?: ?(number | $ReadOnly), @@ -4689,9 +4694,7 @@ export type ImagePropsBase = $ReadOnly<{ crossOrigin?: ?(\\"anonymous\\" | \\"use-credentials\\"), height?: number, width?: number, - onError?: ?( - event: NativeSyntheticEvent<$ReadOnly> - ) => void, + onError?: ?(event: ImageErrorEvent) => void, onLayout?: ?(event: LayoutChangeEvent) => mixed, onLoad?: ?(event: ImageLoadEvent) => void, onLoadEnd?: ?() => void, @@ -8320,7 +8323,7 @@ export type LayoutChangeEvent = NativeSyntheticEvent< layout: LayoutRectangle, }>, >; -export type TextLayoutEventData = $ReadOnly<{ +type TextLayoutEventData = $ReadOnly<{ lines: Array, }>; export type TextLayoutEvent = NativeSyntheticEvent; diff --git a/packages/react-native/types/__typetests__/index.tsx b/packages/react-native/types/__typetests__/index.tsx index 7a329c8570f..9eb4e0a054c 100644 --- a/packages/react-native/types/__typetests__/index.tsx +++ b/packages/react-native/types/__typetests__/index.tsx @@ -48,8 +48,8 @@ import { I18nManager, Image, ImageBackground, - ImageErrorEventData, - ImageLoadEventData, + ImageErrorEvent, + ImageLoadEvent, ImageResizeMode, ImageResolvedAssetSource, ImageStyle, @@ -92,15 +92,15 @@ import { Systrace, Text, TextInput, - TextInputChangeEventData, - TextInputContentSizeChangeEventData, - TextInputEndEditingEventData, - TextInputFocusEventData, - TextInputKeyPressEventData, - TextInputScrollEventData, - TextInputSelectionChangeEventData, - TextInputSubmitEditingEventData, - TextLayoutEventData, + TextInputChangeEvent, + TextInputContentSizeChangeEvent, + TextInputEndEditingEvent, + TextInputFocusEvent, + TextInputKeyPressEvent, + TextInputScrollEvent, + TextInputSelectionChangeEvent, + TextInputSubmitEditingEvent, + TextLayoutEvent, TextProps, TextStyle, TouchableNativeFeedback, @@ -1196,23 +1196,21 @@ class TextInputTest extends React.Component<{}, {username: string}> { console.log(`text: ${text}`); }; - onScroll = (e: NativeSyntheticEvent) => { + onScroll = (e: TextInputScrollEvent) => { testNativeSyntheticEvent(e); console.log(`x: ${e.nativeEvent.contentOffset.x}`); console.log(`y: ${e.nativeEvent.contentOffset.y}`); }; - handleOnBlur = (e: NativeSyntheticEvent) => { + handleOnBlur = (e: TextInputFocusEvent) => { testNativeSyntheticEvent(e); }; - handleOnFocus = (e: NativeSyntheticEvent) => { + handleOnFocus = (e: TextInputFocusEvent) => { testNativeSyntheticEvent(e); }; - handleOnSelectionChange = ( - e: NativeSyntheticEvent, - ) => { + handleOnSelectionChange = (e: TextInputSelectionChangeEvent) => { testNativeSyntheticEvent(e); console.log(`target: ${e.nativeEvent.target}`); @@ -1220,12 +1218,12 @@ class TextInputTest extends React.Component<{}, {username: string}> { console.log(`end: ${e.nativeEvent.selection.end}`); }; - handleOnKeyPress = (e: NativeSyntheticEvent) => { + handleOnKeyPress = (e: TextInputKeyPressEvent) => { testNativeSyntheticEvent(e); console.log(`key: ${e.nativeEvent.key}`); }; - handleOnChange = (e: NativeSyntheticEvent) => { + handleOnChange = (e: TextInputChangeEvent) => { testNativeSyntheticEvent(e); console.log(`eventCount: ${e.nativeEvent.eventCount}`); @@ -1233,24 +1231,18 @@ class TextInputTest extends React.Component<{}, {username: string}> { console.log(`text: ${e.nativeEvent.text}`); }; - handleOnContentSizeChange = ( - e: NativeSyntheticEvent, - ) => { + handleOnContentSizeChange = (e: TextInputContentSizeChangeEvent) => { testNativeSyntheticEvent(e); console.log(`contentSize.width: ${e.nativeEvent.contentSize.width}`); console.log(`contentSize.height: ${e.nativeEvent.contentSize.height}`); }; - handleOnEndEditing = ( - e: NativeSyntheticEvent, - ) => { + handleOnEndEditing = (e: TextInputEndEditingEvent) => { testNativeSyntheticEvent(e); console.log(`text: ${e.nativeEvent.text}`); }; - handleOnSubmitEditing = ( - e: NativeSyntheticEvent, - ) => { + handleOnSubmitEditing = (e: TextInputSubmitEditingEvent) => { testNativeSyntheticEvent(e); console.log(`text: ${e.nativeEvent.text}`); }; @@ -1309,7 +1301,7 @@ class TextTest extends React.Component { const height = e.nativeEvent.layout.height; // $ExpectType number }; - handleOnTextLayout = (e: NativeSyntheticEvent) => { + handleOnTextLayout = (e: TextLayoutEvent) => { testNativeSyntheticEvent(e); e.nativeEvent.lines.forEach(line => { @@ -1394,14 +1386,14 @@ export class ImageTest extends React.Component { Image.prefetch(uri); // $ExpectType Promise } - handleOnLoad = (e: NativeSyntheticEvent>) => { + handleOnLoad = (e: ImageLoadEvent) => { testNativeSyntheticEvent(e); console.log('height:', e.nativeEvent.source.height); console.log('width:', e.nativeEvent.source.width); console.log('uri:', e.nativeEvent.source.uri); }; - handleOnError = (e: NativeSyntheticEvent>) => { + handleOnError = (e: ImageErrorEvent) => { testNativeSyntheticEvent(e); console.log('error:', e.nativeEvent.error); };