Avatar

Overview

Avatar is a React Native component designed for displaying user avatars. It can show an image avatar from a given source. If the image fails to load, a fallback text can be displayed.

Preview

Preview

Light Mode

Dark Mode

Light Mode

Dark Mode

<View className="flex justify-center items-center flex-row gap-4">
  <Avatar className="h-14 w-14">
    <AvatarImage
      source={{
        uri: 'https://pbs.twimg.com/profile_images/1745949238519803904/ZHwM5B07_400x400.jpg',
      }}
    />
    <AvatarFallback>CG</AvatarFallback>
  </Avatar>
  <Avatar className="h-14 w-14">
    <AvatarImage
      source={{
        uri: 'https://pbs.twimg.com/profile_images/1603610343905058816/PsPEWMOJ_400x400.jpg',
      }}
    />
    <AvatarFallback>SS</AvatarFallback>
  </Avatar>
</View>

Installation

CLI

npx nativecn-ui add Avatar

npx nativecn-ui add Avatar

1. First Step

   Include Avatar.tsx in your project.

2. Second Step

   Update the import paths to match your project setup.

Usage

Basic usage

<Avatar>
  <AvatarImage
    source={{
      uri: 'https://pbs.twimg.com/profile_images/1745949238519803904/ZHwM5B07_400x400.jpg',
    }}
  />
  <AvatarFallback>CG</AvatarFallback>
</Avatar>

Custom fallback style

<Avatar>
  <AvatarImage
    source={{
      uri: 'https://pbs.twimg.com/profile_images/1603610343905058816/PsPEWMOJ_400x400.jpgx',
    }}
  />
  <AvatarFallback textClassname="text-amber-400">SS</AvatarFallback>
</Avatar>