Skip to main content

Avatar

Component to show an image, initials or icon with different shapes.

Usage

function AvatarUsage() {
return (
<View>
<Avatar mode="circle" url="https://picsum.photos/200/300?random=1" />
</View>
)
}

Status

AB
AB
AB
AB
AB
AB
function AvatarStatuses() {
return (
<View row style={{justifyContent: 'space-evenly'}}>
<Avatar status="primary" initials="AB" />
<Avatar status="accent" initials="AB" />
<Avatar status="success" initials="AB" />
<Avatar status="info" initials="AB" />
<Avatar status="warning" initials="AB" />
<Avatar status="error" initials="AB" />
</View>
)
}

Size

A
A
A
function AvatarSizes() {
return (
<View row style={{justifyContent: 'space-evenly'}}>
<Avatar size="small" initials="A" />
<Avatar size="medium" initials="A" />
<Avatar size="large" initials="A" />
</View>
)
}

Modes

function AvatarModes() {
return (
<View row style={{justifyContent: 'space-evenly'}}>
<Avatar mode="circle" url="https://picsum.photos/200/300?random=1" />
<Avatar mode="round" url="https://picsum.photos/200/300?random=1" />
<Avatar mode="square" url="https://picsum.photos/200/300?random=1" />
</View>
)
}

Modes and Sizes

AB
AB
AB
AB
AB
AB
AB
AB
AB

Fallback Icon

function AvatarFallbackIcon() {
return (
<View>
<Avatar
url="https://www.example.com/images/123.jpg"
// eslint-disable-next-line react/no-unstable-nested-components
fallbackIcon={(size) => <Icon name="add" size={size} />}
/>
</View>
)
}

Fallback Source

function AvatarFallbackSource() {
return (
<View>
<Avatar
url="https://www.example.com/images/123.jpg"
fallbackSource={{uri: 'https://picsum.photos/200/300?random=1'}}
/>
</View>
)
}

Custom

function AvatarCustom() {
return (
<View>
<Avatar
url="https://picsum.photos/200/300?random=1"
defaultSource={{uri: 'https://picsum.photos/200/300?random=1'}}
style={{alignSelf: 'center', borderWidth: 2, borderColor: 'yellow'}}
/>
</View>
)
}

Props

PropData TypeDefault ValueDescription
ExtendsPartial<ImageProps>--Inherits properties from Partial<ImageProps>
sizenumber | BlossomSize--Size of the AvatarIt can be either number or string ('small' | 'medium' | 'large')
mode"circle" | "round" | "square"--Control the shape of the Avatar
urlstring--Shorthand for the Source.uri of the image propsHere You can directly pass the url of the image If not provided, it will fallback to showing initials or an icon.
initialsstring--Show initials inside the AvatarIf not provided, it will fallback to showing an icon.
initialStyleStyleProp<TextStyle>--Initials Text style to control the font size etc.
icon(size: number) => ReactNode--Set a custom icon for Avatar
fallbackIcon(size: number) => ReactNode--Set a custom fallback icon for Avatar
fallbackSourceImageSourcePropType--Fallback source for the Avatar
onPress() => void--On press callback