React Native component for a user avatar with fallback to colored initials
source link: https://www.tuicool.com/articles/hit/iqeYVzQ
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
React Native component for a user avatar with fallback to colored initials.
A bare-bones user avatar display with support for falling back to using the user's initials on a colored background as the avatar.
Installation
npm install --save react-native-user-avatar
or yarn add react-native-user-avatar
Usage
<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.
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK