Avatar
Component to represent user, and displays the profile picture, initials or fallback icon.
Import
import { Avatar, AvatarGroup } from "react-native-ficus-ui";
Usage
Avatar with photo
EDITABLE EXAMPLE
Generated color
EDITABLE EXAMPLE
Color scheme
EDITABLE EXAMPLE
Avatar group
EDITABLE EXAMPLE
Avatar badge
EDITABLE EXAMPLE
Avatar badge and group
EDITABLE EXAMPLE
Props
Extends every Box
and Text
props.
colorScheme
The colorScheme property, will define background color and text color.
Type | Required | Default |
---|---|---|
string | No | `gray` |
name
The name property representing the name of the person in the avatar. If src has loaded, the name will be used as the alt attribute of the img, else, the name will be used to create the initials.
Type | Required | Default |
---|---|---|
string | Yes |
size
The size property, defining the size of the avatar.
Type | Required | Default |
---|---|---|
number | No |
src
The src property. The source of the avatar image.
Type | Required | Default |
---|---|---|
string | No |
AvatarGroup props
size
The size property, defining the size of Avatar children.
Type | Required | Default |
---|---|---|
string | No |
max
The max property, defining the max number of Avatar children that should be displayed. If there are more to display, an item indicating the number of other avatars will be displayed.
Type | Required | Default |
---|---|---|
number | No |