Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-native-user-avatar
Advanced tools
Readme
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.
import UserAvatar from 'react-native-user-avatar';
const App: () => React$Node = () => {
return (
<>
...
<View>
<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" bgColors={['#ccc', '#fafafa', '#ccaabb']}/>
<UserAvatar size={50} name="John Doe" />
<UserAvatar size={50} name="Jane Doe" bgColor="#000" />
</View>
...
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 |
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
FAQs
React Native component for a user avatar with fallback to colored initials
The npm package react-native-user-avatar receives a total of 2,041 weekly downloads. As such, react-native-user-avatar popularity was classified as popular.
We found that react-native-user-avatar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.