{"id":16667259,"url":"https://github.com/peterpme/react-native-face-pile","last_synced_at":"2025-05-07T11:47:40.301Z","repository":{"id":23441725,"uuid":"99010761","full_name":"peterpme/react-native-face-pile","owner":"peterpme","description":"🙉👮🙎🤠 Face Piles (A group of overlapping round avatars) for React Native","archived":false,"fork":false,"pushed_at":"2022-03-04T15:57:27.000Z","size":199,"stargazers_count":105,"open_issues_count":2,"forks_count":15,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-22T17:58:35.377Z","etag":null,"topics":["facepile","faces","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/peterpme.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-01T14:33:43.000Z","updated_at":"2024-07-17T01:54:48.000Z","dependencies_parsed_at":"2022-08-07T11:00:31.069Z","dependency_job_id":null,"html_url":"https://github.com/peterpme/react-native-face-pile","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterpme%2Freact-native-face-pile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterpme%2Freact-native-face-pile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterpme%2Freact-native-face-pile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterpme%2Freact-native-face-pile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peterpme","download_url":"https://codeload.github.com/peterpme/react-native-face-pile/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252873938,"owners_count":21817708,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["facepile","faces","react-native"],"created_at":"2024-10-12T11:13:39.693Z","updated_at":"2025-05-07T11:47:40.272Z","avatar_url":"https://github.com/peterpme.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Face Pile\n\nA group of overlapping round avatars are called face piles. [Try it on Snack](https://snack.expo.io/@peterpme/react-native-face-pile-example)\n\n[![npm version](https://badge.fury.io/js/react-native-face-pile.svg)](https://badge.fury.io/js/react-native-face-pile)\n\n![Facepile Image](/screenshots/facepile.png)\n\n## Installation\n\n```\nyarn add react-native-face-pile\n\n// or\n\nnpm install --save react-native-face-pile\n```\n\n## Usage\n\n```es6\nimport FacePile from 'react-native-face-pile'\n\nconst FACES = [\n  {\n    id: 0,\n    imageUrl: 'https://s3.amazonaws.com/uifaces/faces/twitter/vista/128.jpg',\n  },\n  {\n    id: 1,\n    imageUrl: 'http://www.yojackets.com/wp-content/uploads/2016/04/Civil-War-Scarlet-Witch-Red-Coat-1.jpg',\n  },\n  {\n    id: 2,\n    imageUrl: 'https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg',\n  },\n  {\n    id: 3,\n    imageUrl: 'https://s3.amazonaws.com/uifaces/faces/twitter/k/128.jpg',\n  },\n  {\n    id: 4,\n    imageUrl: 'https://pbs.twimg.com/profile_images/885357926373654528/4tGgnF71_bigger.jpg',\n  }\n];\n\n\u003cFacePile numFaces={3} faces={FACES} /\u003e\n```\n- Pass in your array of faces, then the number you want to render.\n- Any faces exceeding `numFaces`, or faces without images, will show up under the overflow (a circle with, for example, `+3` after the faces)\n- If you want to hide the overflow, pass in `hideOverflow` (boolean)\n- If you don't want FacePile to figure out what to render, you can pass in your own `render` method:\n  `render=({ numFaces, faces }) =\u003e { do whatever you want here }`\n\n## Prop types\n\n```es6\nrender: PropTypes.func, // optional render method, otherwise we take control\nnumFaces: PropTypes.number, // number of faces you want to render. The rest is subtracted\nhideOverflow: PropTypes.bool, // whether or not to show the +2 extra faces\noverlap: PropTypes.number, // optional amount of overlap of faces (between 0 and 1), defaults to 0.5\nfaces: PropTypes.shape({\n  id: PropTypes.string,\n  imageUrl: PropTypes.string\n}),\ncircleSize: PropTypes.number, // 20, 40, 60, etc.\ncontainerStyle: PropTypes.instanceOf(StyleSheet), // overall container style\ncircleStyle: PropTypes.instanceOf(StyleSheet), // override default circle styles\nimageStyle: PropTypes.instanceOf(StyleSheet), // override default image styles\noverflowStyle: PropTypes.instanceOf(StyleSheet), // override default overflow circle styles\noverflowLabelStyle: PropTypes.instanceOf(StyleSheet) // override default overflow label (+8) styles\n```\n\n## Contributors\n- @peterpme\n- @dhruska\n- @angelk90\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterpme%2Freact-native-face-pile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeterpme%2Freact-native-face-pile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterpme%2Freact-native-face-pile/lists"}