zamplyy / react-native-nice-avatar

React Nice Avatar but for React Native 📱
MIT License
6 stars 3 forks source link

react-native-nice-avatar

Version npm download

imagewall

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