Add remaining prop examples for the Image component (#30554)

Summary:
Adds missing prop examples for the Image component in rn-tester.

## Changelog
[Internal] [Added] New examples for LoadingIndicatorSource, Accessibility, AccessibilityLabel, fadeDuration, onLayout, onPartialLoad, accessibilityLabel, etc.

Pull Request resolved: https://github.com/facebook/react-native/pull/30554

Test Plan:
- [x] Build rn-tester and verify that it runs
- [x] Interact with each component
- [x] Verify that the examples function as intended

Reviewed By: shergin

Differential Revision: D25680504

Pulled By: rickhanlonii

fbshipit-source-id: bf797c92f8d0b4e66cdede2e32445ea4941b19fe

packages/rn-tester/js/examples/Image/ImageExample.js

@@ -36,6 +36,7 @@ type NetworkImageCallbackExampleState = {|
   events: Array<string>,
   startLoadPrefetched: boolean,
   mountTime: number,
+  imageHash: number,
 |};
 
 type NetworkImageCallbackExampleProps = $ReadOnly<{|
@@ -51,6 +52,7 @@ class NetworkImageCallbackExample extends React.Component<
     events: [],
     startLoadPrefetched: false,
     mountTime: Date.now(),
+    imageHash: Date.now(),
   };
 
   UNSAFE_componentWillMount() {
@@ -63,6 +65,10 @@ class NetworkImageCallbackExample extends React.Component<
     }));
   };
 
+  updateLoadingImageHash = () => {
+    this.setState({imageHash: Date.now()});
+  };
+
   render() {
     const {mountTime} = this.state;
     return (
@@ -340,6 +346,193 @@ class MultipleSourcesExample extends React.Component<
   }
 }
 
+type LoadingIndicatorSourceExampleState = {|
+  imageHash: number,
+|};
+
+type LoadingIndicatorSourceExampleProps = $ReadOnly<{||}>;
+
+class LoadingIndicatorSourceExample extends React.Component<
+  LoadingIndicatorSourceExampleProps,
+  LoadingIndicatorSourceExampleState,
+> {
+  state = {
+    imageHash: Date.now(),
+  };
+
+  reloadImage = () => {
+    this.setState({
+      imageHash: Date.now(),
+    });
+  };
+
+  loaderGif = {
+    uri: 'https://media1.giphy.com/media/3oEjI6SIIHBdRxXI40/200.gif',
+  };
+
+  render() {
+    const loadingImage = {
+      uri: `https://www.facebook.com/ads/pics/successstories.png?hash=${this.state.imageHash}`,
+    };
+
+    return (
+      <View>
+        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+          <Text style={styles.touchableText} onPress={this.reloadImage}>
+            Refresh Image
+          </Text>
+        </View>
+        <Image
+          loadingIndicatorSource={this.loaderGif}
+          source={loadingImage}
+          style={styles.base}
+        />
+        <Text>Image Hash: {this.state.imageHash}</Text>
+        <Text>Image URI: {loadingImage.uri}</Text>
+      </View>
+    );
+  }
+}
+
+type OnLayoutExampleState = {|
+  width: number,
+  height: number,
+  layoutHandlerMessage: string,
+|};
+
+type OnLayoutExampleProps = $ReadOnly<{||}>;
+
+class OnLayoutExample extends React.Component<
+  OnLayoutExampleProps,
+  OnLayoutExampleState,
+> {
+  state = {
+    width: 30,
+    height: 30,
+    layoutHandlerMessage: 'No Message',
+  };
+
+  onLayoutHandler = event => {
+    this.setState({
+      width: this.state.width,
+      height: this.state.height,
+      layoutHandlerMessage: JSON.stringify(event.nativeEvent),
+    });
+    console.log(event.nativeEvent);
+  };
+
+  increaseImageSize = () => {
+    if (this.state.width >= 100) {
+      return;
+    }
+    this.setState({
+      width: this.state.width + 10,
+      height: this.state.height + 10,
+    });
+  };
+
+  increaseImageSize = () => {
+    if (this.state.width >= 100) {
+      return;
+    }
+    this.setState({
+      width: this.state.width + 10,
+      height: this.state.height + 10,
+    });
+  };
+
+  decreaseImageSize = () => {
+    if (this.state.width <= 10) {
+      return;
+    }
+    this.setState({
+      width: this.state.width - 10,
+      height: this.state.height - 10,
+    });
+  };
+
+  render() {
+    return (
+      <View>
+        <Text>Adjust the image size to trigger the OnLayout handler.</Text>
+        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+          <Text style={styles.touchableText} onPress={this.decreaseImageSize}>
+            Decrease image size
+          </Text>
+          <Text style={styles.touchableText} onPress={this.increaseImageSize}>
+            Increase image size
+          </Text>
+        </View>
+        <Text>
+          Container image size: {this.state.width}x{this.state.height}{' '}
+        </Text>
+        <View style={{height: this.state.height, width: this.state.width}}>
+          <Image
+            onLayout={this.onLayoutHandler}
+            style={{flex: 1}}
+            source={[
+              {
+                uri: 'https://www.facebook.com/favicon.ico',
+                width: 38,
+                height: 38,
+              },
+              {
+                uri: 'https://www.facebook.com/favicon.ico',
+                width: 76,
+                height: 76,
+              },
+              {
+                uri: 'https://www.facebook.com/ads/pics/successstories.png',
+                width: 400,
+                height: 400,
+              },
+            ]}
+          />
+        </View>
+        <Text>Layout Handler Message: {this.state.layoutHandlerMessage}</Text>
+      </View>
+    );
+  }
+}
+
+type OnPartialLoadExampleState = {|
+  hasLoaded: boolean,
+|};
+
+type OnPartialLoadExampleProps = $ReadOnly<{||}>;
+
+class OnPartialLoadExample extends React.Component<
+  OnPartialLoadExampleProps,
+  OnPartialLoadExampleState,
+> {
+  state = {
+    hasLoaded: false,
+  };
+
+  partialLoadHandler = () => {
+    this.setState({
+      hasLoaded: true,
+    });
+  };
+
+  render() {
+    return (
+      <View>
+        <Text>
+          Partial Load Function Executed: {JSON.stringify(this.state.hasLoaded)}
+        </Text>
+        <Image
+          source={{
+            uri: `https://images.pexels.com/photos/671557/pexels-photo-671557.jpeg?&buster=${Math.random()}`,
+          }}
+          onPartialLoad={this.partialLoadHandler}
+          style={styles.base}
+        />
+      </View>
+    );
+  }
+}
+
 const fullImage = {
   uri: 'https://www.facebook.com/ads/pics/successstories.png',
 };
