Avatar

Display aspect-fixed images with a fallback while loading

Cam
Nate Wienert

Features

  • Accepts size prop that stays in sync with other components.

  • Completely control styles on every element.

  • Automatically swaps fallback for image on load.

Usage

import { Avatar } from 'tamagui'
export default () => (
<Avatar circular size="$6">
<Avatar.Image src="http://placekitten.com/200/300" />
<Avatar.Fallback bc="red" />
</Avatar>
)

API

<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

  • delayMs

    number

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

  • <Avatar.Image />

    Avatar.Fallback extends Image.