Merge pull request #26605 from a-tarasyuk/feature/wrap-events-to-native-synthetic-event

[react-native] - Wrap events to NativeSyntheticEvent

types/react-native/index.d.ts

@@ -1088,10 +1088,11 @@ export interface TextInputFocusEventData {
     eventCount: number;
 }
 
-export interface TextInputScrollEvent {
-    nativeEvent: {
-        contentOffset: { x: number; y: number; }
-    }
+/**
+ * @see TextInputProps.onScroll
+ */
+export interface TextInputScrollEventData {
+    contentOffset: { x: number; y: number; }
 }
 
 /**
@@ -1232,7 +1233,7 @@ export interface TextInputProps
      *
      * May also contain other properties from ScrollEvent but on Android contentSize is not provided for performance reasons.
      */
-    onScroll?: (event: TextInputScrollEvent) => void;
+    onScroll?: (e: NativeSyntheticEvent<TextInputScrollEventData>) => void;
 
     /**
      * The string that will be rendered before text input has been entered
@@ -3435,10 +3436,6 @@ interface ImageLoadEventData extends ImageLoadEventDataAndroid {
     }
 }
 
-export interface ImageLoadEvent {
-    nativeEvent: ImageLoadEventData;
-}
-
 /**
  * @see https://facebook.github.io/react-native/docs/image.html
  */
@@ -3461,7 +3458,7 @@ export interface ImagePropsBase extends ImagePropsIOS, ImagePropsAndroid, Access
      * Invoked when load completes successfully
      * { source: { url, height, width } }.
      */
-    onLoad?: (event: ImageLoadEvent) => void;
+    onLoad?: (event: NativeSyntheticEvent<ImageLoadEventData>) => void;
 
     /**
      * Invoked when load either succeeds or fails

types/react-native/test/index.tsx

@@ -24,7 +24,7 @@ import {
     Dimensions,
     Image,
     ImageStyle,
-    ImageLoadEvent,
+    ImageLoadEventData,
     InteractionManager,
     ListView,
     ListViewDataSource,
@@ -56,7 +56,7 @@ import {
     StatusBar,
     NativeSyntheticEvent,
     GestureResponderEvent,
-    TextInputScrollEvent,
+    TextInputScrollEventData
 } from "react-native";
 
 declare module "react-native" {
@@ -151,6 +151,25 @@ const viewProperty = StyleSheet.flatten(viewStyle).backgroundColor;
 const textProperty = StyleSheet.flatten(textStyle).fontSize;
 const imageProperty = StyleSheet.flatten(imageStyle).resizeMode;
 
+const testNativeSyntheticEvent = <T extends {}>(e: NativeSyntheticEvent<T>): void => {
+    e.isDefaultPrevented();
+    e.preventDefault();
+    e.isPropagationStopped();
+    e.stopPropagation();
+    e.persist();
+    e.cancelable;
+    e.bubbles;
+    e.currentTarget;
+    e.defaultPrevented;
+    e.eventPhase;
+    e.isTrusted;
+    e.nativeEvent;
+    e.target;
+    e.timeStamp;
+    e.type;
+    e.nativeEvent;
+}
+
 class CustomView extends React.Component {
     render() {
         return <Text style={[StyleSheet.absoluteFill, { ...StyleSheet.absoluteFillObject }]}>Custom View</Text>;
@@ -459,15 +478,18 @@ class TextInputTest extends React.Component<{}, {username: string}> {
         console.log(`text: ${ text }`);
     }
 
-    onScroll = (e: TextInputScrollEvent) => {
+    onScroll = (e: NativeSyntheticEvent<TextInputScrollEventData>) => {
+        testNativeSyntheticEvent(e);
         console.log(`x: ${ e.nativeEvent.contentOffset.x }`);
         console.log(`y: ${ e.nativeEvent.contentOffset.y }`);
     }
 
     handleOnBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        testNativeSyntheticEvent(e);
     }
 
     handleOnFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        testNativeSyntheticEvent(e);
     }
 
     render() {
@@ -512,10 +534,11 @@ class StatusBarTest extends React.Component {
 }
 
 export class ImageTest extends React.Component {
-    onLoad(event: ImageLoadEvent) {
-        console.log('height:', event.nativeEvent.source.height);
-        console.log('width:', event.nativeEvent.source.width);
-        console.log('url:', event.nativeEvent.source.url);
+    onLoad(e: NativeSyntheticEvent<ImageLoadEventData>) {
+        testNativeSyntheticEvent(e);
+        console.log('height:', e.nativeEvent.source.height);
+        console.log('width:', e.nativeEvent.source.width);
+        console.log('url:', e.nativeEvent.source.url);
     }
 
     render() {