​
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

  1. Download the Avatar component
  2. Install expo-image
npx expo install expo-image
  1. 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 to 60.
  • height?: number - The height of the avatar. Defaults to 60.
  • 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"
/>
IntroductionButton