Support imageId in Image, and fix props passing in Card.Image (#1852)

Author: ethanshar

generatedTypes/src/components/image/index.d.ts

@@ -52,6 +52,10 @@ export declare type ImageProps = RNImageProps & MarginModifiers & {
      * Default image source in case of an error
      */
     errorSource?: ImageSourcePropType;
+    /**
+     * An imageId that can be used in sourceTransformer logic
+     */
+    imageId?: string;
 };
 declare type Props = ImageProps & ForwardRefInjectedProps & BaseComponentInjectedProps;
 declare type State = {
@@ -146,6 +150,10 @@ declare const _default: React.ComponentClass<RNImageProps & Partial<Record<"marg
      * Default image source in case of an error
      */
     errorSource?: ImageSourcePropType | undefined;
+    /**
+     * An imageId that can be used in sourceTransformer logic
+     */
+    imageId?: string | undefined;
 } & {
     useCustomTheme?: boolean | undefined;
 }, any> & typeof Image;

src/components/card/CardImage.tsx

@@ -45,22 +45,21 @@ class CardImage extends PureComponent<Props> {
       style,
       testID,
       overlayType,
-      context: {borderStyle}
+      context: {borderStyle},
+      ...others
     } = this.props;
 
-    if (source) {
-      return (
-        <View style={[this.styles.container, borderStyle, style]}>
-          <Image
-            testID={testID}
-            source={source}
-            style={[this.styles.image]}
-            overlayType={overlayType}
-          />
-        </View>
-      );
-    }
-    return null;
+    return (
+      <View style={[this.styles.container, borderStyle, style]}>
+        <Image
+          testID={testID}
+          source={source}
+          style={[this.styles.image]}
+          overlayType={overlayType}
+          {...others}
+        />
+      </View>
+    );  
   }
 }
 

src/components/image/image.api.json

@@ -41,7 +41,8 @@
     },
     {"name": "overlayColor", "type": "string", "description": "Pass a custom color for the overlay"},
     {"name": "customOverlayContent", "type": "JSX.Element", "description": "Render an overlay with custom content"},
-    {"name": "errorSource", "type": "ImageSourcePropType", "description": "Default image source in case of an error"}
+    {"name": "errorSource", "type": "ImageSourcePropType", "description": "Default image source in case of an error"},
+    {"name": "imageId", "type": "string", "description": "An imageId that can be used in sourceTransformer logic"}
   ],
   "snippet": [
     "<Image source={{uri: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/assets/images/card-example.jpg}}/>"

src/components/image/index.tsx

@@ -67,7 +67,11 @@ export type ImageProps = RNImageProps & MarginModifiers & {
   /**
    * Default image source in case of an error
    */
-  errorSource?: ImageSourcePropType
+  errorSource?: ImageSourcePropType;
+  /**
+   * An imageId that can be used in sourceTransformer logic
+   */
+  imageId?: string;
 };
 
 type Props = ImageProps & ForwardRefInjectedProps & BaseComponentInjectedProps;