> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mobile-starter.amisi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Avatar

> Show a profile image, initials, or fallback character

export const LocalUiPlayground = ({component, title, height = 640}) => {
  const [playgroundUrl, setPlaygroundUrl] = useState(null);
  useEffect(() => {
    const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
    setPlaygroundUrl(isLocal ? 'http://localhost:8090/' : 'https://selcouthdigital.github.io/amisi-mobile-starter/');
  }, []);
  if (!playgroundUrl) {
    return null;
  }
  return <div className="not-prose my-6 overflow-hidden rounded-xl border border-zinc-950/10 bg-white dark:border-white/10 dark:bg-zinc-950">
      <iframe src={`${playgroundUrl}?component=${component}`} title={title} className="block w-full" style={{
    height
  }} loading="lazy" />
    </div>;
};

`Avatar` displays an image when `source` is set. Otherwise, it derives up to two initials from `name`.

<LocalUiPlayground component="avatar" title="Interactive Avatar example" />

## Usage

```tsx theme={null}
import { Avatar, View } from '@amisi-mobile-starter/ui';

export const People = () => (
  <View className="flex-row gap-3">
    <Avatar name="Ada Lovelace" />
    <Avatar name="Grace Hopper" size="lg" />
    <Avatar source={{ uri: 'https://i.pravatar.cc/112' }} size="lg" />
  </View>
);
```

## Props

| Prop     | Type                   | Default     | Description                                           |
| -------- | ---------------------- | ----------- | ----------------------------------------------------- |
| `name`   | `string`               | `undefined` | Name used to derive initials. Empty names render `?`. |
| `source` | `ImageSourcePropType`  | `undefined` | Native image source; takes precedence over `name`.    |
| `size`   | `'sm' \| 'md' \| 'lg'` | `'md'`      | Avatar and initials size.                             |

`Avatar` also accepts React Native `ViewProps`.