Image

Web compatible and super light image component with Tamagui style props

Features

  • Web compatible.

  • Supports SSR.

  • Works on native and web.

  • No react-native-web dependency.

  • Super light.

Installation

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

yarn add @tamagui/image

Usage

export default () => <Image src="https://..." width={300} height={400} />

API Reference

Image

Tamagui props + Web img props  + React Native Image props .

All web img  props are supported on web, and all native Image  props are supported on native. On native we are still using web img APIs, but not all web img props are supported, like decoding.

Some common props

Props

  • src (required)

    string

    The image URL.

  • alt

    string

    Mandatory and incredibly useful for accessibility.

  • objectFit

    CSS.ObjectFit

    Sets how the content of the image is resized to fit its container. An alternative to the `resizeMode` prop.

  • unstyled

    boolean

    When true, removes all default styles.

  • onLoad

    function

    Callback when the image is loaded.

  • onError

    function

    Callback when the image fails to load.