Avatar

The Avatar component can display profile pictures, text, icon to represent a user.

import { Avatar } from 'cherag-ui'

Usage

Avatar.Image

   <Avatar.Image
      size={60}
      dotSize={20}
      dotColor={COLORS.green}
      source={{
        uri: "https://avatars.githubusercontent.com/u/1342004?s=64&v=4",
      }}
    />

Avatar.Icon

   <Avatar.Icon
      style={{ paddingTop: 10 }}
      iconColor={COLORS.red}
      bgColor={COLORS.lightGray}
      iconSize={35}
      icon="heart"
    />

Avatar.Text

   <Avatar.Text
      style={{ paddingTop: 20 }}
      bgColor={COLORS.border}
      textColor={COLORS.white}
      size={60}
      label="XD"
    />

󰋑

Props

Avatar propertics

Name

Type

Description

dotSize

number

For providing props to resize active dot inside Avatar Image.

dotColor

string

For providing props to chage active dot color inside Avatar Image.

size

number

Size of Avatar.

style

StyleProp<ViewStyle>

Cherag-ui has default style, could change custom style.

imageStyle

StyleProp<ViewStyle>

For providing props to styling Image component inside Avatar.