Installation

Since the library is a JS-based solution, to install the latest version of rn-customize-avatar:

npm install --save rn-customize-avatar @shopify/react-native-skia

Alert

You have to install any one of them npm according to your need.

npm i @dicebear/avataaars

npm i @dicebear/adventurer-neutral

npm i @dicebear/bigEars

npm i @dicebear/lorelei

npm i @dicebear/micah

npm i @dicebear/croodles

npm i @dicebear/Notionists

Rest Avatar Coming Soon... ♥️

Try it out

You can try out the DiceBear website to get a tease of the functionalities in this lib.

Basic Usage

The Basic use of Avataars container. That's Simple 😬

import React from 'react';
import { View } from 'react-native';
import { Avataars } from 'rn-customize-avatar/avataaars';

function App() {
  return (
    <View style={{ flex: 1 }}>
      <Avataars backgroundColor="grey" />
    </View>
  );
}

Common Props in all Avatars

| Property | Default | Optional | Description | | --------------- | ---------------- | -------- | ------------------------------------------------------------------------------------------ | | backgroundColor | red | Yes | Use to Change the Color of Avatar Background Container | | svgWidth | 280 | Yes | svgWidth increase the width of Avatar | | svgHeight | 280 | Yes | svgHeight increase the height of Avatar | | defaultAvatar | CustomAvatar | Yes | If you want to change the look to default avatar use can use this props | | listBgColor | grey | Yes | listBgColor Change the background color of list | | cancelBtnStyle | Style | Yes | Change the style of cancel Button cancelBtnStyle time | | doneBtnStyle | Style | Yes | doneBtnStyle Change the style of done Button | | chipStyle | Style | Yes | Use to Change the container Style of slider option itemchipStyle | | chipText | TextStyle | Yes | Use this to change the style of text inside option chip container | | onDone | (base64) => {} | Yes | The onDone _prop is a callback it is used to get the final avatar in the form of base64 | | onCancel | () => {} | Yes | The onCancel is a callback use to cancel go back | | flatListProps | FlatListStyle | Yes | Apply a custom style object in Flatlist |

Avataaars

These are some props that are related to Avataaars

| Props | Usage | | ---------------------- | ----------------------------------------------- | | skinTonColorList | Add custom colors in the skinTonColorList | | hairColorList | Add custom colors in the hairColorList | | backgroundColorList | Add custom colors in the backgroundColorList | | accessoriesColorList | Add custom colors in the accessoriesColorList | | facialHairColorList | Add custom colors in the facialHairColorList | | hatColorList | Add custom colors in the hatColorList | | clothColorList | Add custom colors in the clothColorList |

Example

color should be add without # otherwise it's not visible in the list

import React from 'react';
import { View } from 'react-native';
import { Avataars } from 'rn-customize-avatar/avataars';

function App() {
  return (
    <View style={{ flex: 1 }}>
      <Avataars backgroundColor="grey" hairColorList={['433333', '000000']} />
    </View>
  );
}

Adventurer Neutral

These are some props that are related to Adventurer Neutral

| Props | Usage | | --------------------- | ---------------------------------------------- | | backgroundColorList | Add custom colors in the backgroundColorList |

Example

color should be add without # otherwise it's not visible in the list

import React from 'react';
import { View } from 'react-native';
import { AdventureNeutral } from 'rn-customize-avatar/adventureNeutral';

function App() {
  return (
    <View style={{ flex: 1 }}>
      <AdventureNeutral backgroundColor="grey" backgroundColorList={['433333', '000000']} />
    </View>
  );
}

Rest of the Avatars have a similar props used to pass the custom colors in the list (If you find any issue in it please comment)

Coming to Advance Options

If you want to make your own screen with different ui you can. 😎

Suppose you have to change the UI of Avataars Component. You can export the following functions to get the SVG's

These are some functions that are related to Avataar

| Functions | Usage | | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | | createOwnAvatar | return the SkSVG , by props you can change the style of avatar | | getListOfOptions | return the Array<string> list of category | | getSkinTon | return Array<string> list of default colors | | getMouthSvg | return Array<Item> Item is basically object includes SkSVG and value use to get the list of SVG's and value | | getEyesSvg | return Array<Item> Item is basically object includes SkSVG and value use to get the list of eyes | | getClothingSvg | return Array<Item> Item is basically object includes SkSVG and value use to get the list of clothes | | getClothingGraphicsSvg | return Array<Item> Item is basically object includes SkSVG and value use to get the list of clothing graphics | | getAccessoriesSvg | return Array<Item> Item is basically object includes SkSVG and value use to get the list of accessories | | etc. | Please check other props it's same as following pros with same return type just return different SVG's according with there name.♥️ |

These are some functions that are related to BigEars

| Functions | Usage | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | | createOwnAvatar | return the SkSVG , by props you can change the style of BigEars | | getListOfOptions | return the Array<string> list of category | | getSkinTon | return Array<string> list of default colors | | getMouthSvg | return Array<Item> Item is basically object includes SkSVG and value use to get the list of SVG's and value | | getEyesSvg | return Array<Item> Item is basically object includes SkSVG and value use to get the list of eyes | | getEarsSvg | return Array<Item> Item is basically object includes SkSVG and value use to get the list of ears | | getFaceSvg | return Array<Item> Item is basically object includes SkSVG and value use to get the list of faces graphics | | getSideBurnSvg | return Array<Item> Item is basically object includes SkSVG and value use to get the list of side Burn | | etc. | Please check other props it's same as following pros with same return type just return different SVG's according with there name.♥️ |

Rest of the avatar's have a similar type of function you can check in the codebase. If you are facing any issue please contact me in my email mention in the contact section. ✌️

Example

import React from "react";
import { View } from "react-native";
import {getListOfOptions, getSkinTon,getEyesSvg } from 'rn-customize-avatar/bigEars';

useEffect(() => {
 const options =  getListOfOptions() // synchronous function ♥️
 const eyes =  getEyesSvg() // same synchronous function ♥️  return Array<Item>
 console.log("options",options)
 console.log("eyes",eyes)

},[])

function App() {
  return (
    <View style={{flex : 1}}>
      <SkSvgView  svg={createOwnAvatar({})}>
    </View>
  );
}

IMPORTANT

What is the use case of SKSVG ?

SkSVG is like a svg basically generated by Skia. To render the SKSVG you can use the following component. I have create a custom component by this you can render SkSVG.

Example

import React from "react";
import { View } from "react-native";
import {SkSvgView} from 'rn-customize-avatar';

function App() {
  return (
    <View style={{flex : 1}}>
      <SkSvgView  svg={createOwnAvatar({})}>
    </View>
  );
}

Donation

If this project helped you to reduce your developing time, you can give me a cup of coffee :) ♥️

Documentation

More details and use cases coming soon.

:e-mail: Contact

If you have any question, please email [email protected].

License

MIT