support aspect ratio in Image

This commit is contained in:
Pavel Prichodko 2023-01-17 16:02:43 +01:00
parent c39f7f36c8
commit 406c5f68fd
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
1 changed files with 29 additions and 13 deletions

View File

@ -1,4 +1,4 @@
import React, { forwardRef } from 'react' import { forwardRef } from 'react'
import { isWeb, setupReactNative, styled } from '@tamagui/core' import { isWeb, setupReactNative, styled } from '@tamagui/core'
import { Image as RNImage } from 'react-native' import { Image as RNImage } from 'react-native'
@ -16,32 +16,48 @@ setupReactNative({
const Base = styled(RNImage, { const Base = styled(RNImage, {
name: 'Image', name: 'Image',
position: 'relative', position: 'relative',
source: { uri: '' },
zIndex: 1, zIndex: 1,
source: {
uri: '',
},
}) })
type InputProps = GetProps<typeof Image> type InputProps = GetProps<typeof Image>
// type W = InputProps['width']
interface Props { interface Props {
src: string src: string
width: number width: number | 'full'
height: number height?: number
aspectRatio?: number
// onLoad?: InputProps['onLoad'] // onLoad?: InputProps['onLoad']
// onError?: InputProps['onError'] // onError?: InputProps['onError']
} }
const Image = (props: Props, ref: Ref<HTMLImageElement>) => { const Image = (props: Props, ref: Ref<HTMLImageElement>) => {
const { src } = props const { src, aspectRatio, ...rest } = props
const source = const width = props.width === 'full' ? '100%' : props.width
typeof src === 'string' const height = aspectRatio ? undefined : props.height
? {
uri: src,
...(isWeb && { width: props.width, height: props.height }),
}
: src
return <Base source={source} ref={ref} /> const source = {
uri: src,
...(isWeb && { width, height }),
}
return (
<Base
{...rest}
ref={ref}
source={source}
width={width}
height={height}
style={{
aspectRatio,
}}
/>
)
} }
// focusableInputHOC(Image) // focusableInputHOC(Image)