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`:
```bash
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
```bash
npm i @dicebear/avataaars
```
Adventurer Neutral
```bash
npm i @dicebear/adventurer-neutral
```
BigEars
```bash
npm i @dicebear/bigEars
```
Lorelei
```bash
npm i @dicebear/lorelei
```
Micah
```bash
npm i @dicebear/micah
```
Croodles
```bash
npm i @dicebear/croodles
```
Notionists
```bash
npm i @dicebear/Notionists
```
## Rest Avatar Coming Soon... ♥️
## Try it out
You can try out the [DiceBear](https://dicebear.com/) website to get a tease of the functionalities in this lib.
## Basic Usage
The Basic use of Avataars container. That's Simple 😬
```jsx
import React from 'react';
import { View } from 'react-native';
import { Avataars } from 'rn-customize-avatar/avataaars';
function App() {
return (
);
}
```
## 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 item`chipStyle` |
| 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
```jsx
import React from 'react';
import { View } from 'react-native';
import { Avataars } from 'rn-customize-avatar/avataars';
function App() {
return (
);
}
```
## 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
```jsx
import React from 'react';
import { View } from 'react-native';
import { AdventureNeutral } from 'rn-customize-avatar/adventureNeutral';
function App() {
return (
);
}
```
## 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` list of category |
| `getSkinTon` | `return Array` list of default colors |
| `getMouthSvg` | `return Array- ` Item is basically object includes SkSVG and value use to get the list of SVG's and value |
| `getEyesSvg` | `return Array
- ` Item is basically object includes SkSVG and value use to get the list of eyes |
| `getClothingSvg` | `return Array
- ` Item is basically object includes SkSVG and value use to get the list of clothes |
| `getClothingGraphicsSvg` | `return Array
- ` Item is basically object includes SkSVG and value use to get the list of clothing graphics |
| `getAccessoriesSvg` | `return Array
- ` 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` list of category |
| `getSkinTon` | `return Array` list of default colors |
| `getMouthSvg` | `return Array
- ` Item is basically object includes SkSVG and value use to get the list of SVG's and value |
| `getEyesSvg` | `return Array
- ` Item is basically object includes SkSVG and value use to get the list of eyes |
| `getEarsSvg` | `return Array
- ` Item is basically object includes SkSVG and value use to get the list of ears |
| `getFaceSvg` | `return Array
- ` Item is basically object includes SkSVG and value use to get the list of faces graphics |
| `getSideBurnSvg` | `return Array
- ` 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
```jsx
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
-
console.log("options",options)
console.log("eyes",eyes)
},[])
function App() {
return (
);
}
```
## 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
```jsx
import React from "react";
import { View } from "react-native";
import {SkSvgView} from 'rn-customize-avatar';
function App() {
return (
);
}
```
## Donation
If this project helped you to reduce your developing time, you can give me a cup of coffee :) ♥️
[](https://www.buymeacoffee.com/vishumadaaQ)
## Documentation
More details and use cases coming soon.
## :e-mail: Contact
If you have any question, please email `vishumadaan25@gmail.com`.
## License
[MIT](https://choosealicense.com/licenses/mit/)