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:

   npm install react-native-avataar
   yarn add react-native-avataar

2. Install react-native-svg :

   npm install react-native-svg
   yarn add react-native-svg

3. For ios:

   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:"",
    }
})


<Avataar
    width={'180px'}
    height={'180px'}
    circle={true}
    clothesValue={avataar.clothesValue}
    faceValues={{
         mountValue: avataar.faceValues.mouth,
         eyesValue: avataar.faceValues.eyes,
         eyeBrowValue: avataar.faceValues.eyeBrow,
    }}
    skinValue={avataar.skinValue}
    topValues={{
         topValue: avataar.topValues.top,
         accessoriesValue: avataar.topValues.accessories,
         facialHairValue: avataar.topValues.facialHairValue,
         facialHairColorValue: avataar.topValues.facialHairColorValue,
         hairColorValue: avataar.topValues.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 |