Change Image onLoad event data

types/react-native/index.d.ts

@@ -3412,9 +3412,30 @@ interface ImagePropsAndroid {
     fadeDuration?: number;
 }
 
-// See https://facebook.github.io/react-native/docs/image.html#source
+/**
+ * @see https://facebook.github.io/react-native/docs/image.html#source
+ */
 export type ImageSourcePropType = ImageURISource | ImageURISource[] | ImageRequireSource;
 
+/**
+ * @see ImagePropsBase.onLoad
+ */
+interface ImageLoadEventDataAndroid {
+    uri?: string;
+}
+
+interface ImageLoadEventData extends ImageLoadEventDataAndroid {
+    source: {
+        height: number;
+        width: number;
+        url: string;
+    }
+}
+
+export interface ImageLoadEvent {
+    nativeEvent: ImageLoadEventData;
+}
+
 /**
  * @see https://facebook.github.io/react-native/docs/image.html
  */
@@ -3435,8 +3456,9 @@ export interface ImagePropsBase extends ImagePropsIOS, ImagePropsAndroid, Access
 
     /**
      * Invoked when load completes successfully
+     * { source: { url, height, width } }.
      */
-    onLoad?: () => void;
+    onLoad?: (event: ImageLoadEvent) => void;
 
     /**
      * Invoked when load either succeeds or fails

types/react-native/test/index.tsx

@@ -24,6 +24,7 @@ import {
     Dimensions,
     Image,
     ImageStyle,
+    ImageLoadEvent,
     InteractionManager,
     ListView,
     ListViewDataSource,
@@ -198,19 +199,14 @@ class Welcome extends React.Component {
 
 export default Welcome;
 
-// EventsTest
-export class EventsTest extends React.Component {
-    onPressButton(e: GestureResponderEvent) {
+// TouchableNativeFeedbackTest
+export class TouchableNativeFeedbackTest extends React.Component {
+    onPressButton = (e: GestureResponderEvent) => {
         e.persist();
         e.isPropagationStopped();
         e.isDefaultPrevented();
     }
 
-    onScroll(e: TextInputScrollEvent) {
-        console.log(`x: ${ e.nativeEvent.contentOffset.x }`);
-        console.log(`y: ${ e.nativeEvent.contentOffset.y }`);
-    }
-
     render() {
         return (
             <TouchableNativeFeedback
@@ -218,10 +214,6 @@ export class EventsTest extends React.Component {
             >
                 <View style={{width: 150, height: 100, backgroundColor: 'red'}}>
                     <Text style={{margin: 30}}>Button</Text>
-                    <TextInput
-                        multiline
-                        onScroll={this.onScroll}
-                    />
                 </View>
             </TouchableNativeFeedback>
         )
@@ -229,7 +221,6 @@ export class EventsTest extends React.Component {
 }
 
 // App State
-
 function appStateListener(state: string) {
     console.log("New state: " + state);
 }
@@ -245,7 +236,6 @@ function appStateIOSTest() {
 }
 
 // ViewPagerAndroid
-
 export class ViewPagerAndroidTest {
     render() {
         return (
@@ -462,45 +452,49 @@ deviceEventEmitterStatic.addListener("keyboardWillShow", data => true);
 deviceEventEmitterStatic.addListener("keyboardWillShow", data => true, {});
 
 
-class TextInputRefTest extends React.Component<{}, {username: string}> {
+class TextInputTest extends React.Component<{}, {username: string}> {
     username: TextInput | null = null;
 
-    handleUsernameChange(text: string) {
+    handleUsernameChange = (text: string) => {
+        console.log(`text: ${ text }`);
+    }
+
+    onScroll = (e: TextInputScrollEvent) => {
+        console.log(`x: ${ e.nativeEvent.contentOffset.x }`);
+        console.log(`y: ${ e.nativeEvent.contentOffset.y }`);
+    }
+
+    handleOnBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    }
+
+    handleOnFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
     }
 
     render() {
         return (
             <View>
                 <Text onPress={() => this.username.focus()}>Username</Text>
+
                 <TextInput
                     ref={input => this.username = input}
                     value={this.state.username}
-                    onChangeText={this.handleUsernameChange.bind(this)}
+                    onChangeText={this.handleUsernameChange}
+                />
+
+                 <TextInput
+                    multiline
+                    onScroll={this.onScroll}
+                />
+
+                <TextInput
+                    onBlur={this.handleOnBlur}
+                    onFocus={this.handleOnFocus}
                 />
             </View>
         );
     }
 }
 
-class TextInputFocusBlurEventTest extends React.Component {
-    handleOnBlur(e: NativeSyntheticEvent<TextInputFocusEventData>) {
-    }
-
-    handleOnFocus(e: NativeSyntheticEvent<TextInputFocusEventData>) {
-    }
-
-    render() {
-        return (
-            <View>
-                <TextInput
-                    onBlur={(e: NativeSyntheticEvent<TextInputFocusEventData>) => this.handleOnBlur(e)}
-                    onFocus={(e: NativeSyntheticEvent<TextInputFocusEventData>) => this.handleOnFocus(e)}
-                />
-            </View>
-        )
-    }
-}
-
 class StatusBarTest extends React.Component {
     render() {
         StatusBar.setBarStyle("dark-content", true);
@@ -517,6 +511,25 @@ 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);
+    }
+
+    render() {
+        return (
+            <View>
+                <Image
+                    source={{ uri: 'https://seeklogo.com/images/T/typescript-logo-B29A3F462D-seeklogo.com.png' }}
+                    onLoad={this.onLoad}
+                />
+            </View>
+        );
+    }
+}
+
 class StylePropsTest extends React.PureComponent {
     render() {
         const uri = 'https://seeklogo.com/images/T/typescript-logo-B29A3F462D-seeklogo.com.png'