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

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.

    Previous

    Tabs

    Next

    Card