Universal Image component

type UniversalImageProps = {
 
    // -- Universal props --
 
    /**
     * Universal, will affect both Expo & Next.js - Must be one of the following:
     * - A path string like `'/assets/logo.png'`. This can be either an absolute external URL, or an internal path depending on the loader prop.
     * - A statically imported image file, like `import logo from './logo.png'` or `require('./logo.png')`.
     * 
     * When using an external URL, you must add it to `remotePatterns` in `next.config.js`.
     * @platform web, android, ios @framework expo, next.js */
    src: string | StaticImport
 
    width?: number | `${number}` | `${number}%`
    height?: number | `${number}` | `${number}%`
 
    /** Universal, will affect both Expo & Next.js
     * - Remember that the required width and height props can interact with your styling. If you use styling to modify an image's width, you should also style its height to auto to preserve its intrinsic aspect ratio, or your image will be distorted. */
    className?: string
 
    /** Universal, will affect both Expo & Next.js
     * - Remember that the required width and height props can interact with your styling. If you use styling to modify an image's width, you should also style its height to auto to preserve its intrinsic aspect ratio, or your image will be distorted. */
    style?: StyleProp<ImageStyle> | ExpoImageProps['style']
 
    alt?: string
    priority?: "low" | "normal" | "high" | null
 
    onError?: ((event: ImageErrorEventData) => void)
    onLoadEnd?: (() => void)
 
    // -- '@next/image' specific props --
 
    /** Custom function used to resolve image URLs. A loader is a function returning a URL string for the image, given the following parameters: `src`, `width`, `quality` (`number` from 0 - 1) Alternatively, you can use the [loaderFile](https://nextjs.org/docs/pages/api-reference/components/image#loaderfile) configuration in next.config.js to configure every instance of next/image in your application, without passing a prop. */
    loader?: ImageLoader
 
    fill?: boolean
    sizes?: string
    quality?: number | `${number}`
    nextPlaceholder?: PlaceholderValue | 'blur' | 'empty' | `data:image/${string}`
    loading?: 'lazy' | 'eager'
    blurDataURL?: string
    unoptimized?: boolean
 
    // -- 'expo-image' specific props --
 
    accessibilityLabel?: string
    accessible?: boolean
    allowDownscaling?: boolean
    autoplay?: boolean
    blurRadius?: number
    cachePolicy?: 'none' | 'disk' | 'memory' | 'memory-disk'
    contentFit?: ImageContentFit | 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
    contentPosition?: ImageContentPosition | 'top' | 'bottom' | 'left' | 'right' | 'center' | 'top left' | 'top right' | ...
    enableLiveTextInteraction?: ExpoImageProps['enableLiveTextInteraction']
    focusable?: boolean
    expoPlaceholder?: ExpoImageProps['expoPlaceholder'] | string | StaticImport
    onLoadStart?: (() => void)
    onProgress?: ((event: ImageProgressEventData) => void)
    placeholderContentFit?: ImageContentFit | 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
    recyclingKey?: string | null
    responsivePolicy?: 'static' | 'initial' | 'live'
}

import { z } from 'zod'
 
const UniversalImageSchema = z.object({
    // Universal props
    src: z.union([z.string(), z.any()]), // StaticImageData type
    alt: z.string().optional(),
    width: z.union([z.number(), z.string()]).optional(),
    height: z.union([z.number(), z.string()]).optional(),
    className: z.string().optional(),
    style: z.any().optional(),
    priority: z.enum(['high', 'normal']).optional(),
    onError: z.function().optional(),
    onLoadEnd: z.function().optional(),
 
    // Next.js specific
    loader: z.function().optional(),
    fill: z.boolean().optional(),
    sizes: z.string().optional(),
    quality: z.number().min(1).max(100).optional(),
    nextPlaceholder: z.enum(['blur', 'empty']).optional(),
    loading: z.enum(['lazy', 'eager']).optional(),
    blurDataURL: z.string().optional(),
    unoptimized: z.boolean().optional(),
 
    // Expo specific
    accessibilityLabel: z.string().optional(),
    accessible: z.boolean().optional(),
    allowDownscaling: z.boolean().optional(),
    autoplay: z.boolean().optional(),
    blurRadius: z.number().optional(),
    cachePolicy: z.enum(['none', 'disk', 'memory', 'memory-disk']).optional(),
    contentFit: z.enum(['cover', 'contain', 'fill', 'none', 'scale-down']).optional(),
    contentPosition: z.string().optional(),
    enableLiveTextInteraction: z.boolean().optional(),
    focusable: z.boolean().optional(),
    expoPlaceholder: z.any().optional(),
    onLoadStart: z.function().optional(),
    onProgress: z.function().optional(),
    placeholderContentFit: z.enum(['cover', 'contain', 'fill', 'none', 'scale-down']).optional(),
    recyclingKey: z.string().optional(),
    responsivePolicy: z.enum(['static', 'initial', 'live']).optional(),
})