LogoCraftReactNative
Components

Avatar

An avatar component displaying a user's profile picture or initials. It supports different sizes and can be customized with a color. It also supports showing a green dot to indicate the user is online.

Component preview

Installation

npx @craftreactnative/ui add Avatar

Usage

Screen.tsx
import { Avatar } from '@/craftrn-ui/components/Avatar';
 
export const Screen = () => (
  <Avatar
    uri="https://xsgames.co/randomusers/assets/avatars/female/29.jpg"
    fallbackInitials="AB"
    fallbackColor={0}
    showOnlineIndicator
    size="medium"
  />
);

Props

PropTypeDefault
source?
any
-
fallbackInitials?
string
-
fallbackColor?
AvatarColor
AvatarColor[0]
showOnlineIndicator?
boolean
false
size?
"small" | "medium" | "large"
'medium'
alt?
string
-

Dependencies

1 packages
react-native-unistyles
Required imports
craftrn-ui/components/Text

Demo setup

Running the demo app locally will allow you to browse through the components and interact with them.

BottomSheet

A bottom sheet is a UI component that slides up from the bottom of the screen to display additional content. It can be closed by swiping down or tapping the overlay.

On this page