Introduction
Components
- Accordion
- Action Sheet
- Alert
- Audio Player
- Audio Recorder
- Audio Waveform
- Avatar
- AvoidKeyboard
- Badge
- BottomSheet
- Button
- Camera
- Camera Preview
- Card
- Carousel
- Checkbox
- Collapsible
- Color Picker
- Combobox
- Date Picker
- File Picker
- Gallery
- Hello Wave
- Icon
- Image
- Input
- Input OTP
- Link
- MediaPicker
- Mode Toggle
- Onboarding
- ParallaxScrollView
- Picker
- Popover
- Progress
- Radio
- ScrollView
- SearchBar
- Separator
- Share
- Sheet
- Skeleton
- Spinner
- Switch
- Table
- Tabs
- Text
- Toast
- Toggle
- Video
- View
Charts
Installation
pnpm dlx bna-ui add avatar
Usage
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';<Avatar>
<AvatarImage
source={{ uri: 'https://avatars.githubusercontent.com/u/99088394?v=4' }}
/>
<AvatarFallback>AB</AvatarFallback>
</Avatar>Examples
Default
Sizes
Fallback Only
Custom Styling
Group
With Status
Bordered
API Reference
Avatar
The container component that wraps the avatar image and fallback.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The avatar image and fallback components. |
size | number | 40 | The size of the avatar in pixels. |
style | ViewStyle | - | Additional styles to apply to the avatar container. |
AvatarImage
The image component that displays the user's avatar.
| Prop | Type | Default | Description |
|---|---|---|---|
source | ImageSource | - | The image source for the avatar. |
style | ImageProps.style | - | Additional styles to apply to the image. |
AvatarFallback
The fallback component that displays when the image fails to load or is not provided.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The fallback content (usually initials or text). |
style | ViewStyle | - | Additional styles to apply to the fallback container. |
textStyle | TextStyle | - | Additional styles to apply to the fallback text. |
Accessibility
The Avatar component is built with accessibility in mind:
- Uses semantic structure for screen readers
- Fallback text provides alternative content when images fail to load
- Proper contrast ratios for text fallbacks
- Supports dynamic text sizing