Components
Avatar
Overview
Avatar
is a React Native component designed for displaying user avatars. It offers the ability to
show an image avatar from a given source URL. If the image fails to load, a fallback text can be displayed.
Preview

Light Mode

Dark Mode
Installation
- Download the
Avatar
component - Install
expo-image
npx expo install expo-image
- Import the module
import { Avatar } from './components/Avatar';
Properties
src: string
- The source URL of the avatar image.width?: number
- The width of the avatar. Defaults to60
.height?: number
- The height of the avatar. Defaults to60
.fallback?: string
- The fallback text to display if the image fails to load. Defaults to''
(empty string).imageClasses?: string
- The classes for the image. Defaults to'rounded-full'
.fallbackViewClasses?: string
- The classes for the fallback container. Defaults to'border border-black p-4 rounded-full dark:border-white'
.fallbackTextClasses?: string
- The classes for the fallback text. Defaults to'text-base text-black dark:text-white'
.
Usage
Basic usage
<Avatar
src="https://pbs.twimg.com/profile_images/1256841238298292232/ycqwaMI2_400x400.jpg"
fallback="NR"
/>
Custom size
<Avatar
src="https://example.com/path/to/avatar.jpg"
width={100}
height={100}
fallback="CGM"
/>
Custom style
<Avatar
src="https://example.com/path/to/avatar.jpg"
fallback="CGM"
imageClasses="rounded-md"
/>