@@ -951,4 +1144,60 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Accessibility',
+    description: ('If the `accessible` (boolean) prop is set to True, the image will be indicated as an accessbility element.': string),
+    render: function(): React.Node {
+      return <Image accessible source={fullImage} style={styles.base} />;
+    },
+  },
+  {
+    title: 'Accessibility Label',
+    description: ('When an element is marked as accessibile (using the accessibility prop), it is good practice to set an accessibilityLabel on the image to provide a description of the element to people who use VoiceOver. VoiceOver will read this string when people select this element.': string),
+    render: function(): React.Node {
+      return (
+        <Image
+          accessible
+          accessibilityLabel="Picture of people standing around a table"
+          source={fullImage}
+          style={styles.base}
+        />
+      );
+    },
+  },
+  {
+    title: 'Fade Duration',
+    description: ('The time (in miliseconds) that an image will fade in for when it appears (default = 300).': string),
+    render: function(): React.Node {
+      return (
+        <>
+          <Image fadeDuration={1500} source={fullImage} style={styles.base} />
+          <Text>This image will fade in over the time of 1.5s.</Text>
+        </>
+      );
+    },
+    platform: 'android',
+  },
+  {
+    title: 'Loading Indicator Source',
+    description: ('This prop is used to set the resource that will be used as the loading indicator for the image (displayed until the image is ready to be displayed).': string),
+    render: function(): React.Node {
+      return <LoadingIndicatorSourceExample />;
+    },
+  },
+  {
+    title: 'On Layout',
+    description: ('This prop is used to set the handler function to be called when the image is mounted or its layout changes. The function receives an event with `{nativeEvent: {layout: {x, y, width, height}}}`': string),
+    render: function(): React.Node {
+      return <OnLayoutExample />;
+    },
+  },
+  {
+    title: 'On Partial Load',
+    description: ('This prop is used to set the handler function to be called when the partial load of the image is complete. This is meant for progressive JPEG loads.': string),
+    render: function(): React.Node {
+      return <OnPartialLoadExample />;
+    },
+    platform: 'ios',
+  },
 ];