🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A bare-bones user avatar display with support for falling back to using the user’s initials on a colored background as the avatar.

Others React Native

Documentation

React Native User Avatar

npm version npm downloads Build Status

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.

Installation

npm install --save react-native-user-avatar or yarn add react-native-user-avatar

Usage

import UserAvatar from 'react-native-user-avatar';   <UserAvatar size="100" name="Avishay Bar" /> <UserAvatar size="100" name="Avishay Bar" src="https://dummyimage.com/100x100/000/fff" /> <UserAvatar size="50" name="John Doe" colors={['#ccc', '#fafafa', '#ccaabb']}/> <UserAvatar size="50" name="John Doe" /> <UserAvatar size="50" name="Jane Doe" color="#000" />

User-defined Image-Component

It is also possible to use another Image-Component than the built-in <Image>.

<UserAvatar size="50" name="John Doe" component={CachedImage} />

The fallback avatar's color may be set by passing in the color prop, or you can customize the range of colors used by passing in an array of colors. The component uses a simple calculation to consistently use the same color for the same user's name every time.

Credits

@wbinnssmith for creating https://github.com/wbinnssmith/react-user-avatar

License

MIT


You May Also Like