React Native component for a user avatar with fallback to colored initials
npm install react-native-user-avatar


!Coverage lines
!Coverage functions
!Coverage branches
!Coverage statements
A bare-bones user avatar display with support for falling back to using the user's initials on a colored background as the avatar.
Based on the great library for React: https://github.com/wbinnssmith/react-user-avatar, and ported to React Native.
iOS Screenshot | Android Screenshot
:-------------------------:|:-------------------------:
| 
npm install --save react-native-user-avatar or yarn add react-native-user-avatar
The fallback avatar's color may be set by passing in the bgColor prop, or you can customize the range of colors
used by passing in an array of bgColors. The component uses a simple calculation to consistently use the same
color for the same user's name every time.
``jsx
import UserAvatar from 'react-native-user-avatar';
const App: () => React$Node = () => {
return (
<>
...
...
`
Attribute | Type | Default Value | Description
---------------- | --------------- | ------------- | -----------
name | string | 'John Doe' | name used for generating initialssrc | string | undefined | source image on the internet to displaybgColor | string | undefined | custom background color for the initialsbgColors | array | see index.js | custom array of background colors to choose fromtextColor | string | '#fff' | custom text color for the initials fontsize | number | 32 | custom size that defines both the avatar and the initials font sizeimageStyle | object | undefined | custom image styling to append to the Image component displays the source imagetextStyle | object | undefined | custom text styling to append to the Text component that displays initialsstyle | object | undefined | custom style to append to the UserAvatar component containerborderRadius | number | size * 0.5 | custom border radius for the componentcomponent | React.Component | undefined` | custom component to display instead of initials or source image
Contributions are welcome. Please see CONTRIBUTING.md if you like to contribute to this library.
@wbinnssmith for creating https://github.com/wbinnssmith/react-user-avatar
MIT