Components
Avatar
<Avatar {...args}>
<AvatarImage source={{ uri: PORTRAIT }} />
<AvatarFallback>
<Text>ST</Text>
</AvatarFallback>
</Avatar>Import
import { Avatar } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
alt | — | "User avatar" | Accessible label. Required — an avatar with no alt text is an unlabelled image to a screen reader. |
className | — | — | Size lives here (h-10 w-10), not in a prop. AvatarImage and AvatarFallback fill whatever the root is sized to. |
Examples
Fallback
AvatarFallback is what renders while the image loads and after it fails.
Pointing the image at a dead URL is the only way to see it reliably.
<Avatar {...args}>
<AvatarImage source={{ uri: 'https://example.invalid/missing.png' }} />
<AvatarFallback>
<Text>ST</Text>
</AvatarFallback>
</Avatar>Sizes
Size comes from the utility classes, not a prop.
<View className="flex-row items-end gap-4">
{['h-8 w-8', 'h-10 w-10', 'h-14 w-14', 'h-20 w-20'].map(size => (
<Avatar key={size} {...args} className={size}>
<AvatarImage source={{ uri: PORTRAIT }} />
<AvatarFallback>
<Text>ST</Text>
</AvatarFallback>
</Avatar>
))}
</View>