Need help with react-native-user-avatar?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

avishayil
130 Stars 41 Forks MIT License 74 Commits 11 Opened issues

Description

Avatar Component For React Native

Services available

!
?

Need anything else?

Contributors list

# 55,455
JavaScr...
React
React N...
iOS
23 commits
# 39,863
React N...
unzip
solidit...
truffle
5 commits
# 85,000
fab
React N...
TypeScr...
docsify
3 commits
# 83,992
TypeScr...
Deno
Shell
Less
2 commits
# 15,807
guidebo...
React N...
html5
lazy-lo...
1 commit
# 115,730
TypeScr...
React N...
Node.js
d3v4
1 commit
# 454,890
React
JavaScr...
iOS
Android
1 commit

React Native User Avatar

npm version npm downloads Build Status

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

Installation

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

Usage

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.

UserAvatar Component

import UserAvatar from 'react-native-user-avatar';

const App: () => React$Node = () => { return ( <> ... ...

UserAvatar Props

Attribute

Type Default Value Description

name
| string |
'John Doe'
| name used for generating initials
src
| string |
undefined
| source image on the internet to display
bgColor
| string |
undefined
| custom background color for the initials
bgColors
| array | see index.js | custom array of background colors to choose from
textColor
| string |
'#fff'
| custom text color for the initials font
size
| number |
32
| custom size that defines both the avatar and the initials font size
imageStyle
| object |
undefined
| custom image styling to append to the
Image
component displays the source image
textStyle
| object |
undefined
| custom text styling to append to the
Text
component that displays initials
style
| object |
undefined
| custom style to append to the
UserAvatar
component container
borderRadius
| number |
size * 0.5
| custom border radius for the component
component
| React.Component |
undefined
| custom component to display instead of initials or source image

Contributing

Contributions are welcome. Please see CONTRIBUTING.md if you like to contribute to this library.

Credits

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

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.