GitHub
wwwwwwwwwwwwwwwwwww

Avatar

Display aspect-fixed images with a fallback while loading

import React from 'react'

import { Avatar, XStack } from 'tamagui'



export function AvatarDemo() {

  return (

    <XStack alignItems="center" gap="$6">

      <Avatar circular size="$10">

        <Avatar.Image
          accessibilityLabel="Cam"
          src="https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80"
        />

        <Avatar.Fallback backgroundColor="$blue10" />

      </Avatar>



      <Avatar circular size="$8">

        <Avatar.Image
          accessibilityLabel="Nate Wienert"
          src="https://images.unsplash.com/photo-1531384441138-2736e62e0919?&w=100&h=100&dpr=2&q=80"
        />

        <Avatar.Fallback delayMs={600} backgroundColor="$blue10" />

      </Avatar>

    </XStack>

  )

}

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:

yarn add @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:

Props

  • delayMs

    number

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

    • Avatar.Image

    Avatar.Image extends Image.

    Previous

    Tabs

    Next

    Card

    Edit this page on GitHub.