Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/peterpme/react-native-face-pile
🙉👮🙎🤠Face Piles (A group of overlapping round avatars) for React Native
https://github.com/peterpme/react-native-face-pile
facepile faces react-native
Last synced: about 2 months ago
JSON representation
🙉👮🙎🤠Face Piles (A group of overlapping round avatars) for React Native
- Host: GitHub
- URL: https://github.com/peterpme/react-native-face-pile
- Owner: peterpme
- Created: 2017-08-01T14:33:43.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-03-04T15:57:27.000Z (almost 3 years ago)
- Last Synced: 2024-11-09T19:22:33.442Z (2 months ago)
- Topics: facepile, faces, react-native
- Language: JavaScript
- Homepage:
- Size: 194 KB
- Stars: 105
- Watchers: 4
- Forks: 15
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Native Face Pile
A group of overlapping round avatars are called face piles. [Try it on Snack](https://snack.expo.io/@peterpme/react-native-face-pile-example)
[](https://badge.fury.io/js/react-native-face-pile)
## Installation
```
yarn add react-native-face-pile
// or
npm install --save react-native-face-pile
```
## Usage
```es6
import FacePile from 'react-native-face-pile'
const FACES = [
{
id: 0,
imageUrl: 'https://s3.amazonaws.com/uifaces/faces/twitter/vista/128.jpg',
},
{
id: 1,
imageUrl: 'http://www.yojackets.com/wp-content/uploads/2016/04/Civil-War-Scarlet-Witch-Red-Coat-1.jpg',
},
{
id: 2,
imageUrl: 'https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg',
},
{
id: 3,
imageUrl: 'https://s3.amazonaws.com/uifaces/faces/twitter/k/128.jpg',
},
{
id: 4,
imageUrl: 'https://pbs.twimg.com/profile_images/885357926373654528/4tGgnF71_bigger.jpg',
}
];
```
- Pass in your array of faces, then the number you want to render.
- Any faces exceeding `numFaces`, or faces without images, will show up under the overflow (a circle with, for example, `+3` after the faces)
- If you want to hide the overflow, pass in `hideOverflow` (boolean)
- If you don't want FacePile to figure out what to render, you can pass in your own `render` method:
`render=({ numFaces, faces }) => { do whatever you want here }`
## Prop types
```es6
render: PropTypes.func, // optional render method, otherwise we take control
numFaces: PropTypes.number, // number of faces you want to render. The rest is subtracted
hideOverflow: PropTypes.bool, // whether or not to show the +2 extra faces
overlap: PropTypes.number, // optional amount of overlap of faces (between 0 and 1), defaults to 0.5
faces: PropTypes.shape({
id: PropTypes.string,
imageUrl: PropTypes.string
}),
circleSize: PropTypes.number, // 20, 40, 60, etc.
containerStyle: PropTypes.instanceOf(StyleSheet), // overall container style
circleStyle: PropTypes.instanceOf(StyleSheet), // override default circle styles
imageStyle: PropTypes.instanceOf(StyleSheet), // override default image styles
overflowStyle: PropTypes.instanceOf(StyleSheet), // override default overflow circle styles
overflowLabelStyle: PropTypes.instanceOf(StyleSheet) // override default overflow label (+8) styles
```
## Contributors
- @peterpme
- @dhruska
- @angelk90