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

or

(recommended)

yarn add @zamplyy/react-native-nice-avatar

Usage

1. Import the component.

   import Avatar, { genConfig } from '@zamplyy/react-native-nice-avatar';

2. 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

3. 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