React Native Avatar

The ultimate React Native component for displaying user avatars written in TypeScript with a strong focus on performance. This fully featured and highly customizable component allows you to show Gravatar images by providing an email address, fallback to user's initials, fine-tune the shape and size of avatars, add badges and custom statuses to the avatar image.

---

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.

---

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.

---

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.

---

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.

---

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.

---

Custom badges
Another option for utilizing avatar badges is to display a custom status icon, such as an emoji, for example.

---

Installation

yarn

1yarn add @kolking/react-native-avatar

npm

1npm install @kolking/react-native-avatar

Basic Example

1import React from 'react';
2import { View, StyleSheet } from 'react-native';
3import { Avatar } from '@kolking/react-native-avatar';
4
5const MyComponent = ({ userImage, userEmail }) => (
6  <View style={styles.wrapper}>
7    <Avatar source={{ uri: userImage }} email={userEmail} />
8  </View>
9);
10
11const styles = StyleSheet.create({
12  wrapper: {
13    flex: 1,
14    alignItems: 'center',
15    justifyContent: 'center',
16  },
17});
18
19export default MyComponent;

Advanced Example

1import React from 'react';
2import { View, StyleSheet } from 'react-native';
3import { Avatar } from '@kolking/react-native-avatar';
4
5const defaultImage = require('./assets/defaultAvatar.png');
6const badgeProps = {
7  size: 24,
8  radius: 5,
9  position: 'top-left',
10}
11
12const MyComponent = ({ userImage, userEmail, userName, unreadCount }) => (
13  <View style={styles.wrapper}>
14    <Avatar
15      size={60}
16      defaultSource={defaultImage}
17      source={{ uri: userImage }}
18      email={userEmail}
19      name={userName}
20      colorize={true}
21      radius={20}
22      badge={unreadCount}
23      badgeColor="#007aff"
24      badgeProps={badgeProps}
25    />
26  </View>
27);
28
29const styles = StyleSheet.create({
30  wrapper: {
31    flex: 1,
32    alignItems: 'center',
33    justifyContent: 'center',
34  },
35});
36
37export default MyComponent;

Props

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

Badge Component

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.

1import React, { useState } from 'react';
2import { StyleSheet, Text, TouchableHighlight, View } from 'react-native';
3import { Badge } from '@kolking/react-native-avatar';
4
5const MyComponent = () => {
6  const [badge, setBadge] = useState(0);
7
8  return (
9    <View style={styles.wrapper}>
10      <TouchableHighlight
11        style={styles.button}
12        underlayColor="#00849C"
13        onPress={() => setBadge(badge + 1)}
14      >
15        <>
16          <Text style={styles.buttonText}>Press me</Text>
17          <Badge value={badge} position="top-right" parentRadius={styles.button.borderRadius} />
18        </>
19      </TouchableHighlight>
20    </View>
21  );
22};
23
24const styles = StyleSheet.create({
25  wrapper: {
26    flex: 1,
27    alignItems: 'center',
28    justifyContent: 'center',
29  },
30  button: {
31    width: 200,
32    height: 44,
33    marginTop: 20,
34    borderRadius: 22,
35    alignSelf: 'center',
36    alignItems: 'center',
37    justifyContent: 'center',
38    backgroundColor: '#2FAFC7',
39  },
40  buttonText: {
41    color: '#fff',
42    fontSize: 17,
43    fontWeight: '600',
44  },
45});
46
47export default MyComponent;

Badge Props

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

Feedback

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.

Also, please check out my other React Native components that might be a good fit for your project:

• React Native Rating - An interactive rating component.
• React Native Page Indicator - Show the current page of a swiper, slideshow, carousel, etc.
• React Native Parallax Swiper - Build a horizontal scroll swiper with a parallax effect.
• React Native Crossfade Image - Update image source with crossfade transition effect.

License

Licensed under the MIT license.