@tamagui/image 1.0.1-beta.57 → 1.0.1-beta.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/image",
-  "version": "1.0.1-beta.57",
+  "version": "1.0.1-beta.61",
   "sideEffects": true,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -8,6 +8,7 @@
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
+    "src",
     "types",
     "dist"
   ],
@@ -18,14 +19,14 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/core": "^1.0.1-beta.57"
+    "@tamagui/core": "^1.0.1-beta.61"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.57",
+    "@tamagui/build": "^1.0.1-beta.61",
     "react": "*",
     "react-native": "*"
   },

package/src/Image.tsx

@@ -0,0 +1,43 @@
+import { GetProps, StackProps, getExpandedShorthands, styled } from '@tamagui/core'
+import React from 'react'
+import { Image as RNImage } from 'react-native'
+
+React['createElement']
+
+const StyledImage = styled(
+  RNImage,
+  {
+    name: 'Image',
+    position: 'relative',
+    source: { uri: '' },
+  },
+  {
+    inlineProps: new Set(['src', 'width', 'height']),
+  }
+)
+
+type StyledImageProps = GetProps<typeof StyledImage>
+
+type BaseProps = Omit<StyledImageProps, 'source' | 'width' | 'height' | 'style' | 'onLayout'> & {
+  width: number
+  height: number
+  src: string | StyledImageProps['source']
+}
+
+export type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>
+
+export const Image: React.FC<ImageProps> = StyledImage.extractable((inProps) => {
+  const props = getExpandedShorthands(inProps)
+  const { src, width = 100, height = 100, ...rest } = props
+  const source = typeof src === 'string' ? { uri: src, width, height } : src
+  const defaultSource = Array.isArray(source) ? source[0] : source
+
+  if (!defaultSource) {
+    // placeholder with customizability
+    return null
+  }
+
+  // must set defaultSource to allow SSR, default it to the same as src
+  // @ts-ignore we pass all react-native-web props down
+  return <StyledImage defaultSource={defaultSource} source={source} {...rest} />
+})

package/src/index.ts

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