Avatar

<Highlights features={[ 'Accepts size prop that stays in sync with other components.', 'Completely control styles on every element.', 'Automatically swaps fallback for image on load.', ]} />

Installation

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

npm install @tamagui/avatar

Usage

import { Avatar } from 'tamagui'

export default () => (
  <Avatar circular size="$6">
    <Avatar.Image src="http://picsum.photos/200/300" />
    <Avatar.Fallback bc="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:

<PropsTable data={[ { name: 'delayMs', required: false, type: 'number', description: Milliseconds to wait before showing the fallback, to prevent flicker., }, ]} />

Avatar.Image

Avatar.Image extends Image.