use imageUtils in Image and Icon (#1803)

Author: lidord-wix

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface SvgImageProps {
+    data: any;
+}
+declare function SvgImage(props: SvgImageProps): JSX.Element | null;
+declare namespace SvgImage {
+    var displayName: string;
+    var isSvg: typeof import("../../utils/imageUtils").isSvg;
+}
+export default SvgImage;

generatedTypes/src/utils/imageUtils.d.ts

@@ -0,0 +1,4 @@
+import { ImageProps } from 'react-native';
+export declare function isSvgUri(source: ImageProps['source']): any;
+export declare function isSvg(source: ImageProps['source']): any;
+export declare function getAsset(assetName?: string, assetGroup?: string): any;

src/components/icon/index.tsx

@@ -1,9 +1,9 @@
 import isUndefined from 'lodash/isUndefined';
-import get from 'lodash/get';
 import React, {useMemo} from 'react';
 import {Image, ImageProps, StyleSheet} from 'react-native';
 import {asBaseComponent, BaseComponentInjectedProps, MarginModifiers, Constants} from '../../commons/new';
-import Assets from '../../assets';
+import {getAsset, isSvg} from '../../utils/imageUtils';
+import SvgImage from '../svgImage';
 
 export type IconProps = ImageProps &
   MarginModifiers & {
@@ -45,12 +45,14 @@ const Icon = (props: Props) => {
 
   const iconSource = useMemo(() => {
     if (!isUndefined(assetName)) {
-      return get(Assets, `${assetGroup}.${assetName}`);
+      return getAsset(assetName, assetGroup);
     }
     return source;
   }, [source, assetGroup, assetName]);
 
-  return (
+  return isSvg(source) ? (
+    <SvgImage data={source} {...props}/>
+  ) : (
     <Image
       {...others}
       source={iconSource}

src/components/image/index.tsx

@@ -11,10 +11,9 @@ import {
   ImageErrorEventData
 } from 'react-native';
 import {Constants, asBaseComponent, ForwardRefInjectedProps, BaseComponentInjectedProps, MarginModifiers} from '../../commons/new';
-// @ts-ignore
-import Assets from '../../assets';
+import {getAsset, isSvg} from '../../utils/imageUtils';
 import Overlay, {OverlayTypeType, OverlayIntensityType} from '../overlay';
-import SvgImage from './SvgImage';
+import SvgImage from '../svgImage';
 import View from '../view';
 import {Colors} from '../../style';
 
@@ -146,7 +145,7 @@ class Image extends PureComponent<Props, State> {
     const {assetName, assetGroup, source} = this.props;
 
     if (!_.isUndefined(assetName)) {
-      return _.get(Assets, `${assetGroup}.${assetName}`);
+      return getAsset(assetName, assetGroup);
     }
     if (this.sourceTransformer) {
       return this.sourceTransformer(this.props);
@@ -253,7 +252,7 @@ class Image extends PureComponent<Props, State> {
 
   render() {
     const {source} = this.props;
-    if (SvgImage.isSvg(source)) {
+    if (isSvg(source)) {
       return this.renderSvg();
     } else {
       return this.renderRegularImage();

src/components/image/SvgImage.tsx renamed to src/components/svgImage/index.tsx

@@ -1,19 +1,10 @@
 import React from 'react';
-import {ImageProps} from 'react-native';
+import {isSvg, isSvgUri} from '../../utils/imageUtils';
 import {SvgPackage} from '../../optionalDependencies';
 const SvgXml = SvgPackage?.SvgXml;
 const SvgCssUri = SvgPackage?.SvgCssUri;
 // const SvgProps = SvgPackage?.SvgProps; TODO: not sure how (or if) we can use their props
 
-function isSvgUri(source: ImageProps['source']) {
-  // @ts-expect-error
-  return typeof source === 'object' && source?.uri?.endsWith('.svg');
-}
-
-export function isSvg(source: ImageProps['source']) {
-  return typeof source === 'string' || typeof source === 'function' || isSvgUri(source);
-}
-
 export interface SvgImageProps {
   data: any; // TODO: I thought this should be string | React.ReactNode but it doesn't work properly
 }

src/utils/imageUtils.ts

@@ -0,0 +1,16 @@
+import get from 'lodash/get';
+import {ImageProps} from 'react-native';
+import Assets from '../assets';
+
+export function isSvgUri(source: ImageProps['source']) {
+  // @ts-expect-error
+  return typeof source === 'object' && source?.uri?.endsWith('.svg');
+}
+
+export function isSvg(source: ImageProps['source']) {
+  return typeof source === 'string' || typeof source === 'function' || isSvgUri(source);
+}
+
+export function getAsset(assetName = '', assetGroup = '') {
+  return get(Assets, `${assetGroup}.${assetName}`);
+}