Image

import { Image } from 'tamagui'

export function ImageDemo() {
  return (
    <Image
      source={{
        uri: 'https://picsum.photos/200/300',
        width: 200,
        height: 300,
      }}
    />
  )
}

Installation

Image is already installed in tamagui, or you can install it independently:

yarn
npm
bun
pnpm
yarn add @tamagui/image

Usage

Note that you need to set source like so - the width and height properties apply as styles around the image, but the actual image needs source.width and source.height for React Native:

export default () => (
  <Image
    source={{ width: 200, height: 200, uri: 'https://...' }}
    width="100%"
    height="100%"
  />
)

API Reference

Tamagui props + React Native Web Image props .