React Nice avatars but for React Native 📱
This package is basically a fork from react-nice-avatar, but intended for React Native.
isGradient prop isn't working see #12
npm install @zamplyy/react-native-nice-avatar
or
(recommended)
yarn add @zamplyy/react-native-nice-avatar
-
Import the component.
import Avatar, { genConfig } from '@zamplyy/react-native-nice-avatar';
-
Generate a random configuration, save it so that you can always rendering a same avatar with the configuration.
const config = genConfig(AvatarConfig?)
tip
: AvatarConfig is an Object, please check the Options below for what attributes can be passed in -
Render the component with specific width / height and configuration.
<Avatar style={{ width: 50, height: 50 }} {...config} />
or
<Avatar size={50} {...config} />
The options can be passed into genConfig or as React props
key | type | default | accept | tips |
---|---|---|---|---|
style |
ViewStyle | Only for React Props | ||
size |
number | Only for React Props | ||
shape |
string | circle | circle, rounded, square | Only for React Props |
sex |
string | man, woman | ||
faceColor |
string | |||
earSize |
string | small, big | ||
hairColor |
string | |||
hairStyle |
string | normal, thick, mohawk, womanLong, womanShort | ||
hairColorRandom |
boolean | false | thick,mohawk default only be black | |
hatColor |
string | |||
hatStyle |
string | none, beanie, turban | Usually is none | |
eyeStyle |
string | circle, oval, smile | ||
glassesStyle |
string | none, round, square | Usually is none | |
noseStyle |
string | short, long, round | ||
mouthStyle |
string | laugh, smile, peace | ||
shirtStyle |
string | hoody, short, polo | ||
shirtColor |
string | |||
bgColor |
string | |||
isGradient |
boolean | false |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
- Designer: @Micah on Figma
- Figma files: Avatar Illustration System