GitHub

Image

Lightweight web-compatible image with Tamagui style props

This lightweight Image component renders on web and native with Tamagui style props and no react-native-web dependency.

Features

  • Web and native support

  • Server rendering support

  • No react-native-web dependency

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. Not every web img prop (like decoding) is supported on native.

Some common props

Props

  • src

    string | number

    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.

    • Next

    Introduction

    Edit this page on GitHub.