Avatar
A circular image used to represent a user profile or identity.
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Text } from "@/components/ui/text";
import { View } from "react-native";
export default function AvatarDemo() {
return (
<View className="flex-1 flex-row gap-8 justify-center items-center bg-background">
<Avatar alt="Appykit UI">
<AvatarImage src='https://github.com/likithanagaraj.png' />
<AvatarFallback>
<Text>AP</Text>
</AvatarFallback>
</Avatar>
<Avatar alt="Appykit UI">
<AvatarFallback>
<Text className="">AP</Text>
</AvatarFallback>
</Avatar>
</View>
);
}Installation
npx appykit@latest add avatarInstall the following dependencies:
npx expo install @rn-primitives/avatar react-native-reanimated react-native-svgCreate a folder named ui under component folder in your project and add the following code in a file named avatar.tsx:
import * as AvatarPrimitive from '@rn-primitives/avatar';
import * as React from 'react';
import { cn } from '@/lib/utils';
function Avatar({
className,
...props
}: AvatarPrimitive.RootProps & {
ref?: React.RefObject<AvatarPrimitive.RootRef>;
}) {
return (
<AvatarPrimitive.Root
className={cn('relative flex size-10 shrink-0 overflow-hidden rounded-full ', className)}
{...props}
/>
);
}
function AvatarImage({
className,
src,
...props
}: AvatarPrimitive.ImageProps & {
ref?: React.RefObject<AvatarPrimitive.ImageRef>;
}) {
return (
<AvatarPrimitive.Image
className={cn("aspect-square h-full w-full", className)}
{...props}
source={{
uri: src,
}}
/>
);
}
function AvatarFallback({
className,
...props
}: AvatarPrimitive.FallbackProps & {
ref?: React.RefObject<AvatarPrimitive.FallbackRef>;
}) {
return (
<AvatarPrimitive.Fallback
className={cn(
'flex h-full w-full items-center justify-center rounded-full bg-muted',
className
)}
{...props}
/>
);
}
export { Avatar, AvatarFallback, AvatarImage };This component depends on the Text component.
Please follow the installation guide here before using the Avatar.
Update the import paths to match your project setup.
Usage
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";<Avatar alt="Appykit UI">
<AvatarImage src='https://github.com/likithanagaraj.png' />
<AvatarFallback>
<Text>AP</Text>
</AvatarFallback>
</Avatar>