React Native Badge Avatar

A user avatar display with support:

• default place holder
• name as Avatar
• url as Avatar
• onPress event callback
• Avatar border
• Avatar border color
• Avatar radius
• Badge Number
• Badge Icon
• Auto Badge Size & Position

Based on: https://github.com/Samoy/react-native-badge-view, https://github.com/avishayil/react-native-user-avatar

ScreenShot

Installation

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

Usage

     <Avatar
          size={68}
          name="Dean Guo"
          style={{ margin: 6 }}
          onPress={() => alert("click")}
        />
 
        <Avatar
          size={68}
          style={{ margin: 6 }}
          placeholder={require("./images/badge_icon.png")}
          onPress={() => alert("click")}
        />
 
        <Avatar
          size={80}
          name="Dean Guo"
          source="https://avatars3.githubusercontent.com/u/8385255?s=460&v=4"
          badge={6}
        />
 
        <Avatar
          size={100}
          name="Dean Guo"
          radius={0.2}
          source="https://avatars3.githubusercontent.com/u/8385255?s=460&v=4"
          badge={6}
          badgeIcon={require("./images/badge_icon.png")}
        />
 
        <Avatar
          size={120}
          borderColor="black"
          borderWidth={3}
          name="Dean Guo"
          source="https://avatars3.githubusercontent.com/u/8385255?s=460&v=4"
        />

Avatar render priority:

• source > name > placeholder > default placeholder

Prop

Prop	Type	Required	Default	Comment
name	string	optional	null	name of Avatar
source	string	optional	null	net image url of Avatar
placeholder	number	optional	png format default icon	local source of Avatar
onPress()	function	optional	null	Press event callback
size	number	optional	48	Size of Avatar, badge will be 1/4 of Avatar size
radius	number	optional	1	range of 0-1, 0 is rect, 1 is full circular
borderColor	string	optional	""	avatar border color
borderWidth	number	optional	0	avatar border width
badge	string	optional	""	badge number
badgeIcon	number	optional	""	local source of badge icon
badgeTextColor	string	optional	white	badge text color
badgeBackgroundColor	string	optional	red	badge backgroud color
style	object	optional	null	compontent style same like default use

  static propTypes = {
    badgeIcon: PropTypes.number,
    badgeTextColor: PropTypes.string,
    badgeBackgroundColor: PropTypes.string,
    badge: PropTypes.number,
    name: PropTypes.string,
    source: PropTypes.string,
    placeholder: PropTypes.number,
    size: PropTypes.number,
    radius: PropTypes.number,
    borderColor: PropTypes.string,
    borderWidth: PropTypes.number,
    onPress: PropTypes.func,
    ...View.propTypes
  };