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.

Dependencies

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

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
-

Installation guide

Learn how to install and configure the required dependencies to integrate the components into your React Native project. Follow this step-by-step guide to get started.

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