react-native-badge-avatar

react native avatar component support badge number, badge icon, name, icon, border, default placeholder, radius…

Usage no npm install needed!

<script type="module">
  import reactNativeBadgeAvatar from 'https://cdn.skypack.dev/react-native-badge-avatar';
</script>

README

React Native Badge Avatar

npm version npm downloads

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
  };