Image support in string as source, for svg strings (#2983)

* Image support in string as source, for svg strings

* code review refactor, image utils testing

* removed ImagePropTypes from Image index file

Author: adids1221

src/components/icon/index.tsx

@@ -7,6 +7,7 @@ import {getAsset, isSvg, isBase64ImageContent} from '../../utils/imageUtils';
 import {RecorderProps} from '../../typings/recorderTypes';
 import Badge, {BadgeProps} from '../badge';
 import SvgImage from '../svgImage';
+import type {ImageSourceType} from '../image';
 
 export type IconProps = Omit<ImageProps, 'source'> &
   MarginModifiers &
@@ -35,7 +36,7 @@ export type IconProps = Omit<ImageProps, 'source'> &
      * whether the icon should flip horizontally on RTL
      */
     supportRTL?: boolean;
-    source?: ImageProps['source'];
+    source?: ImageSourceType
   };
 
 /**

src/components/image/index.tsx

@@ -9,8 +9,6 @@ import {
   NativeSyntheticEvent,
   ImageErrorEventData
 } from 'react-native';
-// @ts-expect-error No typings available for 'deprecated-react-native-prop-types'
-import {ImagePropTypes} from 'deprecated-react-native-prop-types';
 import {
   Constants,
   asBaseComponent,
@@ -24,14 +22,17 @@ import Overlay, {OverlayTypeType, OverlayIntensityType} from '../overlay';
 import SvgImage from '../svgImage';
 import View from '../view';
 import {Colors} from '../../style';
+import {ComponentStatics} from 'src/typings/common';
 
-export type ImageProps = RNImageProps &
+export type ImageSourceType = string | RNImageProps['source'];
+
+export type ImageProps = Omit<RNImageProps, 'source'> &
   MarginModifiers &
   RecorderProps & {
     /**
      * custom source transform handler for manipulating the image source (great for size control)
      */
-    sourceTransformer?: (props: any) => ImagePropTypes.source;
+    sourceTransformer?: (props: any) => ImageSourceType;
     /**
      * if provided image source will be driven from asset name
      */
@@ -76,7 +77,7 @@ export type ImageProps = RNImageProps &
     /**
      * Default image source in case of an error
      */
-    errorSource?: ImagePropTypes.source;
+    errorSource?: ImageSourceType;
     /**
      * An imageId that can be used in sourceTransformer logic
      */
@@ -95,13 +96,14 @@ export type ImageProps = RNImageProps &
      * The image height
      */
     height?: string | number;
