@muhzi/react-native-user-avatar

react-native-user-avatar

A react native user avatar component with progressive loading and text fallback support.

Demo

You can find Snack expo example here

Installation

npm install @muhzi/react-native-user-avatar
#OR
yarn add @muhzi/react-native-user-avatar

How to use?

import UserAvatar from "@muhzi/react-native-user-avatar";

Simply place a <UserAvatar/> component.

<UserAvatar
  userName="John Samuel"
  size={80}
  backgroundColor="#0be881"
  src="https://images.pexels.com/photos/4403924/pexels-photo-4403924.jpeg"
  active
/>

Props

Name	Default	Type	Description
userName	-	String	The user name that will be used to compute user initials.
initialName	-	String	Force the displayed initials by overriding the computed ones.
src	-	String	Path of image.
active	false	Boolean	Whether the user is active or not.(Show active circle around avatar)
textColor	#FFFF	String	The font color used to render the user initials
activeCircleColor	#27ae60	String	Background color active circle
size	64	Number	The avatar size
rounded	true	Boolean	True if the avatar must be rounded.
loaderColor	#aaa69d	String	The color of loader
backgroundColor	-	String	The avatar background color to use if no image is provided
backgroundColors	['#575fcf', '#ef5777', '#0be881']	Array	Array of background colors to choose from, if no background color is specified

Author

Muhsin K

License

MIT