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