+    source: ImageSourceType;
   };
 
 type Props = ImageProps & ForwardRefInjectedProps & BaseComponentInjectedProps;
 
 type State = {
   error: boolean;
-  prevSource: ImagePropTypes.source;
+  prevSource: ImageSourceType;
 };
 
 /**
@@ -122,7 +124,7 @@ class Image extends PureComponent<Props, State> {
   public static overlayTypes = Overlay.overlayTypes;
   public static overlayIntensityType = Overlay.intensityTypes;
 
-  sourceTransformer?: (props: any) => ImagePropTypes.source;
+  sourceTransformer?: (props: any) => ImageSourceType;
 
   constructor(props: Props) {
     super(props);
@@ -160,7 +162,7 @@ class Image extends PureComponent<Props, State> {
     return !!overlayType || this.isGif() || !_.isUndefined(customOverlayContent);
   }
 
-  getVerifiedSource(source?: ImagePropTypes.source) {
+  getVerifiedSource(source?: ImageSourceType) {
     if (_.get(source, 'uri') === null || _.get(source, 'uri') === '') {
       // @ts-ignore
       return {...source, uri: undefined};
@@ -308,4 +310,6 @@ const styles = StyleSheet.create({
 
 hoistNonReactStatic(Image, RNImage);
 export {Image};
-export default asBaseComponent<ImageProps, typeof Image & typeof RNImage>(Image, {modifiersOptions: {margins: true}});
+export default asBaseComponent<ImageProps, ComponentStatics<typeof Image & typeof RNImage>>(Image, {
+  modifiersOptions: {margins: true}
+});

src/utils/__tests__/imageUtils.spec.js

@@ -0,0 +1,54 @@
+import {isSvgUri, isSvg, isBase64ImageContent, getAsset} from '../imageUtils';
+
+const svgImage = {uri: 'https://example.com/image.svg'};
+const randomPngImage = {uri: 'https://picsum.photos/300'};
+const svgString =
+  '<?xml version="1.0" encoding="UTF-8"?><svg data-bbox="4 2.122 17.878 17.878" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" data-type="color"><g><path fill="#116DFF" d="M15.232 2.854a2.5 2.5 0 0 1 3.536 0l2.378 2.378a2.5 2.5 0 0 1 0 3.536L10.5 19.414A2 2 0 0 1 9.086 20H5a1 1 0 0 1-1-1v-4.086a2 2 0 0 1 .586-1.414L15.232 2.854ZM6 18h3.086l7.255-7.255-3.086-3.086L6 14.914V18Zm8.67-11.755 3.085 3.086 1.977-1.977a.5.5 0 0 0 0-.708l-2.378-2.378a.5.5 0 0 0-.708 0L14.67 6.245Z" clip-rule="evenodd" fill-rule="evenodd" data-color="1"/></g></svg>';
+const base64Image =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=';
+
+describe('ImageUtils', () => {
+  describe('isSvgUri', () => {
+    it('should return true if the uri is svg', () => {
+      const result = isSvgUri(svgImage);
+      expect(result).toBe(true);
+    });
+    it('should return false if the uri is not svg', () => {
+      const result = isSvgUri(randomPngImage);
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('isSvg', () => {
+    it('should return true if the string is svg', () => {
+      const result = isSvg(svgString);
+      expect(result).toBe(true);
+    });
+    it('should return false if the string is not svg', () => {
+      const result = isSvg('<svg data-bbox="4.../>');
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('isBase64ImageContent', () => {
+    it('should return true if the string is base64', () => {
+      const result = isBase64ImageContent(base64Image);
+      expect(result).toBe(true);
+    });
+    it('should return false if the string is not base64', () => {
+      const result = isBase64ImageContent(svgString);
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('getAsset', () => {
+    it('should return the asset if asset group and asset name exsist', () => {
+      const result = getAsset('search', 'icons');
+      expect(result).toBeDefined();
+    });
+    it('should return the asset if asset group and asset name exsist', () => {
+      const result = getAsset('blah', 'icons');
+      expect(result).toBeUndefined();
+    });
+  });
+});

src/utils/imageUtils.ts

@@ -1,15 +1,14 @@
 import get from 'lodash/get';
-import {ImageProps} from 'react-native';
 import Assets from '../assets';
-import {Constants} from '../commons/new';
+import type {ImageSourceType} from '../components/image';
 
-export function isSvgUri(source?: ImageProps['source']) {
+export function isSvgUri(source?: ImageSourceType) {
   // @ts-expect-error
   return typeof source === 'object' && source?.uri?.endsWith?.('.svg');
 }
 
-export function isSvg(source?: ImageProps['source']) {
-  return typeof source === 'function' || isSvgUri(source) || (Constants.isWeb && isSvgData(source));
+export function isSvg(source?: ImageSourceType) {
+  return typeof source === 'function' || isSvgUri(source) || isSvgData(source);
 }
 
 export function isBase64ImageContent(data: string) {
@@ -22,7 +21,9 @@ export function getAsset(assetName = '', assetGroup = '') {
   return get(Assets, `${assetGroup}.${assetName}`);
 }
 
-function isSvgData(source?: ImageProps['source']) {
-  const sourceString = (source as string);
-  return typeof source === 'string' && (sourceString.includes('</svg>') || sourceString.includes('data:image/svg'));
+function isSvgData(source?: ImageSourceType) {
+  if (typeof source === 'string') {
+    const sourceString = source;
+    return sourceString.includes('</svg>') || sourceString.includes('data:image/svg');
+  }
 }