Maybe fix assets 2 (#2856)

* fix image svg

* check for svg closing tag instead of checking only for string type

* lint

* Fix TS errors

* check for svg data as well

* ts

* support both svg and image

* lint

* lint

* split web and mobile

* overlay

* dynamic aspect-ratio

* image fit

* remove old web implementation

* remove default alt image

* revert lint

* remove default alt

* handle missing asset - alt

* remove lint autofix

* remove unsued

* maybe fix assets

* trying to fix build fails

* fix lint

* try fix ci

* remove comment

* try again

* maybe without the specifc change in web

* remove unused

* source fix

* added default size same as Icon

* replace default size with aspectRatio

* default aspect ratio only for web

* aspectRatio by defaut and strech

* fix build

* trying to fix ci

* maybe fix ci

* Remove strech

* lint

* lint 2

* check svg only for web

* PR review

* lint

---------

Co-authored-by: Ethan Sharabi <[email protected]>

Author: mendyEdri

src/components/image/index.tsx

@@ -207,6 +207,7 @@ class Image extends PureComponent<Props, State> {
   renderImage = (useImageInsideContainer: boolean) => {
     const {error} = this.state;
     const source = error ? this.getVerifiedSource(this.props.errorSource) : this.getImageSource();
+
     const {
       tintColor,
       style,

src/utils/imageUtils.ts

@@ -1,14 +1,15 @@
 import get from 'lodash/get';
 import {ImageProps} from 'react-native';
 import Assets from '../assets';
+import {Constants} from '../commons/new';
 
 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);
+  return typeof source === 'function' || isSvgUri(source) || (Constants.isWeb && isSvgData(source));
 }
 
 export function isBase64ImageContent(data: string) {
@@ -21,3 +22,7 @@ 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'));
+}