# react-native-avataar > This package provides a quick and straightforward solution for delivering personalized avatars to your users. Latest version **0.0.2** (published 2023-09-11) · MIT license · 0 weekly downloads ## Install ```sh npm install react-native-avataar pnpm add react-native-avataar yarn add react-native-avataar bun add react-native-avataar ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.2 | | Published | 2023-09-11 | | First published | 2023-09-11 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 386.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Author | Ahmet Bilğay | | Maintainers | ahmetbilgay | | Keywords | avataar, react, native | ## Links - npm: https://www.npmjs.com/package/react-native-avataar - Repository: https://github.com/ahmetbilgay/react-native-avataar - Homepage: https://github.com/ahmetbilgay/react-native-avataar#readme - Issues: https://github.com/ahmetbilgay/react-native-avataar/issues - npm.io page: https://npm.io/package/react-native-avataar ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.0.2 (latest) — 2023-09-11 - 0.0.1 — 2023-09-11 - 1.0.0 — 2023-09-11 ## README # react-native-avataar This package provides a quick and straightforward solution for delivering personalized avatars to your users. ## Features - **Easy Customization:** Offers a range of customization options such as colors, styles, and accessories for personalizing avatars. - **SVG Support:** Creates high-quality and scalable avatars using the SVG format. - **User-Friendly:** Provides a simple and user-friendly API for quickly generating avatars. - **React Native Compatible:** Includes a React Native component that can be easily integrated into your projects. ## Install and Setup 1. First, add the npm package to your project: ```bash npm install react-native-avataar yarn add react-native-avataar ``` 2. Install react-native-svg : ```bash npm install react-native-svg yarn add react-native-svg ``` 3. For ios: ```bash cd ios && pod install ``` ## How to use ``` import Avataar from 'react-native-avataar'; ``` ``` const [avataar,setAvataar] = useState({ skinValue:"", clothesValue:"", faceValues:{ mouth:"", eyes:"", eyeBrow:"", }, topValues:{ top:"", accessories:"", facialHairValue:"", facialHairColorValue:"", hairColorValue:"", } }) ``` | Prop | Type | Description | |----------------------------------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `width` | string | The width for avatar | | `height` | string | The height for avatar | | `circle` | boolean | Convert avatar to circle format. | | `clothesValue` | string | "blazerShirt", "blazerSweater", "collarSweater", "graphicShirt", "hoddie", "overall", "shirtCrewNeck", "shirtScoopNeck","shirtVNeck" | | `faceValues.mountValue` | string | 'concerned', 'default', 'disbelief', 'eating', 'grimace', 'sad','screamOpen', 'serious', 'smile', 'tongue', 'twinkle', 'vomit' | | `faceValue.eyesValue` | string | 'close', 'cry', 'default', 'dizzy', 'eyeroll', 'happy','hearts', 'side', 'squint', 'surprised', 'wink', 'winkWacky' | | `faceValues.eyeBrowValue` | string | 'angry', 'angryNatural', 'default', 'defaultNatural', 'flatNatural','raisedExcited', 'raisedExcitedNatural', 'sadConcerned', 'sadConcernedNatural','uniBrowNatural', 'upDown', 'upDownNatural' | | `skinValue` | string | #000000 | | `topValues.topValue` | string | 'eyepatch', 'hat', 'hijab', 'longHairBigHair', 'longHairBob', 'longHairBun','longHairCurly', 'longHairCurvy', 'longHairDreads', 'longHairFrida', 'longHairFro','longHairFroBand', 'longHairMiaWallace', 'longHairNotTooLong', 'longHairShavedSides','longHairStraight', 'longHairStraight2', 'longHairStraightStrand', 'noHair','shortHairDreads01', 'shortHairDreads02', 'ShortHairFrizzle', 'shortHairShaggyMullet','shortHairShortCurly', 'shortHairShortFlat', 'shortHairShortRound', 'shortHairShortWaved','shortHairSides', 'shortHairTheCaesar', 'shortHairTheCaesarSidePart', 'turban','winterHat1', 'winterHat2', 'winterHat3', 'winterHat4', 'shortHairShaggy' | | `topValues.accessoriesValue` | string | 'blank', 'kurt', 'prescription01', 'prescription02', 'round', 'sunglasses', 'wayfarers' | | `topValues.facialHairValue` | string | 'beardLight', 'BeardMajestic', 'BeardMedium', 'Blank', 'MoustacheFancy', 'MoustacheMagnum' | | `topValues.facialHairColorValue` | string | #000000 | | `topValues.hairColorValue` | string | #000000 | --- _Source: https://npm.io/package/react-native-avataar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._