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 - 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.