react-native-avatar-group v1.0.5

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

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.