1.1.2 • Published 3 years ago
@zamplyy/react-native-nice-avatar v1.1.2
react-native-nice-avatar
React Nice avatars but for React Native 📱
Credits
This package is basically a fork from react-nice-avatar, but intended for React Native.
Known issues
isGradient prop isn't working see #12
Installation
npm install @zamplyy/react-native-nice-avataror
(recommended)
yarn add @zamplyy/react-native-nice-avatarUsage
- 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} />
Options
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 | 
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Assets
- Designer: @Micah on Figma
- Figma files: Avatar Illustration System