2.1.1 • Published 4 months ago
@ckbab/react-native-cartar v2.1.1
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.