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

Component dependencies

@/craftrn-ui/components/Text

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
uri?
string
-
fallbackInitials?
string
-
fallbackColor?
AvatarColor
AvatarColor[0]
showOnlineIndicator?
boolean
false
size?
"small" | "medium" | "large"
'medium'

Installation

Install and configure dependencies for your own React Native project. Those steps are required to get started with the component collection.

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