mrousavy / react-native-bigheads

Big Heads avatars for React Native

react-native-bigheads

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.