Avatar
Use the Avatar component to display user/profile picture or initials.
Props
source
Use this to set the image source.
| Type | Default | Description |
|---|---|---|
ImageSourcePropType | / | Regular React Native Image source. |
Example
children (fallback)
Use this to set the fallback text, icon (for example default avatar) or any other element when you don't have an image.
| Type | Default | Description |
|---|---|---|
ReactNode | / | Fallback text, icon (for example default avatar) or any other element when you don't have an image. |
Example
overlay
A placeholder for any element. This layer is placed on top of the image. You can use this to display some text, icon, button etc.
| Type | Default | Description |
|---|---|---|
ReactNode | / | This layer is placed on top of the image. |
Example
badge
A placeholder for any element. You can use this to display a status, icon, button etc.
| Type | Default | Description |
|---|---|---|
ReactNode | / | This layer is placed on top of the image and overlay. You must set the width and height of your badge element, because badge wrapper is set to 0 width and height in order to be able to position it on the right place, without any additional calculations. |
Example
badgePosition
Use this to set the position of a badge.
| Type | Default | Description |
|---|---|---|
| 'br' | It's very likely that you will not need all of these positions, so feel free to remove the one that you don't need (and all the code related to it). |
Example
badgeInset
Use this to set the offset of a badge.
| Type | Default | Description |
|---|---|---|
| 0 | By default, the badge is positioned at the edge of the avatar. You can use this to place the badge in the middle of the border (if you set the border width), or in any other case where you want to move the badge away from the edge of the avatar. |
Example
rounded
Use this to set the border radius of the avatar.
| Type | Default | Description |
|---|---|---|
| 'full' | The position of the badge will follow the edges of the avatar, regardless of whether you set it to be rounded or not. |
Example
size
Use this to set the size of the avatar.
| Type | Default | Description |
|---|---|---|
| 'md' | It applies mapped value to width and height properties. |
Example
bg
A background of an element when you don't have an image.
| Type | Default | Description |
|---|---|---|
| #a8bac1 | Background color of the avatar when there is no source value. It's a regular React Native View backgroundColor . |
Example
border
Use this to set the border width.
| Type | Default | Description |
|---|---|---|
| 0 | It applies a value to borderWidth property. |
Example
borderColor
Use this to set the border color.
| Type | Default | Description |
|---|---|---|
| #ffffff | It's a regular React Native View borderColor . |
Example
Preview
previewBg
Use this to set the background color of the preview container. It's useful when you want to see how the component looks on different backgrounds, especially when combined with borders.
Editor
Source code
import React from 'react';
import {View, Image} from 'react-native';
const UIAvatar = ({
source,
children,
overlay,
badge,
badgePosition = 'br',
badgeInset = 0,
rounded = 'full',
size = 'md',
bg = '#a8bac1',
border = 0,
borderColor = '#ffffff',
}) => {
const sizeMappedValue = {
'xs': 24,
'sm': 32,
'md': 48,
'lg': 64,
'xl': 96,
'2xl': 128,
}[size];
const fullRadius = sizeMappedValue / 2;
const roundedMappedValue = {
'none': 0,
'xs': 2,
'sm': 4,
'md': 6,
'lg': 8,
'xl': 12,
'2xl': 16,
'full': fullRadius,
}[rounded];
// Determine the bounded radius, ensuring it does not exceed the full radius
const boundedRadius = Math.min(roundedMappedValue, fullRadius);
// Calculate the side length of the outer square surrounding the circle formed by the radius
const radiusOuterSquareSide = boundedRadius * 2;
// Calculate the hypotenuse of the outer square
const hypotenuse = Math.sqrt(Math.pow(radiusOuterSquareSide, 2) + Math.pow(radiusOuterSquareSide, 2));
// Calculate the distance between the corner of the outer square and the inner circle
const distanceBetweenCornerAndInnerCircle = hypotenuse / 2 - boundedRadius;
// Define the side length of the smaller square between the outer square and the inner circle, serving as the reference for positioning the badge (top/bottom and left/right)
const referenceSquareSide = Math.sqrt(Math.pow(distanceBetweenCornerAndInnerCircle, 2) / 2);
// This distance is used for determining top/bottom and left/right positions of the badge
const distance = referenceSquareSide + badgeInset;
const badgePositionMappedStyles = {
'tl': {top: distance, left: distance},
't': {top: badgeInset, left: '50%'},
'tr': {top: distance, right: distance},
'r': {top: '50%', right: badgeInset},
'br': {bottom: distance, right: distance},
'b': {bottom: badgeInset, left: '50%'},
'bl': {bottom: distance, left: distance},
'l': {top: '50%', left: badgeInset},
}[badgePosition];
const styles = {
avatar: {
flexShrink: 0,
width: sizeMappedValue,
height: sizeMappedValue,
},
avatarContainer: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
borderWidth: border,
borderColor: borderColor,
borderRadius: boundedRadius,
backgroundColor: bg,
overflow: 'hidden',
},
avatarImg: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
},
avatarOverlay: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
},
avatarBadge: {
...badgePositionMappedStyles,
position: 'absolute',
width: 0,
height: 0,
alignItems: 'center',
justifyContent: 'center',
}
};
return (
<View style={styles.avatar}>
<View style={styles.avatarContainer}>
{children}
{source ? <Image source={source} style={styles.avatarImg} /> : null}
{overlay ? <View style={styles.avatarOverlay}>{overlay}</View> : null}
</View>
{badge ? <View style={styles.avatarBadge}>{badge}</View> : null}
</View>
);
};
export default UIAvatar;
Usage example
<UIAvatar
source={{uri: 'https://images.unsplash.com/photo-1620508115467-aa36a8dcf82d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=80'}}
badge={<View style={{borderWidth: 3, borderColor: '#ffffff', width: 24, height: 24, borderRadius: 12, backgroundColor: '#67ab5b'}} />}
badgeInset={2}
size="2xl"
border={3}
>
<Text style={{fontSize: 30, color: '#ffffff'}}>NN</Text>
</UIAvatar>