> ## Documentation Index
> Fetch the complete documentation index at: https://nativecn.mintlify.app/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<Tabs>
  <Tab title="Preview">
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      <div style={{ marginRight: '40px' }}>
        <img src="https://raw.githubusercontent.com/Mobilecn-UI/nativecn-ui/main/assets/examples/components/avatar-light.png" width="150px" />

        <p>Light Mode</p>
      </div>

      <div>
        <img src="https://raw.githubusercontent.com/Mobilecn-UI/nativecn-ui/main/assets/examples/components/avatar-dark.png" width="150px" />

        <p>Dark Mode</p>
      </div>
    </div>
  </Tab>

  <Tab title="Code">
    ```jsx theme={null}
    <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>
    ```
  </Tab>
</Tabs>

## Installation

<Tabs>
  <Tab title="CLI">
    ```bash theme={null}
    npx nativecn-ui add Avatar 
    ```
  </Tab>

  <Tab title="Manual">
    <Steps>
      <Step title="First Step">
        Include [Avatar.tsx](https://github.com/Mobilecn-UI/nativecn-ui/blob/main/components/Avatar.tsx) in your project.
      </Step>

      <Step title="Second Step">
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Usage

### Basic usage

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

### Custom fallback style

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