title: Avatar

Avatar

Circular user image with a fallback initial.

Usage

import { Image, View, Text } from "react-native";

<View className="h-10 w-10 rounded-full bg-muted items-center justify-center overflow-hidden">
  {user.avatar ? (
    <Image source={{ uri: user.avatar }} className="h-10 w-10" />
  ) : (
    <Text className="text-foreground font-bold">{user.name[0]}</Text>
  )}
</View>

Sizes

With status dot

<View className="relative">
  <View className="h-10 w-10 rounded-full bg-muted" />
  <View className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-success border-2 border-background" />
</View>