pinkpanda-bigheads v1.0.0
react-native-bigheads-web
A 1-to-1 lib that reproduces what we have in the react native version of the PinkPanda app.
This was needed because we have some other accessories that are not in the original Big Heads library on the web.
BigHeads avatars for React Native. Based on @bigheads/core
Getting Started
install dependencies
yarn add react-native-bigheads react-native-svgor
npm install react-native-bigheads react-native-svg --saveThis package requires react-native-svg to be installed
Aditional steps in iOS
cd ios && pod installusage
import the BigHead component from react-native-bigheads
import { BigHead } from 'react-native-bigheads'use the BigHead component like this:
<BigHead
accessory="shades"
bgColor="blue"
bgShape="circle"
body="chest"
clothing="tankTop"
clothingColor="black"
eyebrows="angry"
eyes="wink"
facialHair="mediumBeard"
graphic="vue"
hair="short"
hairColor="black"
hat="none"
hatColor="green"
lashes={false}
lipColor="purple"
mouth="open"
showBackground={true}
size={300}
skinTone="brown"
/>Props
accessorybgColorbgShapebodyclothingclothingColorcontainerPropscontainerStyleseyebrowseyesfacialHairgraphichairhairColorhathatColorlasheslipColormouthshowBackgroundsizeskinTone
Reference
Props
accessory
Type of accessory
| Type | Required | Default |
|---|---|---|
| enum('none', 'roundGlasses', 'tinyGlasses', 'shades', 'faceMask', 'hoopEarrings') | No | Random |
bgColor
The color of the background
| Type | Required | Default |
|---|---|---|
| enum('blue', 'green', 'red', 'orange', 'yellow', 'turqoise', 'pink', 'purple') | No | Random |
bgShape
The shape of the background
| Type | Required | Default |
|---|---|---|
| enum('circle', 'square', 'squircle') | No | Random |
body
Type of body
| Type | Required | Default |
|---|---|---|
| enum('chest', 'breasts') | No | Random |
clothing
Type of cloth
| Type | Required | Default |
|---|---|---|
| enum('naked', 'shirt', 'dressShirt', 'vneck', 'tankTop', 'dress', 'denimJacket', 'hoodie', 'chequeredShirt', 'chequeredShirtDark') | No | Random |
clothingColor
The color of the clothes
| Type | Required | Default |
|---|---|---|
| enum('white', 'blue', 'black', 'green', 'red') | No | Random |
containerProps
Props to be passed to the container element (View)
| Type | Required |
|---|---|
| View.props | No |
containerStyles
Styles to be applied to the container element (View)
| Type | Required |
|---|---|
| Style | No |
eyebrows
Type of eyebrows
| Type | Required | Default |
|---|---|---|
| enum('raised', 'leftLowered', 'serious', 'angry', 'concerned') | No | Random |
eyes
Type of eyes
| Type | Required | Default |
|---|---|---|
| enum('normal', 'leftTwitch', 'happy', 'content', 'squint', 'simple', 'dizzy', 'wink', 'hearts', 'crazy', 'cute', 'dollars', 'stars', 'cyborg', 'simplePatch', 'piratePatch') | No | Random |
facialHair
Type of facial hair
| Type | Required | Default |
|---|---|---|
| enum('none', 'stubble', 'mediumBeard', 'goatee') | No | Random |
graphic
Type of graphic over the t-shirts
| Type | Required | Default |
|---|---|---|
| enum('none', 'redwood', 'gatsby', 'vue', 'react', 'graphQL', 'donut', 'rainbow') | No | Random |
hair
Type of hair
| Type | Required | Default |
|---|---|---|
| enum('none', 'long', 'bun', 'short', 'pixie', 'balding', 'buzz', 'afro', 'bob', 'mohawk') | No | Random |
hairColor
The color of the hair
| Type | Required | Default |
|---|---|---|
| enum('blonde', 'orange', 'black', 'white', 'brown', 'blue', 'pink') | No | Random |
hat
Type of hat
| Type | Required | Default |
|---|---|---|
| enum('none', 'beanie', 'turban', 'party', 'hijab') | No | Random |
hatColor
The color of the hat
| Type | Required | Default |
|---|---|---|
| enum('white', 'blue', 'black', 'green', 'red') | No | Random |
lashes
Show lashes
| Type | Required | Default |
|---|---|---|
| boolean | No | Random |
lipColor
The color of the lips
| Type | Required | Default |
|---|---|---|
| enum('red', 'purple', 'pink', 'turqoise', 'green') | No | Random |
mouth
Type of mouth
| Type | Required | Default |
|---|---|---|
| enum('grin', 'sad', 'openSmile', 'lips', 'open', 'serious', 'tongue', 'piercedTongue', 'vomitingRainbow') | No | Random |
showBackground
Whether or not to display the background color
When true it cuts off everything below the avatar otherwise it won't clip off any of the avatar
| Type | Required | Default |
|---|---|---|
| boolean | No | true |
size
Size of the avatar
| Type | Required | Default |
|---|---|---|
| number | No | 100 |
skinTone
The color of the skin
| Type | Required | Default |
|---|---|---|
| enum('light', 'yellow', 'brown', 'dark', 'red', 'black') | No | Random |
Authors
- Some portions of this code belong to the Big Heads authors which are distributed under the MIT License
- Felipe Céspedes
Changelog
Learn about the latest improvements
License
This project is licensed under the MIT License - see the LICENSE file for details
Contributing
Please see the Contributing Guidelines.
2 years ago