feat: rework image component to simplify and add additional functionality

Author: comp615

packages/examples/pages/image/index.js

@@ -90,8 +90,12 @@ export default function ImagePage() {
       <Divider />
       <View style={styles.row}>
         <View style={styles.column}>
-          <Text style={[styles.text]}>Cover</Text>
-          <Image resizeMode="cover" source={resizesource} style={styles.resizeMode} />
+          <Text style={[styles.text]}>Cover w/ tint</Text>
+          <Image
+            resizeMode="cover"
+            source={resizesource}
+            style={[styles.resizeMode, { tintColor: 'red' }]}
+          />
         </View>
         <View style={styles.column}>
           <Text style={[styles.text]}>Stretch</Text>

packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap

@@ -5,13 +5,9 @@ exports[`components/Image prop "accessibilityLabel" 1`] = `
   aria-label="accessibilityLabel"
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico);"
-  />
   <img
     alt="accessibilityLabel"
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://google.com/favicon.ico"
   />
@@ -22,15 +18,12 @@ exports[`components/Image prop "blurRadius" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico); filter: blur(5px);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://google.com/favicon.ico"
+    style="filter: blur(5px);"
   />
 </div>
 `;
@@ -40,15 +33,12 @@ exports[`components/Image prop "defaultSource" does not override "height" and "w
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
   style="height: 20px; width: 40px;"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://google.com/favicon.ico"
+    style="height: 20px; width: 40px;"
   />
 </div>
 `;
@@ -58,13 +48,9 @@ exports[`components/Image prop "defaultSource" sets "height" and "width" styles
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
   style="height: 10px; width: 20px;"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://google.com/favicon.ico"
   />
@@ -75,13 +61,9 @@ exports[`components/Image prop "defaultSource" sets background image when value
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://google.com/favicon.ico"
   />
@@ -92,13 +74,9 @@ exports[`components/Image prop "defaultSource" sets background image when value
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://google.com/favicon.ico"
   />
@@ -109,13 +87,9 @@ exports[`components/Image prop "draggable" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="true"
     src="https://google.com/favicon.ico"
   />
@@ -126,95 +100,59 @@ exports[`components/Image prop "focusable" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
   tabindex="0"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-  />
-</div>
+/>
 `;
 
 exports[`components/Image prop "nativeID" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
   id="nativeID"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-  />
-</div>
+/>
 `;
 
 exports[`components/Image prop "resizeMode" value "contain" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-ehq7j7 r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-  />
-</div>
+/>
 `;
 
 exports[`components/Image prop "resizeMode" value "cover" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-  />
-</div>
+/>
 `;
 
 exports[`components/Image prop "resizeMode" value "none" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-p9m3gb r-backgroundRepeat-u6sd8q r-backgroundSize-1sxrcry r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-  />
-</div>
+/>
 `;
 
 exports[`components/Image prop "resizeMode" value "repeat" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-p9m3gb r-backgroundRepeat-17leim2 r-backgroundSize-1sxrcry r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-  />
-</div>
+/>
 `;
 
 exports[`components/Image prop "resizeMode" value "stretch" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-x3cy2q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-  />
-</div>
+/>
 `;
 
 exports[`components/Image prop "resizeMode" value "undefined" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-  />
-</div>
+/>
 `;
 
 exports[`components/Image prop "source" is correctly updated only when loaded if defaultSource provided 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://testing.com/preview.jpg);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://testing.com/preview.jpg"
   />
@@ -225,13 +163,9 @@ exports[`components/Image prop "source" is correctly updated only when loaded if
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://testing.com/fullSize.jpg);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://testing.com/fullSize.jpg"
   />
@@ -242,13 +176,9 @@ exports[`components/Image prop "source" is correctly updated when missing in ini
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://testing.com/img.jpg);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://testing.com/img.jpg"
   />
@@ -259,13 +189,9 @@ exports[`components/Image prop "source" is not set immediately if the image has
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://google.com/favicon.ico"
   />
@@ -276,13 +202,9 @@ exports[`components/Image prop "source" is set immediately if the image has alre
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://google.com/favicon.ico"
   />
@@ -293,13 +215,9 @@ exports[`components/Image prop "source" is set immediately if the image has alre
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://twitter.com/favicon.ico);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://twitter.com/favicon.ico"
   />
@@ -310,13 +228,9 @@ exports[`components/Image prop "source" is set immediately if the image was prel
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://yahoo.com/favicon.ico);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://yahoo.com/favicon.ico"
   />
@@ -327,16 +241,12 @@ exports[`components/Image prop "style" removes other unsupported View styles 1`]
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="filter: url(#tint-57);"
-  />
   <svg
     style="position: absolute; height: 0px; visibility: hidden; width: 0px;"
   >
     <defs>
       <filter
-        id="tint-57"
+        id="tint-56"
       >
         <feflood
           flood-color="blue"
@@ -354,44 +264,32 @@ exports[`components/Image prop "style" removes other unsupported View styles 1`]
 exports[`components/Image prop "style" supports "resizeMode" property 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-ehq7j7 r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-  />
-</div>
+/>
 `;
 
 exports[`components/Image prop "style" supports "shadow" properties (convert to filter) 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="filter: drop-shadow(1px 1px 0px rgba(255,0,0,1.00));"
-  />
-</div>
+/>
 `;
 
 exports[`components/Image prop "style" supports "tintcolor" property (convert to filter) 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-56);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://google.com/favicon.ico"
+    style="filter: url(#tint-55);"
   />
   <svg
     style="position: absolute; height: 0px; visibility: hidden; width: 0px;"
   >
     <defs>
       <filter
-        id="tint-56"
+        id="tint-55"
       >
         <feflood
           flood-color="red"
@@ -410,9 +308,5 @@ exports[`components/Image prop "testID" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
   data-testid="testID"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-  />
-</div>
+/>
 `;