diff --git a/holi-bricks/components/image/Image.tsx b/holi-bricks/components/image/Image.tsx index 1e912184d2a1df7b9f8176b726521b54ce9925ac..4165ca905010f3b4132470ba33ece69ead6b93a0 100644 --- a/holi-bricks/components/image/Image.tsx +++ b/holi-bricks/components/image/Image.tsx @@ -5,7 +5,7 @@ import { Image as ExpoImage } from 'expo-image' //import { WithLocalSvg } from 'react-native-svg/css' import { accessibilityProps } from 'holi-bricks/accessibility' import type { ImageProps } from 'holi-bricks/components/image/type' -import { setScalingParams } from 'holi-bricks/components/image/helpers' +import { isRemoteSource, setScalingParams } from 'holi-bricks/components/image/helpers' const isLocalSvg = (source: number) => { try { @@ -18,10 +18,6 @@ const isLocalSvg = (source: number) => { } } -export const isRemoteSource = (source: string | number): source is string => { - return typeof source === 'string' -} - export const Image: React.FC<ImageProps> = ({ source, width, diff --git a/holi-bricks/components/image/Image.web.tsx b/holi-bricks/components/image/Image.web.tsx index fc0b18b1e814ddedc4d05f7c9d2f0cff7baf4714..09ab4f5d44479f8c86c273a8204cfc0d7c130e78 100644 --- a/holi-bricks/components/image/Image.web.tsx +++ b/holi-bricks/components/image/Image.web.tsx @@ -3,11 +3,7 @@ import type React from 'react' import { useState } from 'react' import NextImage from 'next/image' import { accessibilityProps } from 'holi-bricks/accessibility' -import { setScalingParams } from 'holi-bricks/components/image/helpers' - -export const isRemoteSource = (source: string): source is string => { - return /^(https?:)?\/\//i.test(source) -} +import { isRemoteSource, setScalingParams } from 'holi-bricks/components/image/helpers' export const Image: React.FC<ImageProps> = ({ source, diff --git a/holi-bricks/components/image/helpers.ts b/holi-bricks/components/image/helpers.ts index e8b7d7228e64e0d601c4f6afe0e678e5db68323e..94258225bd5cf54d88e6c9169178d577dd923e77 100644 --- a/holi-bricks/components/image/helpers.ts +++ b/holi-bricks/components/image/helpers.ts @@ -2,12 +2,19 @@ import { PixelRatio, Platform } from 'react-native' import { isProduction } from '@holi/core/helpers/environment' import { isSSR } from '@holi/core/helpers/isSSR' -import { isRemoteSource } from 'holi-bricks/components/image/Image' // meant for dev: you see the dimension that would be loaded as a black image // useful when determining whether the correct srcSet is loaded const debugMode = false +export const isRemoteSource = (source: string | number): source is string => { + if (Platform.OS === 'web') { + return /^(https?:)?\/\//i.test(source as string) + } + + return typeof source === 'string' +} + /** @description It handles the correct pixel density for native host platforms. * It returns the same input value for the web. Different sizes in the web can * also be regulated by the `srcSet` attribute. */