wwwwwwwwwwwwwwwwwww

Introduction

Installation

Releases

Core

Configuration

Tokens

Stack & Text

styled

Variants

Props

Themes

Animations

Theme

useMedia

useTheme

FontLanguage

Extras

Compiler

About

Install

Benchmarks

Theme

Colors

Tokens

Tamagui

Stacks

Headings

Text

Forms

Button

Checkbox

Form

Input & TextArea

Label

Progress

RadioGroup

Select

Slider

Switch

ToggleGroup

Panels

AlertDialog

Dialog

Popover

Sheet

Tooltip

Toast

Organize

Accordion

Group

Tabs

Content

Avatar

Card

Image

ListItem

Visual

LinearGradient

Separator

Square & Circle

Etc

Anchor

HTML Elements

ScrollView

Spinner

Unspaced

VisuallyHidden

Extras

Lucide Icons

Guides

Design Systems

Creating Custom Themes

How to Build a Button

Developing

Next.js

Expo

Vite

create-tamagui

Community

Blog

GitHub

Twitter

Discord

Avatar

Display aspect-fixed images with a fallback while loading

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://placekitten.com/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:

Props

delayMs

number

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

Avatar.Image

Avatar.Fallback extends Image.

Edit this page on GitHub.