import { ImageProps as RNImageProps } from 'react-native' ; import { createComponent , createElement , createHook } from 'bumbag/utils' ; import { Box , BoxProps } from '../Box' ; import * as styles from './Image.styles' ; export type LocalImageProps = { /** How the image fits its bounds */ fit ? : RNImageProps [ 'resizeMode' ] ; } ; export type ImageProps = BoxProps & RNImageProps & LocalImageProps ; const useProps = createHook < ImageProps > ( ( props ) => { const boxProps = Box . useProps ( props ) ; return { ... boxProps } ; } , { themeKey : 'native.Image' } ) ; export const Image = createComponent < ImageProps > ( ( props ) => { const imageProps = useProps ( props ) ; return createElement ( { children : props . children , component : styles . StyledImage , htmlProps : { ... imageProps , resizeMode : props . fit || props . resizeMode , } , } ) ; } , { attach : { useProps , displayName : 'native.Image' , } , themeKey : 'native.Image' , } ) ;