diff --git a/packages/components/src/image/image.tsx b/packages/components/src/image/image.tsx index 30280d3..b7df4bf 100644 --- a/packages/components/src/image/image.tsx +++ b/packages/components/src/image/image.tsx @@ -5,6 +5,7 @@ import { Image as RNImage } from 'react-native' import type { GetProps } from '@tamagui/core' import type { Ref } from 'react' +import type { ImagePropsBase as RNImageProps } from 'react-native' // TODO: this was used in @tamagui/image package. Why? // import { focusableInputHOC } from '@tamagui/focusable' @@ -20,23 +21,30 @@ const Base = styled(RNImage, { source: { uri: '', }, + + variants: { + radius: { + 12: { + borderRadius: 12, + }, + }, + }, }) -type InputProps = GetProps - -// type W = InputProps['width'] +type ImageProps = GetProps interface Props { src: string width: number | 'full' height?: number - aspectRatio?: number - // onLoad?: InputProps['onLoad'] - // onError?: InputProps['onError'] + aspectRatio?: ImageProps['aspectRatio'] + radius?: ImageProps['radius'] + onLoad?: RNImageProps['onLoad'] + onError?: RNImageProps['onError'] } const Image = (props: Props, ref: Ref) => { - const { src, aspectRatio, ...rest } = props + const { src, aspectRatio, radius, ...rest } = props const width = props.width === 'full' ? '100%' : props.width const height = aspectRatio ? undefined : props.height @@ -53,9 +61,8 @@ const Image = (props: Props, ref: Ref) => { source={source} width={width} height={height} - style={{ - aspectRatio, - }} + radius={radius} + aspectRatio={aspectRatio} /> ) } diff --git a/packages/components/src/messages/chat-message.tsx b/packages/components/src/messages/chat-message.tsx index 6a63b7f..ab5cf4d 100644 --- a/packages/components/src/messages/chat-message.tsx +++ b/packages/components/src/messages/chat-message.tsx @@ -36,7 +36,11 @@ const ChatMessage = (props: Props) => { > {hovered && ( - {}} /> + { + console.log('clicked') + }} + /> )} @@ -63,14 +67,12 @@ const ChatMessage = (props: Props) => { {images?.map(image => ( - + ))}