GitHub

Avatar

Display images at a fixed size with a fallback while loading

Avatar displays an image at a consistent size and swaps in a fallback while that image loads.

Features

  • Size matching across components

  • Full styling control for every element

  • Automatic fallback replacement on image load

Installation

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

yarn add @tamagui/avatar

Usage

import { Avatar } from 'tamagui'



export default () => (

  <Avatar circular size="lg">

    <Avatar.Image src="http://picsum.photos/200/300" />

    <Avatar.Fallback bg="red" />

  </Avatar>

)

API reference

Avatar

Avatar extends Square, giving it all the Tamagui standard props as well as size and circular.

Avatar.Fallback

Avatar.Fallback extends YStack, plus:

Props

  • delay

    number

    Milliseconds to wait before showing the fallback, to prevent flicker.

    • Avatar.Image

    Avatar.Image extends Image.

    Previous

    Toast

    Next

    Card

    Edit this page on GitHub.