2.1.3 • Published 5 months ago
@ckbab/react-native-cartar v2.1.3
react-native-cartar
React Native wrapper for cartar.io.
Installation
yarn add @ckbab/react-native-cartarThis 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 - 36 | 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 - 21 | 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.

















