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

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