rn-customize-avatar

react-native-customize-avatar is a customizable avatar builder for React Native, inspired by social media platforms like WhatsApp , Instagram and Snapchat. It allows you to create avatars with custom faces, hairstyles, accessories, beards, and colors.😎 Avatar Builder uses the Dicebear and Skia libraries to generate unique avatars for each user.😍

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.

Avataaars

npm i @dicebear/avataaars

Adventurer Neutral

npm i @dicebear/adventurer-neutral

BigEars

npm i @dicebear/bigEars

Lorelei

npm i @dicebear/lorelei

Micah

npm i @dicebear/micah

Croodles

npm i @dicebear/croodles

Notionists

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.

📧 Contact

If you have any question, please email vishumadaan25@gmail.com.

License

MIT