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

or

npm install react-native-bigheads react-native-svg --save

This package requires react-native-svg to be installed

Aditional steps in iOS

cd ios && pod install

usage

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

• accessory
• bgColor
• bgShape
• body
• clothing
• clothingColor
• containerProps
• containerStyles
• eyebrows
• eyes
• facialHair
• graphic
• hair
• hairColor
• hat
• hatColor
• lashes
• lipColor
• mouth
• showBackground
• size
• skinTone

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.