React Native Avatar Group

React Native AvatarGroup is a simple and customizable component that displays a group of circular avatars or images with an optional overflow count indicator.

Installation

npm install react-native-avatar-group --save

or

yarn add react-native-avatar-group

Usage

import AvatarGroup from "react-native-avatar-group";

const faces = [
  { id: 1, imageUrl: "https://example.com/avatar1.jpg" },
  { id: 2, imageUrl: "https://example.com/avatar2.jpg" },
  { id: 3, imageUrl: "https://example.com/avatar3.jpg" },
  { id: 4, imageUrl: "https://example.com/avatar4.jpg" },
  { id: 5, imageUrl: "https://example.com/avatar5.jpg" },
];

<AvatarGroup
  faces={faces}
  circleSize={40}
  numFaces={4}
  offset={1.2}
  borderColor="white"
/>;

Props

Prop	Type	Default	Description
faces	array	[]	An array of objects containing the id and imageUrl of the face
circleSize	number	20	The size of the circular avatars
numFaces	number	4	The maximum number of avatars to display before showing overflow
offset	number	1	The offset between each avatar
borderColor	string	white	The border color of the circular avatars
hideOverflow	bool	false	Whether to hide the overflow count indicator
containerStyle	any	null	Additional styles for the container view
circleStyle	any	null	Additional styles for the circular avatar
imageStyle	any	null	Additional styles for the avatar image
overflowStyle	any	null	Additional styles for the overflow count indicator circle
overflowLabelStyle	any	null	Additional styles for the overflow count label

Example

import React from "react";
import { View } from "react-native";
import AvatarGroup from "react-native-avatar-group";

const faces = [
  { id: 1, imageUrl: "https://example.com/avatar1.jpg" },
  { id: 2, imageUrl: "https://example.com/avatar2.jpg" },
  { id: 3, imageUrl: "https://example.com/avatar3.jpg" },
  { id: 4, imageUrl: "https://example.com/avatar4.jpg" },
  { id: 5, imageUrl: "https://example.com/avatar5.jpg" },
];

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <AvatarGroup
        faces={faces}
        circleSize={50}
        numFaces={3}
        offset={1.5}
        borderColor="black"
        overflowStyle={{ backgroundColor: "green" }}
        overflowLabelStyle={{ color: "white" }}
      />
    </View>
  );
};

export default App;

This example will render an Avatar Group component with a maximum of 3 avatars displayed, with a circle size of 50, an offset of 1.5 between each avatar, black border color, green background color for the overflow count indicator, and white text color for the overflow count label.

Contributing

Contributions are welcome! Please follow the contributing guidelines when submitting a pull request.

License

This project is licensed under the MIT License.