Adding 'defaultSource' for image source in case of an error

generatedTypes/components/chip/index.d.ts

@@ -313,7 +313,7 @@ declare const _default: React.ComponentClass<ViewProps & Pick<import("react-nati
     /**
      * Additional icon props
      */
-    iconProps?: Pick<ImageProps, "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "style" | "testID" | "onLayout" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "width" | "height" | "borderRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "aspectRatio" | "onError" | "onLoad" | "onLoadEnd" | "onLoadStart" | "progressiveRenderingEnabled" | "resizeMode" | "resizeMethod" | "loadingIndicatorSource" | "defaultSource" | "blurRadius" | "capInsets" | "onProgress" | "onPartialLoad" | "fadeDuration" | "cover" | "sourceTransformer" | "assetName" | "assetGroup" | "tintColor" | "supportRTL" | "overlayType" | "overlayColor" | "customOverlayContent"> | undefined;
+    iconProps?: Pick<ImageProps, "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "style" | "testID" | "onLayout" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "width" | "height" | "borderRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "aspectRatio" | "onError" | "onLoad" | "onLoadEnd" | "onLoadStart" | "progressiveRenderingEnabled" | "resizeMode" | "resizeMethod" | "loadingIndicatorSource" | "defaultSource" | "blurRadius" | "capInsets" | "onProgress" | "onPartialLoad" | "fadeDuration" | "cover" | "sourceTransformer" | "assetName" | "assetGroup" | "tintColor" | "supportRTL" | "overlayType" | "overlayColor" | "customOverlayContent" | "errorSource"> | undefined;
     /**
      * Icon style
      */

generatedTypes/components/image/index.d.ts

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { ImageProps as RNImageProps, ImageSourcePropType } from 'react-native';
+import { ImageProps as RNImageProps, ImageSourcePropType, NativeSyntheticEvent, ImageErrorEventData } from 'react-native';
 import { ForwardRefInjectedProps, BaseComponentInjectedProps, MarginModifiers } from '../../commons/new';
 import { OverlayTypeType } from '../overlay';
 export declare type ImageProps = RNImageProps & MarginModifiers & {
@@ -44,14 +44,22 @@ export declare type ImageProps = RNImageProps & MarginModifiers & {
      * Render an overlay with custom content
      */
     customOverlayContent?: JSX.Element;
+    /**
+     * Default image source in case of an error
+     */
+    errorSource?: ImageSourcePropType;
 };
 declare type Props = ImageProps & ForwardRefInjectedProps & BaseComponentInjectedProps;
+declare type State = {
+    error: boolean;
+    prevSource: ImageSourcePropType;
+};
 /**
  * @description: Image wrapper with extra functionality like source transform and assets support
  * @extends: Image
  * @extendslink: https://facebook.github.io/react-native/docs/image.html
  */
-declare class Image extends PureComponent<Props> {
+declare class Image extends PureComponent<Props, State> {
     static displayName: string;
     static defaultProps: {
         assetGroup: string;
@@ -64,9 +72,14 @@ declare class Image extends PureComponent<Props> {
     };
     sourceTransformer?: (props: any) => ImageSourcePropType;
     constructor(props: Props);
+    static getDerivedStateFromProps(nextProps: Partial<Props>, prevState: State): {
+        error: boolean;
+    } | null;
     isGif(): boolean | undefined;
     shouldUseImageBackground(): boolean;
+    getVerifiedSource(source?: ImageSourcePropType): any;
     getImageSource(): any;
+    onError: (event: NativeSyntheticEvent<ImageErrorEventData>) => void;
     render(): JSX.Element;
 }
 export { Image };
@@ -112,6 +125,10 @@ declare const _default: React.ComponentClass<RNImageProps & Partial<Record<"marg
      * Render an overlay with custom content
      */
     customOverlayContent?: JSX.Element | undefined;
+    /**
+     * Default image source in case of an error
+     */
+    errorSource?: number | import("react-native").ImageURISource | import("react-native").ImageURISource[] | undefined;
 } & {
     useCustomTheme?: boolean | undefined;
 }, any>;

src/components/button/__tests__/__snapshots__/index.spec.js.snap

@@ -852,6 +852,7 @@ exports[`Button container size should have no padding of button is an icon butto
     accessibilityRole="image"
     accessible={false}
     assetGroup="icons"
+    onError={[Function]}
     source={14}
     style={
       Array [
@@ -1657,6 +1658,7 @@ exports[`Button icon should apply color on icon 1`] = `
     accessibilityRole="image"
     accessible={false}
     assetGroup="icons"
+    onError={[Function]}
     source={12}
     style={
       Array [
@@ -1709,6 +1711,7 @@ exports[`Button icon should apply color on icon 2`] = `
     accessibilityRole="image"
     accessible={false}
     assetGroup="icons"
+    onError={[Function]}
     source={12}
     style={
       Array [
@@ -1761,6 +1764,7 @@ exports[`Button icon should include custom iconStyle provided as a prop 1`] = `
     accessibilityRole="image"
     accessible={false}
     assetGroup="icons"
+    onError={[Function]}
     source={12}
     style={
       Array [
@@ -1818,6 +1822,7 @@ exports[`Button icon should return icon style according to different variations
     accessibilityRole="image"
     accessible={false}
     assetGroup="icons"
+    onError={[Function]}
     source={12}
     style={
       Array [
@@ -1870,6 +1875,7 @@ exports[`Button icon should return icon style according to different variations
     accessibilityRole="image"
     accessible={false}
     assetGroup="icons"
+    onError={[Function]}
     source={12}
     style={
       Array [
@@ -1922,6 +1928,7 @@ exports[`Button icon should return icon style according to different variations
     accessibilityRole="image"
     accessible={false}
     assetGroup="icons"
+    onError={[Function]}
     source={12}
     style={
       Array [
@@ -2875,6 +2882,7 @@ exports[`Button labelColor should return undefined color if this is an icon butt
     accessibilityRole="image"
     accessible={false}
     assetGroup="icons"
+    onError={[Function]}
     source={12}
     style={
       Array [

src/components/image/index.tsx

@@ -2,13 +2,22 @@ import _ from 'lodash';
 import React, {PureComponent} from 'react';
 //@ts-ignore
 import hoistNonReactStatic from 'hoist-non-react-statics';
-import {Image as RNImage, ImageProps as RNImageProps, StyleSheet, ImageBackground, ImageSourcePropType} from 'react-native';
+import {
+  StyleSheet,
+  Image as RNImage,
+  ImageProps as RNImageProps,
+  ImageBackground,
+  ImageSourcePropType,
+  NativeSyntheticEvent,
+  ImageErrorEventData
+} from 'react-native';
 import Constants from '../../helpers/Constants';
 import {asBaseComponent, ForwardRefInjectedProps, BaseComponentInjectedProps, MarginModifiers} from '../../commons/new';
 // @ts-ignore
 import Assets from '../../assets';
 import Overlay, {OverlayTypeType} from '../overlay';
 
+
 export type ImageProps = RNImageProps & MarginModifiers & {
   /**
    * custom source transform handler for manipulating the image source (great for size control)
@@ -51,16 +60,25 @@ export type ImageProps = RNImageProps & MarginModifiers & {
    * Render an overlay with custom content
    */
   customOverlayContent?: JSX.Element;
+  /**
+   * Default image source in case of an error
+   */
+  errorSource?: ImageSourcePropType
 };
 
 type Props = ImageProps & ForwardRefInjectedProps & BaseComponentInjectedProps;
 
+type State = {
+  error: boolean,
+  prevSource: ImageSourcePropType
+}
+
 /**
  * @description: Image wrapper with extra functionality like source transform and assets support
  * @extends: Image
  * @extendslink: https://facebook.github.io/react-native/docs/image.html
  */
-class Image extends PureComponent<Props> {
+class Image extends PureComponent<Props, State> {
   static displayName = 'Image';
 
   static defaultProps = {
@@ -75,6 +93,20 @@ class Image extends PureComponent<Props> {
     super(props);
 
     this.sourceTransformer = this.props.sourceTransformer;
+
+    this.state = {
+      error: false,
+      prevSource: props.source
+    };
+  }
+
+  static getDerivedStateFromProps(nextProps: Partial<Props>, prevState: State) {
+    if (nextProps.source !== prevState.prevSource) {
+      return {
+        error: false
+      };
+    }
+    return null;
   }
 
   isGif() {
@@ -92,27 +124,36 @@ class Image extends PureComponent<Props> {
     return !!overlayType || this.isGif() || !_.isUndefined(customOverlayContent);
   }
 
+  getVerifiedSource(source?: ImageSourcePropType) {
+    if (_.get(source, 'uri') === null || _.get(source, 'uri') === '') {
+      // @ts-ignore
+      return {...source, uri: undefined};
+    }
+    return source;
+  }
+
   getImageSource() {
-    const {assetName, assetGroup} = this.props;
+    const {assetName, assetGroup, source} = this.props;
+
     if (!_.isUndefined(assetName)) {
       return _.get(Assets, `${assetGroup}.${assetName}`);
     }
-
     if (this.sourceTransformer) {
       return this.sourceTransformer(this.props);
     }
 
-    const {source} = this.props;
-    if (_.get(source, 'uri') === null || _.get(source, 'uri') === '') {
-      // @ts-ignore
-      return {...source, uri: undefined};
-    }
+    return this.getVerifiedSource(source);
+  }
 
-    return source;
+  onError = (event: NativeSyntheticEvent<ImageErrorEventData>) => {
+    if (event.nativeEvent.error) {
+      this.setState({error: true});
+    }
   }
 
   render() {
-    const source = this.getImageSource();
+    const {error} = this.state;
+    const source = error ? this.getVerifiedSource(this.props.errorSource) : this.getImageSource();
     const {
       tintColor,
       style,
@@ -144,6 +185,7 @@ class Image extends PureComponent<Props> {
         accessible={false}
         accessibilityRole={'image'}
         {...others}
+        onError={this.onError}
         source={source}
       >
         {(overlayType || customOverlayContent) && (