![](https://private-user-images.githubusercontent.com/4656448/248775967-53d8eec3-6685-4b6b-9d85-261e7f391b11.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQzMDM2OTAsIm5iZiI6MTcyNDMwMzM5MCwicGF0aCI6Ii80NjU2NDQ4LzI0ODc3NTk2Ny01M2Q4ZWVjMy02Njg1LTRiNmItOWQ4NS0yNjFlN2YzOTFiMTEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgyMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MjJUMDUwOTUwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MDUyYThlNjIyNzA2NGIxZTU5NWIxZTRiODY0YzhiY2I0NDg2NDA5MDI2ZmY3OWMyMTkyOWZkMTlkZGQ5ZjY2ZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.7Y5gIG82VOJ9TJQFnt7_2FmleKe-kOnJHX6j3wBWW5s)
Control the shape of the avatars
The default circular shape can be changed by specifying a custom border radius. The style
prop enables you to override the default styles.
![](https://private-user-images.githubusercontent.com/4656448/248776103-d7a4a923-fb79-4734-8092-7531835876ce.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQzMDM2OTAsIm5iZiI6MTcyNDMwMzM5MCwicGF0aCI6Ii80NjU2NDQ4LzI0ODc3NjEwMy1kN2E0YTkyMy1mYjc5LTQ3MzQtODA5Mi03NTMxODM1ODc2Y2UucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgyMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MjJUMDUwOTUwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ODk3YWVhZDNiNGMwNzZlYWM2YzY2YzI2OGQ3OWY4NjM1NjhlZjhmNzExNTQ0Y2JmYWE1MzMyZGNkNTA3OTEwYiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.3daMF_4_V13L1G61UC9cUWi3V1-6ERw9Q4fMva4SIfo)
Custom fallback image or emoji
For users without an image, you have the option to display the default avatar icon, provide a custom fallback image, or even show an emoji.
![](https://private-user-images.githubusercontent.com/4656448/248776232-de5dfe87-37ba-49ad-ba73-1e7828c06468.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQzMDM2OTAsIm5iZiI6MTcyNDMwMzM5MCwicGF0aCI6Ii80NjU2NDQ4LzI0ODc3NjIzMi1kZTVkZmU4Ny0zN2JhLTQ5YWQtYmE3My0xZTc4MjhjMDY0NjgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgyMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MjJUMDUwOTUwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YmIwNzViODYyY2Y2OGEwM2Q1MDk0NjBiYzUyYTNhYmM3M2E2NzJlZDI5NzBkM2FmZmQzZDI3OWYwYTRjOGQwMiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.pWK-YuQaUsQ3gm5lTG539cttr_ai9Fwcuzu99eumgpU)
Fallback to user's initials
Another option for users without an image is to display their initials. By enabling the colorize
option, unique color can be generated based on the user's name.
![](https://private-user-images.githubusercontent.com/4656448/248776704-06e2e2e6-10f7-420e-a381-3f2fd154b82a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQzMDM2OTAsIm5iZiI6MTcyNDMwMzM5MCwicGF0aCI6Ii80NjU2NDQ4LzI0ODc3NjcwNC0wNmUyZTJlNi0xMGY3LTQyMGUtYTM4MS0zZjJmZDE1NGI4MmEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgyMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MjJUMDUwOTUwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YzcxYmIzMDgwNGIzNTdmMjVjZDhiMTZmMGU5ZmFiMDRmOGNjM2IxNjNmZTJkNmZkYzljNjQ1ZTg1YzEzNTVkMyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.4IiHZETou87vIsQ4gs6dTGEYaKUB3X-oM2qwEMvsHCU)
Gravatar support
Include the user's email address to display their Gravatar image. This can be combined with your own avatar image to provide a fallback option.
![](https://private-user-images.githubusercontent.com/4656448/248776998-91f3bab9-f1cd-4d4d-9965-967ca524f484.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQzMDM2OTAsIm5iZiI6MTcyNDMwMzM5MCwicGF0aCI6Ii80NjU2NDQ4LzI0ODc3Njk5OC05MWYzYmFiOS1mMWNkLTRkNGQtOTk2NS05NjdjYTUyNGY0ODQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgyMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MjJUMDUwOTUwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NGJhZTMzNTFkY2ZmOWI3M2JhZDRmZTBkMzNkMzZmZWM4ZDM2M2U1NmE5YTFiMTg3ZmU1MTZiZGNiNTM3YzBmYiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.P3YmanUYYQEpbRZXctsRQOlsrlFh9juea80ME7A_TDg)
Numeric badges
You can add a badge to display the count of unread messages or the online/offline status of the user. The position of the badge can also be customized.
![](https://private-user-images.githubusercontent.com/4656448/248777249-9b7a07b9-b988-492c-b9d0-e74e3e3208ed.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQzMDM2OTAsIm5iZiI6MTcyNDMwMzM5MCwicGF0aCI6Ii80NjU2NDQ4LzI0ODc3NzI0OS05YjdhMDdiOS1iOTg4LTQ5MmMtYjlkMC1lNzRlM2UzMjA4ZWQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgyMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MjJUMDUwOTUwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MWE0ZGNkMjAxNmQxM2MwZWVmZjg5MDAyNjZlNWEwNDQ5NzRkYTljMDQ5YTBiZDNhZDllNDc0NDFhOWZlYTNjOSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.Xf1NxozF6waKJuK9IIiHyrZQ92AiU5-FQrxR-L5ofzA)
Custom badges
Another option for utilizing avatar badges is to display a custom status icon, such as an emoji, for example.
yarn add @kolking/react-native-avatar
npm install @kolking/react-native-avatar
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Avatar } from '@kolking/react-native-avatar';
const MyComponent = ({ userImage, userEmail }) => (
<View style={styles.wrapper}>
<Avatar source={{ uri: userImage }} email={userEmail} />
</View>
);
const styles = StyleSheet.create({
wrapper: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
export default MyComponent;
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Avatar } from '@kolking/react-native-avatar';
const defaultImage = require('./assets/defaultAvatar.png');
const badgeProps = {
size: 24,
radius: 5,
position: 'top-left',
}
const MyComponent = ({ userImage, userEmail, userName, unreadCount }) => (
<View style={styles.wrapper}>
<Avatar
size={60}
defaultSource={defaultImage}
source={{ uri: userImage }}
email={userEmail}
name={userName}
colorize={true}
radius={20}
badge={unreadCount}
badgeColor="#007aff"
badgeProps={badgeProps}
/>
</View>
);
const styles = StyleSheet.create({
wrapper: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
export default MyComponent;
Prop | Type | Default | Description |
---|---|---|---|
size |
number | 50 |
Width and height of the avatar |
name |
string | User name for showing initials | |
email |
string | User email for showing Gravatar image | |
source |
ImageSourcePropType | The avatar image source (either a remote URL or a local file resource) | |
defaultSource |
ImageSourcePropType | The fallback image source | |
color |
string | #aeaeb2 |
Background color of the avatar |
radius |
number | size / 2 |
Border radius of the avatar |
colorize |
boolean | false |
To generate a unique background color when displaying initials |
style |
ViewStyle | Style object applied to the image or initials container | |
textStyle |
TextStyle | Style object applied to the initials text | |
badge |
number | string | boolean | A number or string value to show in the badge, or true to display a color dot |
|
badgeColor |
string | Background color of the badge | |
badgeProps |
BadgeProps | Badge props excluding value , color , and parentRadius |
![](https://private-user-images.githubusercontent.com/4656448/248780433-6ee48b43-d2ac-40bb-ab21-152a93637e4a.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQzMDM2OTAsIm5iZiI6MTcyNDMwMzM5MCwicGF0aCI6Ii80NjU2NDQ4LzI0ODc4MDQzMy02ZWU0OGI0My1kMmFjLTQwYmItYWIyMS0xNTJhOTM2MzdlNGEuZ2lmP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgyMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MjJUMDUwOTUwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OWIwOTFjYzhkYjRhOTBkNjA1YjNmOGExMWJkZGJmNWM2MWUzNTY2N2E3ZTVkMWYxMDY3NjhiZTczYWI1MmI3NiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.ITFDLnk1mDufV9fRl-wBT7qBDXH7H4VTBW67a7k3Kv0)
The badge can be used as a standalone component. The font size of the badge text value is calculated based on the size
prop, so you normally don't have to specify it. By default, the badge appears with a spring animation, which can be disabled using the animate
prop. To position the badge absolutely over its parent, use the position
prop along with the parentRadius
prop.
import React, { useState } from 'react';
import { StyleSheet, Text, TouchableHighlight, View } from 'react-native';
import { Badge } from '@kolking/react-native-avatar';
const MyComponent = () => {
const [badge, setBadge] = useState(0);
return (
<View style={styles.wrapper}>
<TouchableHighlight
style={styles.button}
underlayColor="#00849C"
onPress={() => setBadge(badge + 1)}
>
<>
<Text style={styles.buttonText}>Press me</Text>
<Badge value={badge} position="top-right" parentRadius={styles.button.borderRadius} />
</>
</TouchableHighlight>
</View>
);
};
const styles = StyleSheet.create({
wrapper: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
button: {
width: 200,
height: 44,
marginTop: 20,
borderRadius: 22,
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#2FAFC7',
},
buttonText: {
color: '#fff',
fontSize: 17,
fontWeight: '600',
},
});
export default MyComponent;
Prop | Type | Default | Description |
---|---|---|---|
size |
number | 20 |
Height and min width of the badge |
color |
string | #ff3b30 |
Background color of the badge |
radius |
number | size / 2 |
Border radius of the badge |
animate |
boolean | true |
To animate appearance with a spring animation |
value |
number | boolean | string | A number or string value to show in the badge, or true to display a color dot |
|
limit |
number | 99 |
To display "99+" when the value exceeds the limit, set 0 to disable |
parentRadius |
number | 0 |
Border radius of the parent container, used to position the badge more precisely |
position |
BadgePositions | To position the badge absolutely over its parent, the allowed options are top-left , top-right , bottom-left , and bottom-right |
|
style |
ViewStyle | Style object applied to the container | |
textStyle |
TextStyle | Style object applied to the text |
I appreciate your feedback, so please star the repository if you like it. This is the best motivation for me to maintain the package and add new features. If you have any feature requests, found a bug, or have ideas for improvement, feel free to open an issue.
Licensed under the MIT license.