From 71fda5e0c2093380d08761c945f1e3029af6697f Mon Sep 17 00:00:00 2001
From: Gabriel Donadel Dall'Agnol <donadeldev@gmail.com>
Date: Tue, 27 Sep 2022 04:05:15 -0700
Subject: [PATCH] feat: Add alt prop to Image component (#34550)

Summary:
This adds the `alt` prop to the `Image` component as requested on https://github.com/facebook/react-native/issues/34424. Using this new `alt` prop enables the `accessibility` prop and passes down the alt text to `accessibilityLabel`. This PR also updates RNTester ImageExample in order to facilitate the manual QA.

#### Open questions
 - ~~On web `alt` text is displayed on the page if the image can't be loaded for some reason, should we implement this same behavior if the `Image` component fails to load `source`?~~ Not for now

## Changelog

[General] [Added] - Add alt prop to Image component

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

Test Plan:
1. Open the RNTester app and navigate to the Image page
2. Test the `alt` prop through the `Accessibility Label via alt prop` section, this can be tested either by enabling Voice Over if you're using a real device or through the Accessibility Inspector if you're using a simulator

https://user-images.githubusercontent.com/11707729/187790249-0d851363-c30e-41b6-8c24-73e72467f4ba.mov

Reviewed By: lunaleaps

Differential Revision: D39618453

Pulled By: cipolleschi

fbshipit-source-id: 0e26b2574514e76ce7e98ddb578f587a9cc30ee9
---
 Libraries/Image/Image.android.js              |   4 +-
 Libraries/Image/Image.d.ts                    |   8 +
 Libraries/Image/Image.ios.js                  |   3 +-
 Libraries/Image/ImageProps.js                 |   9 +-
 .../js/examples/Image/ImageExample.js         | 387 ++++++++++++------
 5 files changed, 289 insertions(+), 122 deletions(-)

diff --git a/Libraries/Image/Image.android.js b/Libraries/Image/Image.android.js
index 4e8973bb69fe63..f0851b1af2cdc7 100644
--- a/Libraries/Image/Image.android.js
+++ b/Libraries/Image/Image.android.js
@@ -181,7 +181,9 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
       ? loadingIndicatorSource.uri
       : null,
     ref: forwardedRef,
-    accessibilityLabel: props['aria-label'] ?? props.accessibilityLabel,
+    accessible: props.alt !== undefined ? true : props.accessible,
+    accessibilityLabel:
+      props['aria-label'] ?? props.accessibilityLabel ?? props.alt,
     accessibilityState: {
       busy: props['aria-busy'] ?? props.accessibilityState?.busy,
       checked: props['aria-checked'] ?? props.accessibilityState?.checked,
diff --git a/Libraries/Image/Image.d.ts b/Libraries/Image/Image.d.ts
index 6f22ea0563c97a..21c873844a56e9 100644
--- a/Libraries/Image/Image.d.ts
+++ b/Libraries/Image/Image.d.ts
@@ -245,6 +245,14 @@ export interface ImagePropsBase
    * A static image to display while downloading the final image off the network.
    */
   defaultSource?: ImageURISource | number | undefined;
+
+  /**
+   * The text that's read by the screen reader when the user interacts with
+   * the image.
+   *
+   * See https://reactnative.dev/docs/image#alt
+   */
+  alt?: string | undefined;
 }
 
 export interface ImageProps extends ImagePropsBase {
diff --git a/Libraries/Image/Image.ios.js b/Libraries/Image/Image.ios.js
index c66ccd5865fdfe..456fae9de5d48a 100644
--- a/Libraries/Image/Image.ios.js
+++ b/Libraries/Image/Image.ios.js
@@ -173,7 +173,8 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
           <ImageViewNativeComponent
             accessibilityState={_accessibilityState}
             {...restProps}
-            accessibilityLabel={accessibilityLabel}
+            accessible={props.alt !== undefined ? true : props.accessible}
+            accessibilityLabel={accessibilityLabel ?? props.alt}
             ref={forwardedRef}
             style={style}
             resizeMode={resizeMode}
diff --git a/Libraries/Image/ImageProps.js b/Libraries/Image/ImageProps.js
index 6d3ac7d556555a..afe39be80ea0b0 100644
--- a/Libraries/Image/ImageProps.js
+++ b/Libraries/Image/ImageProps.js
@@ -21,7 +21,6 @@ import type {
 import type {ViewProps} from '../Components/View/ViewPropTypes';
 import type {Node, Ref} from 'react';
 import typeof Image from './Image';
-import type {DimensionValue} from '../StyleSheet/StyleSheetTypes';
 
 export type ImageLoadEvent = SyntheticEvent<
   $ReadOnly<{|
@@ -93,6 +92,14 @@ export type ImageProps = {|
    */
   'aria-label'?: ?Stringish,
 
+  /**
+   * The text that's read by the screen reader when the user interacts with
+   * the image.
+   *
+   * See https://reactnative.dev/docs/image#alt
+   */
+  alt?: ?Stringish,
+
   /**
    * blurRadius: the blur radius of the blur filter added to the image
    *
diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js
index dcb2dbdf11d75a..8a129323d0dc2f 100644
--- a/packages/rn-tester/js/examples/Image/ImageExample.js
+++ b/packages/rn-tester/js/examples/Image/ImageExample.js
@@ -129,7 +129,7 @@ class NetworkImageCallbackExample extends React.Component<
       <View>
         <Image
           source={this.props.source}
-          style={[styles.base, {overflow: 'visible'}]}
+          style={[styles.base, styles.visibleOverflow]}
           onLoadStart={() =>
             this._loadEventFired(`✔ onLoadStart (+${Date.now() - mountTime}ms)`)
           }
@@ -185,7 +185,7 @@ class NetworkImageCallbackExample extends React.Component<
         {this.state.startLoadPrefetched ? (
           <Image
             source={this.props.prefetchedSource}
-            style={[styles.base, {overflow: 'visible'}]}
+            style={[styles.base, styles.visibleOverflow]}
             onLoadStart={() =>
               this._loadEventFired(
                 `✔ (prefetched) onLoadStart (+${Date.now() - mountTime}ms)`,
@@ -213,7 +213,9 @@ class NetworkImageCallbackExample extends React.Component<
             }
           />
         ) : null}
-        <Text style={{marginTop: 20}}>{this.state.events.join('\n')}</Text>
+        <Text style={styles.networkImageText}>
+          {this.state.events.join('\n')}
+        </Text>
       </View>
     );
   }
@@ -246,7 +248,7 @@ class NetworkImageExample extends React.Component<
       <>
         <Image
           source={this.props.source}
-          style={[styles.base, {overflow: 'visible'}]}
+          style={[styles.base, styles.visibleOverflow]}
           onLoadStart={e => this.setState({loading: true})}
           onError={e =>
             this.setState({error: e.nativeEvent.error, loading: false})
@@ -296,16 +298,8 @@ class ImageSizeExample extends React.Component<
 
   render(): React.Node {
     return (
-      <View style={{flexDirection: 'row'}}>
-        <Image
-          style={{
-            width: 60,
-            height: 60,
-            backgroundColor: 'transparent',
-            marginRight: 10,
-          }}
-          source={this.props.source}
-        />
+      <View style={styles.flexRow}>
+        <Image style={styles.imageSizeExample} source={this.props.source} />
         <Text>
           Actual dimensions:{'\n'}
           Width: {this.state.width}, Height: {this.state.height}
@@ -354,7 +348,7 @@ class MultipleSourcesExample extends React.Component<
   render(): React.Node {
     return (
       <View>
-        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+        <View style={styles.spaceBetweenView}>
           <Text style={styles.touchableText} onPress={this.decreaseImageSize}>
             Decrease image size
           </Text>
@@ -367,7 +361,7 @@ class MultipleSourcesExample extends React.Component<
         </Text>
         <View style={{height: this.state.height, width: this.state.width}}>
           <Image
-            style={{flex: 1}}
+            style={styles.flex}
             source={[
               {
                 uri: 'https://www.facebook.com/favicon.ico',
@@ -418,7 +412,7 @@ class LoadingIndicatorSourceExample extends React.Component<
 
     return (
       <View>
-        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+        <View style={styles.spaceBetweenView}>
           <Text style={styles.touchableText} onPress={this.reloadImage}>
             Refresh Image
           </Text>
@@ -486,7 +480,7 @@ class OnLayoutExample extends React.Component<
     return (
       <View>
         <Text>Adjust the image size to trigger the OnLayout handler.</Text>
-        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+        <View style={styles.spaceBetweenView}>
           <Text style={styles.touchableText} onPress={this.decreaseImageSize}>
             Decrease image size
           </Text>
@@ -500,7 +494,7 @@ class OnLayoutExample extends React.Component<
         <View style={{height: this.state.height, width: this.state.width}}>
           <Image
             onLayout={this.onLayoutHandler}
-            style={{flex: 1}}
+            style={styles.flex}
             source={[
               {
                 uri: 'https://www.facebook.com/favicon.ico',
@@ -577,6 +571,9 @@ const styles = StyleSheet.create({
     height: 64,
     margin: 4,
   },
+  visibleOverflow: {
+    overflow: 'visible',
+  },
   leftMargin: {
     marginLeft: 10,
   },
@@ -624,6 +621,144 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     color: 'blue',
   },
+  networkImageText: {
+    marginTop: 20,
+  },
+  flex: {
+    flex: 1,
+  },
+  imageWithBorderRadius: {
+    borderRadius: 5,
+  },
+  imageSizeExample: {
+    width: 60,
+    height: 60,
+    backgroundColor: 'transparent',
+    marginRight: 10,
+  },
+  flexRow: {
+    flexDirection: 'row',
+  },
+  spaceBetweenView: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  customBorderColor: {
+    borderWidth: 5,
+    borderColor: '#f099f0',
+  },
+  borderTopLeftRadius: {
+    borderTopLeftRadius: 20,
+  },
+  opacity1: {
+    opacity: 1,
+  },
+  opacity2: {
+    opacity: 0.8,
+  },
+  opacity3: {
+    opacity: 0.6,
+  },
+  opacity4: {
+    opacity: 0.4,
+  },
+  opacity5: {
+    opacity: 0.2,
+  },
+  opacity6: {
+    opacity: 0,
+  },
+  transparentImageBackground: {
+    width: 60,
+    height: 60,
+    backgroundColor: 'transparent',
+  },
+  tintColor1: {
+    tintColor: '#ff2d55',
+  },
+  tintColor2: {
+    tintColor: '#5ac8fa',
+  },
+  tintColor3: {
+    tintColor: '#4cd964',
+  },
+  tintColor4: {
+    tintColor: '#8e8e93',
+  },
+  objectFitContain: {
+    objectFit: 'contain',
+  },
+  objectFitCover: {
+    objectFit: 'cover',
+  },
+  objectFitFill: {
+    objectFit: 'fill',
+  },
+  objectFitScaleDown: {
+    objectFit: 'scale-down',
+  },
+  imageInBundle: {
+    borderColor: 'yellow',
+    borderWidth: 4,
+  },
+  imageInAssetCatalog: {
+    marginLeft: 10,
+    borderColor: 'blue',
+    borderWidth: 4,
+  },
+  backgroundColor1: {
+    backgroundColor: 'rgba(0, 0, 100, 0.25)',
+  },
+  backgroundColor2: {
+    backgroundColor: 'red',
+  },
+  backgroundColor3: {
+    backgroundColor: 'red',
+    borderColor: 'green',
+    borderWidth: 3,
+    borderRadius: 25,
+  },
+  borderRadius1: {
+    borderRadius: 19,
+  },
+  borderRadius2: {
+    borderWidth: 4,
+    borderTopLeftRadius: 10,
+    borderBottomRightRadius: 20,
+    borderColor: 'green',
+  },
+  borderRadius3: {
+    resizeMode: 'cover',
+    width: 90,
+    borderWidth: 4,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 20,
+    borderBottomRightRadius: 30,
+    borderBottomLeftRadius: 40,
+    borderColor: 'red',
+  },
+  borderRadius4: {
+    resizeMode: 'stretch',
+    width: 90,
+    borderWidth: 4,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 20,
+    borderBottomRightRadius: 30,
+    borderBottomLeftRadius: 40,
+    borderColor: 'red',
+    backgroundColor: 'yellow',
+  },
+  borderRadius5: {
+    resizeMode: 'contain',
+    width: 90,
+    borderWidth: 4,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 20,
+    borderBottomRightRadius: 30,
+    borderBottomLeftRadius: 40,
+    borderColor: 'red',
+    backgroundColor: 'yellow',
+  },
 });
 
 exports.displayName = (undefined: ?string);
@@ -803,11 +938,7 @@ exports.examples = [
         <View style={styles.horizontal}>
           <Image
             source={smallImage}
-            style={[
-              styles.base,
-              styles.background,
-              {borderWidth: 5, borderColor: '#f099f0'},
-            ]}
+            style={[styles.base, styles.background, styles.customBorderColor]}
           />
         </View>
       );
@@ -818,72 +949,32 @@ exports.examples = [
     render: function (): React.Node {
       return (
         <View style={styles.horizontal}>
-          <Image style={[styles.base, {borderRadius: 5}]} source={fullImage} />
-          <Image style={[styles.base, {borderRadius: 19}]} source={fullImage} />
           <Image
-            style={[styles.base, {borderTopLeftRadius: 20}]}
+            style={[styles.base, styles.imageWithBorderRadius]}
             source={fullImage}
           />
           <Image
-            style={[
-              styles.base,
-              {
-                borderWidth: 4,
-                borderTopLeftRadius: 10,
-                borderBottomRightRadius: 20,
-                borderColor: 'green',
-              },
-            ]}
+            style={[styles.base, styles.borderRadius1]}
             source={fullImage}
           />
           <Image
-            style={[
-              styles.base,
-              {
-                resizeMode: 'cover',
-                width: 90,
-                borderWidth: 4,
-                borderTopLeftRadius: 10,
-                borderTopRightRadius: 20,
-                borderBottomRightRadius: 30,
-                borderBottomLeftRadius: 40,
-                borderColor: 'red',
-              },
-            ]}
+            style={[styles.base, styles.borderTopLeftRadius]}
             source={fullImage}
           />
           <Image
-            style={[
-              styles.base,
-              {
-                resizeMode: 'stretch',
-                width: 90,
-                borderWidth: 4,
-                borderTopLeftRadius: 10,
-                borderTopRightRadius: 20,
-                borderBottomRightRadius: 30,
-                borderBottomLeftRadius: 40,
-                borderColor: 'red',
-                backgroundColor: 'yellow',
-              },
-            ]}
+            style={[styles.base, styles.borderRadius2]}
             source={fullImage}
           />
           <Image
-            style={[
-              styles.base,
-              {
-                resizeMode: 'contain',
-                width: 90,
-                borderWidth: 4,
-                borderTopLeftRadius: 10,
-                borderTopRightRadius: 20,
-                borderBottomRightRadius: 30,
-                borderBottomLeftRadius: 40,
-                borderColor: 'red',
-                backgroundColor: 'yellow',
-              },
-            ]}
+            style={[styles.base, styles.borderRadius3]}
+            source={fullImage}
+          />
+          <Image
+            style={[styles.base, styles.borderRadius4]}
+            source={fullImage}
+          />
+          <Image
+            style={[styles.base, styles.borderRadius5]}
             source={fullImage}
           />
         </View>
@@ -897,23 +988,15 @@ exports.examples = [
         <View style={styles.horizontal}>
           <Image source={smallImage} style={styles.base} />
           <Image
-            style={[styles.base, {backgroundColor: 'rgba(0, 0, 100, 0.25)'}]}
+            style={[styles.base, styles.backgroundColor1]}
             source={smallImage}
           />
           <Image
-            style={[styles.base, {backgroundColor: 'red'}]}
+            style={[styles.base, styles.backgroundColor2]}
             source={smallImage}
           />
           <Image
-            style={[
-              styles.base,
-              {
-                backgroundColor: 'red',
-                borderColor: 'green',
-                borderWidth: 3,
-                borderRadius: 25,
-              },
-            ]}
+            style={[styles.base, styles.backgroundColor3]}
             source={smallImage}
           />
         </View>
@@ -925,12 +1008,12 @@ exports.examples = [
     render: function (): React.Node {
       return (
         <View style={styles.horizontal}>
-          <Image style={[styles.base, {opacity: 1}]} source={fullImage} />
-          <Image style={[styles.base, {opacity: 0.8}]} source={fullImage} />
-          <Image style={[styles.base, {opacity: 0.6}]} source={fullImage} />
-          <Image style={[styles.base, {opacity: 0.4}]} source={fullImage} />
-          <Image style={[styles.base, {opacity: 0.2}]} source={fullImage} />
-          <Image style={[styles.base, {opacity: 0}]} source={fullImage} />
+          <Image style={[styles.base, styles.opacity1]} source={fullImage} />
+          <Image style={[styles.base, styles.opacity2]} source={fullImage} />
+          <Image style={[styles.base, styles.opacity3]} source={fullImage} />
+          <Image style={[styles.base, styles.opacity4]} source={fullImage} />
+          <Image style={[styles.base, styles.opacity5]} source={fullImage} />
+          <Image style={[styles.base, styles.opacity6]} source={fullImage} />
         </View>
       );
     },
@@ -939,7 +1022,7 @@ exports.examples = [
     title: 'Nesting content inside <Image> component',
     render: function (): React.Node {
       return (
-        <View style={{width: 60, height: 60}}>
+        <View style={styles.base}>
           <Image
             style={{...StyleSheet.absoluteFillObject}}
             source={fullImage}
@@ -954,7 +1037,7 @@ exports.examples = [
     render: function (): React.Node {
       return (
         <ImageBackground
-          style={{width: 60, height: 60, backgroundColor: 'transparent'}}
+          style={styles.transparentImageBackground}
           source={fullImage}>
           <Text style={styles.nestedText}>React</Text>
         </ImageBackground>
@@ -971,22 +1054,26 @@ exports.examples = [
           <View style={styles.horizontal}>
             <Image
               source={require('../../assets/uie_thumb_normal.png')}
-              style={[styles.icon, {borderRadius: 5, tintColor: '#ff2d55'}]}
+              style={[
+                styles.icon,
+                styles.imageWithBorderRadius,
+                styles.tintColor1,
+              ]}
               tintColor={'#5ac8fa'}
             />
             <Image
               source={require('../../assets/uie_thumb_normal.png')}
-              style={[styles.icon, {borderRadius: 5}]}
+              style={[styles.icon, styles.imageWithBorderRadius]}
               tintColor={'#4cd964'}
             />
             <Image
               source={require('../../assets/uie_thumb_normal.png')}
-              style={[styles.icon, {borderRadius: 5}]}
+              style={[styles.icon, styles.imageWithBorderRadius]}
               tintColor={'#ff2d55'}
             />
             <Image
               source={require('../../assets/uie_thumb_normal.png')}
-              style={[styles.icon, {borderRadius: 5}]}
+              style={[styles.icon, styles.imageWithBorderRadius]}
               tintColor={'#8e8e93'}
             />
           </View>
@@ -996,19 +1083,35 @@ exports.examples = [
           <View style={styles.horizontal}>
             <Image
               source={require('../../assets/uie_thumb_normal.png')}
-              style={[styles.icon, {borderRadius: 5, tintColor: '#5ac8fa'}]}
+              style={[
+                styles.icon,
+                styles.imageWithBorderRadius,
+                styles.tintColor2,
+              ]}
             />
             <Image
               source={require('../../assets/uie_thumb_normal.png')}
-              style={[styles.icon, {borderRadius: 5, tintColor: '#4cd964'}]}
+              style={[
+                styles.icon,
+                styles.imageWithBorderRadius,
+                styles.tintColor3,
+              ]}
             />
             <Image
               source={require('../../assets/uie_thumb_normal.png')}
-              style={[styles.icon, {borderRadius: 5, tintColor: '#ff2d55'}]}
+              style={[
+                styles.icon,
+                styles.imageWithBorderRadius,
+                styles.tintColor1,
+              ]}
             />
             <Image
               source={require('../../assets/uie_thumb_normal.png')}
-              style={[styles.icon, {borderRadius: 5, tintColor: '#8e8e93'}]}
+              style={[
+                styles.icon,
+                styles.imageWithBorderRadius,
+                styles.tintColor4,
+              ]}
             />
           </View>
           <Text style={styles.sectionText}>
@@ -1017,22 +1120,38 @@ exports.examples = [
           <View style={styles.horizontal}>
             <Image
               source={require('../../assets/uie_thumb_normal.png')}
-              style={[styles.icon, {borderRadius: 5, tintColor: '#5ac8fa'}]}
+              style={[
+                styles.icon,
+                styles.imageWithBorderRadius,
+                styles.tintColor2,
+              ]}
               tintColor={'#5ac8fa'}
             />
             <Image
               source={require('../../assets/uie_thumb_normal.png')}
-              style={[styles.icon, {borderRadius: 5, tintColor: '#4cd964'}]}
+              style={[
+                styles.icon,
+                styles.imageWithBorderRadius,
+                styles.tintColor3,
+              ]}
               tintColor={'#5ac8fa'}
             />
             <Image
               source={require('../../assets/uie_thumb_normal.png')}
-              style={[styles.icon, {borderRadius: 5, tintColor: '#ff2d55'}]}
+              style={[
+                styles.icon,
+                styles.imageWithBorderRadius,
+                styles.tintColor1,
+              ]}
               tintColor={'#5ac8fa'}
             />
             <Image
               source={require('../../assets/uie_thumb_normal.png')}
-              style={[styles.icon, {borderRadius: 5, tintColor: '#8e8e93'}]}
+              style={[
+                styles.icon,
+                styles.imageWithBorderRadius,
+                styles.tintColor4,
+              ]}
               tintColor={'#5ac8fa'}
             />
           </View>
@@ -1042,19 +1161,35 @@ exports.examples = [
           <View style={styles.horizontal}>
             <Image
               source={smallImage}
-              style={[styles.base, {borderRadius: 5, tintColor: '#5ac8fa'}]}
+              style={[
+                styles.base,
+                styles.imageWithBorderRadius,
+                styles.tintColor2,
+              ]}
             />
             <Image
               source={smallImage}
-              style={[styles.base, {borderRadius: 5, tintColor: '#4cd964'}]}
+              style={[
+                styles.base,
+                styles.imageWithBorderRadius,
+                styles.tintColor3,
+              ]}
             />
             <Image
               source={smallImage}
-              style={[styles.base, {borderRadius: 5, tintColor: '#ff2d55'}]}
+              style={[
+                styles.base,
+                styles.imageWithBorderRadius,
+                styles.tintColor1,
+              ]}
             />
             <Image
               source={smallImage}
-              style={[styles.base, {borderRadius: 5, tintColor: '#8e8e93'}]}
+              style={[
+                styles.base,
+                styles.imageWithBorderRadius,
+                styles.tintColor4,
+              ]}
             />
           </View>
         </View>
@@ -1075,14 +1210,14 @@ exports.examples = [
                   <View>
                     <Text style={styles.resizeModeText}>Contain</Text>
                     <Image
-                      style={[styles.resizeMode, {objectFit: 'contain'}]}
+                      style={[styles.resizeMode, styles.objectFitContain]}
                       source={image}
                     />
                   </View>
                   <View style={styles.leftMargin}>
                     <Text style={styles.resizeModeText}>Cover</Text>
                     <Image
-                      style={[styles.resizeMode, {objectFit: 'cover'}]}
+                      style={[styles.resizeMode, styles.objectFitCover]}
                       source={image}
                     />
                   </View>
@@ -1091,14 +1226,14 @@ exports.examples = [
                   <View>
                     <Text style={styles.resizeModeText}>Fill</Text>
                     <Image
-                      style={[styles.resizeMode, {objectFit: 'fill'}]}
+                      style={[styles.resizeMode, styles.objectFitFill]}
                       source={image}
                     />
                   </View>
                   <View style={styles.leftMargin}>
                     <Text style={styles.resizeModeText}>Scale Down</Text>
                     <Image
-                      style={[styles.resizeMode, {objectFit: 'scale-down'}]}
+                      style={[styles.resizeMode, styles.objectFitScaleDown]}
                       source={image}
                     />
                   </View>
@@ -1232,7 +1367,7 @@ exports.examples = [
     description: 'Images shipped in a separate native bundle',
     render: function (): React.Node {
       return (
-        <View style={{flexDirection: 'row'}}>
+        <View style={styles.flexRow}>
           <Image
             source={{
               uri: 'ImageInBundle',
@@ -1240,7 +1375,7 @@ exports.examples = [
               width: 100,
               height: 100,
             }}
-            style={{borderColor: 'yellow', borderWidth: 4}}
+            style={styles.imageInBundle}
           />
           <Image
             source={{
@@ -1249,7 +1384,7 @@ exports.examples = [
               width: 100,
               height: 100,
             }}
-            style={{marginLeft: 10, borderColor: 'blue', borderWidth: 4}}
+            style={styles.imageInAssetCatalog}
           />
         </View>
       );
@@ -1294,6 +1429,20 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Accessibility Label via alt prop',
+    description:
+      'Using the alt prop markes an element as being accessibile, and passes the alt text to accessibilityLabel',
+    render: function (): React.Node {
+      return (
+        <Image
+          alt="Picture of people standing around a table"
+          source={fullImage}
+          style={styles.base}
+        />
+      );
+    },
+  },
   {
     title: 'Fade Duration',
     description: