HOLI-11330 fix type errors

holi-bricks/components/image/Image.tsx

@@ -35,7 +35,7 @@ export const Image: React.FC<ImageProps> = ({
 }) => {
   const [hasError, setHasError] = useState(false)
   const transformedSource =
-    typeof width === 'number' && typeof height === 'number' ? setScalingParams(source, width, height) : undefined // todo
+    typeof width === 'number' && typeof height === 'number' ? setScalingParams(source, width, height) : undefined
   const isRemote = isRemoteSource(source)
   const localSvg = typeof source === 'number' && isLocalSvg(source)
   const { styles } = useStyles(stylesheet)

holi-bricks/components/image/Image.web.tsx

-import type { ImageProps } from 'holi-bricks/components/image'
-import type React from 'react'
-import { useState } from 'react'
-import NextImage from 'next/image'
 import { accessibilityProps } from 'holi-bricks/accessibility'
+import type { ImageProps } from 'holi-bricks/components/image'
 import { setScalingParams } from 'holi-bricks/components/image/helpers'
-import { createStyleSheet } from 'holi-bricks/utils'
 import { useStyles } from 'holi-bricks/hooks'
+import { createStyleSheet } from 'holi-bricks/utils'
+import NextImage from 'next/image'
+import type React from 'react'
+import { useState } from 'react'
 import { View } from 'react-native'
 
 export const isRemoteSource = (source: string): source is string => {
@@ -27,7 +27,11 @@ export const Image: React.FC<ImageProps> = ({
 }) => {
   const [hasError, setHasError] = useState(false)
   const isRemote = isRemoteSource(source as string)
-  const transformedSource = (isRemote ? setScalingParams(source as string, width, height) : source) as string
+  const transformedSource = (
+    isRemote && typeof width === 'number' && typeof height === 'number'
+      ? setScalingParams(source as string, width, height)
+      : source
+  ) as string
   const { styles } = useStyles(stylesheet)
 
   return (
@@ -38,8 +42,8 @@ export const Image: React.FC<ImageProps> = ({
         role="img"
         aria-label={alt}
         blurDataURL={isRemote ? blurhash : undefined}
-        width={width}
-        height={height}
+        width={width as number | undefined}
+        height={height as number | undefined}
         style={{ objectFit: resizeMode }}
         onError={() => {
           setHasError(true)

holi-bricks/components/image/type.ts

 import type { ImageContentFit } from 'expo-image'
 import type { AccessibilityProps } from 'holi-bricks/accessibility'
-import type { DimensionValue } from 'react-native'
 
 export type ImageSource = string | number
 
 export interface ImageProps extends AccessibilityProps {
   source: ImageSource
-  width: DimensionValue
-  height: DimensionValue
+  width: number | `${number}%`
+  height: number | `${number}%`
   resizeMode?: ImageContentFit
   onError?: () => void
   onLoadEnd?: () => void