Added background view to error image to prevent it from being stretched (#1623)

* Added background view to error image to prevent it from being stretched

* Fixed failing snapshot (only missing undefined object in this case)

* rename

* removed width and height props

* Moved inline style into styles + lower zIndex to keep image children in priority

* added additonal error-image sizes variations

* refactor

* typings

* update snapshot

Author: mendyEdri

demo/src/assets/images/[email protected]

@@ -90,8 +90,8 @@ export declare function extractModifierProps(props: Dictionary<any>): _.Dictiona
  * TODO:
  * @deprecated switch to Modifiers#extractComponentProps
  */
-export declare function extractOwnProps(props: Dictionary<any>, ignoreProps: string[]): _.Omit<_.Dictionary<any>, string>;
-export declare function extractComponentProps(component: any, props: Dictionary<any>, ignoreProps?: string[]): _.Omit<_.Dictionary<any>, string>;
+export declare function extractOwnProps(props: Dictionary<any>, ignoreProps: string[]): _.Omit<Partial<Dictionary<any>>, string>;
+export declare function extractComponentProps(component: any, props: Dictionary<any>, ignoreProps?: string[]): _.Omit<Partial<Dictionary<any>>, string>;
 export declare function getThemeProps(props?: any, context?: any): any;
 export declare function generateModifiersStyle(options: {
     color: boolean;

demo/src/assets/images/[email protected]

@@ -90,6 +90,8 @@ declare class Image extends PureComponent<Props, State> {
     getImageSource(): any;
     onError: (event: NativeSyntheticEvent<ImageErrorEventData>) => void;
     renderSvg: () => JSX.Element;
+    renderErrorImage: () => JSX.Element;
+    renderImage: (useImageInsideContainer: boolean) => JSX.Element;
     renderRegularImage(): JSX.Element;
     render(): JSX.Element;
 }

demo/src/assets/images/[email protected]

@@ -895,6 +895,7 @@ exports[`Button container size should have no padding of button is an icon butto
           },
           undefined,
         ],
+        false,
       ]
     }
   />
@@ -1722,6 +1723,7 @@ exports[`Button icon should apply color on icon 1`] = `
           },
           undefined,
         ],
+        false,
       ]
     }
   />
@@ -1777,6 +1779,7 @@ exports[`Button icon should apply color on icon 2`] = `
           },
           undefined,
         ],
+        false,
       ]
     }
   />
@@ -1835,6 +1838,7 @@ exports[`Button icon should include custom iconStyle provided as a prop 1`] = `
             "tintColor": "red",
           },
         ],
+        false,
       ]
     }
   />
@@ -1892,6 +1896,7 @@ exports[`Button icon should return icon style according to different variations
           },
           undefined,
         ],
+        false,
       ]
     }
   />
@@ -1947,6 +1952,7 @@ exports[`Button icon should return icon style according to different variations
           },
           undefined,
         ],
+        false,
       ]
     }
   />
@@ -2002,6 +2008,7 @@ exports[`Button icon should return icon style according to different variations
           },
           undefined,
         ],
+        false,
       ]
     }
   />
@@ -2984,6 +2991,7 @@ exports[`Button labelColor should return undefined color if this is an icon butt
           },
           undefined,
         ],
+        false,
       ]
     }
   />

demo/src/assets/images/[email protected]

@@ -16,6 +16,8 @@ import {asBaseComponent, ForwardRefInjectedProps, BaseComponentInjectedProps, Ma
 import Assets from '../../assets';
 import Overlay, {OverlayTypeType, OverlayIntensityType} from '../overlay';
 import SvgImage from './SvgImage';
+import View from '../view';
+import {Colors} from '../../style';
 
 
 export type ImageProps = RNImageProps & MarginModifiers & {
@@ -159,14 +161,36 @@ class Image extends PureComponent<Props, State> {
       this.setState({error: true});
       this.props.onError?.(event);
     }
-  }
+  };
 
   renderSvg = () => {
     const {source, ...others} = this.props;
     return <SvgImage data={source} {...others}/>;
-  }
+  };
 
-  renderRegularImage() {
+  renderErrorImage = () => {
+    const {
+      style,
+      cover,
+      modifiers
+    } = this.props;
+    const {margins} = modifiers;
+
+    return (
+      <View
+        style={[
+          margins,
+          style,
+          styles.errorImageContainer,
+          cover && styles.coverImage
+        ]}
+      >
+        {this.renderImage(true)}
+      </View>
+    );
+  };
+
+  renderImage = (useImageInsideContainer: boolean) => {
     const {error} = this.state;
     const source = error ? this.getVerifiedSource(this.props.errorSource) : this.getImageSource();
     const {
@@ -185,6 +209,7 @@ class Image extends PureComponent<Props, State> {
     const shouldFlipRTL = supportRTL && Constants.isRTL;
     const ImageView = this.shouldUseImageBackground() ? ImageBackground : RNImage;
     const {margins} = modifiers;
+    const resizeMode = useImageInsideContainer ? 'contain' : undefined;
 
     return (
       // @ts-ignore
@@ -195,9 +220,11 @@ class Image extends PureComponent<Props, State> {
           cover && styles.coverImage,
           this.isGif() && styles.gifImage,
           aspectRatio && {aspectRatio},
-          margins,
-          style
+          !useImageInsideContainer && margins,
+          style,
+          useImageInsideContainer && styles.shrink
         ]}
+        resizeMode={resizeMode}
         accessible={false}
         accessibilityRole={'image'}
         {...others}
@@ -214,6 +241,15 @@ class Image extends PureComponent<Props, State> {
         )}
       </ImageView>
     );
+  };
+
+  renderRegularImage() {
+    const {error} = this.state;
+    if (error) {
+      return this.renderErrorImage();
+    } else {
+      return this.renderImage(false);
+    }
   }
 
   render() {
@@ -237,6 +273,13 @@ const styles = StyleSheet.create({
   },
   gifImage: {
     overflow: 'hidden'
+  },
+  errorImageContainer: {
+    backgroundColor: Colors.grey70,
+    zIndex: -1
+  },
+  shrink: {
+    flexShrink: 1
   }
 });