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.😍
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
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
You can try out the DiceBear website to get a tease of the functionalities in this lib.
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>
);
}
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 |
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
|
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>
);
}
These are some props that are related to Adventurer Neutral
Props |
Usage |
---|---|
backgroundColorList |
Add custom colors in the backgroundColorList
|
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)
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. ✌️
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>
);
}
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.
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>
);
}
If this project helped you to reduce your developing time, you can give me a cup of coffee :)
More details and use cases coming soon.
If you have any question, please email vishumadaan25@gmail.com
.