react-native-cartar

React Native wrapper for cartar.io.

Installation

yarn add @ckbab/react-native-cartar

This package depends on react-native-svg so you need to install it as well.

Examples

Note that the examples above are fetched from the latest version of cartar.io so there might be a mismatch between that version and the version of this lib.

Usage

import Cartar from "@ckbab/react-native-cartar";

<Cartar size={200} beard={2} beardColor={3} skinColor={2} ... />

Properties

Name	Type	Values	Default value
beard	number	0 - 10	0
beardColor	number or string	0-10	0
earrings	number	0 - 7	0
earringsColor	string	-	#f00
eye	number	0 - 18	0
eyeColor	string	-	#000
hair	number	0 - 32	0
hairColor	number or string	0-10	0
hat	number	0 - 7	0
hatColor	string	-	#f00
mouth	number	0 - 15	0
mouthColor	string	-	#f00
necklace	number	0 - 6	0
necklaceColor	string	-	#f00
shirt	number	0 - 19	0
shirtColor	string	-	#ddd
shirtColorAlt	string	-	#aaa
skinColor	number or string	0-8	0
size	number	-	100

Note that skinColor, hairColor and beardColor support both predefined colors (e.g. 3) or custom colors (e.g. #cc00ff).

Default colors

Skin

Value	Hex code	Example
1	#ffdbac
2	#f1c27d
3	#e0ac69
4	#c68642
5	#8d5524
6	#83572e
7	#624125
8	#422d1b

Hair

Value	Hex code	Example
1	#f2e7c7
2	#f2e1ae
3	#f2da91
4	#debe99
5	#aa8866
6	#6d4730
7	#4d2d1a
8	#2d170e
9	#121821
10	#b06500

Beard

The color is based on the skinColor value where 1 is light colored beard and 10 is dark colored beard.