add image component

packages/components/src/image/image.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import { Stack } from '@tamagui/core'
+
+import { Image } from './image'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Image> = {
+  component: Image,
+  argTypes: {},
+}
+
+type Story = StoryObj<typeof Image>
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Default: Story = {
+  args: {
+    src: 'https://images.unsplash.com/photo-1673253082952-4ba1b404e5ee?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80',
+    width: 500,
+    height: 500,
+  },
+  render: args => (
+    <Stack space spaceDirection="vertical">
+      <Image {...args} width={500} height={500} />
+      <Image {...args} width={500} height={350} />
+      <Image {...args} width={500} height={200} />
+    </Stack>
+  ),
+}
+
+export default meta

packages/components/src/image/image.tsx

@@ -0,0 +1,50 @@
+import React, { forwardRef } from 'react'
+
+import { isWeb, setupReactNative, styled } from '@tamagui/core'
+import { Image as RNImage } from 'react-native'
+
+import type { GetProps } from '@tamagui/core'
+import type { Ref } from 'react'
+
+// TODO: this was used in @tamagui/image package. Why?
+// import { focusableInputHOC } from '@tamagui/focusable'
+
+setupReactNative({
+  Image: RNImage,
+})
+
+const Base = styled(RNImage, {
+  name: 'Image',
+  position: 'relative',
+  source: { uri: '' },
+  zIndex: 1,
+})
+
+type InputProps = GetProps<typeof Image>
+
+interface Props {
+  src: string
+  width: number
+  height: number
+  // onLoad?: InputProps['onLoad']
+  // onError?: InputProps['onError']
+}
+
+const Image = (props: Props, ref: Ref<HTMLImageElement>) => {
+  const { src } = props
+
+  const source =
+    typeof src === 'string'
+      ? {
+          uri: src,
+          ...(isWeb && { width: props.width, height: props.height }),
+        }
+      : src
+
+  return <Base source={source} ref={ref} />
+}
+
+// focusableInputHOC(Image)
+const _Image = Base.extractable(forwardRef(Image))
+
+export { _Image as Image }

packages/components/src/image/index.tsx

@@ -0,0 +1 @@
+export * from './image'