React Native: react-native-avatar-social

• Usage
• License

📖 Getting started

$ npm install react-native-avatar-social --save

$ react-native link react-native-material-letter-icon

$ react-native link react-native-vector-icons

💻 Usage

import React, { Component } from 'react';
import { View } from 'react-native';
import AvatarSocial from 'react-native-avatar-social';

export default class App extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <AvatarSocial
          dim={150}
          image={{
              uri: 'https://image.tmdb.org/t/p/w300_and_h450_bestv2/lvQypTfeH2Gn2PTbzq6XkT2PLmn.jpg'
          }}
          name="Connie Nielsen"
          type="image"
          isStatus={true}
          isIcon={false}
          iconSize={25}
          iconColor={'#26C6DA'}
          badgeText={100}
          badgeColor={'#ffffff'}
          badgeBackground={'#303030'}
          badgeFunction={e => {
            return e > 99 ? '99+' : e;
          }}
        />
        <AvatarSocial
          dim={150}
          image={{
              uri: 'https://image.tmdb.org/t/p/w300_and_h450_bestv2/lvQypTfeH2Gn2PTbzq6XkT2PLmn.jpg'
          }}
          name="Connie Nielsen"
          type="image"
          isStatus={true}
          isIcon={false}
          iconSize={25}
          iconColor={'#26C6DA'}
          badgeText={100}
          badgeColor={'#ffffff'}
          badgeBackground={'#ff9d00'}
          positionStatus="right"
        />
        <AvatarSocial
          dim={80}
          image={{
              uri: 'https://image.tmdb.org/t/p/w300_and_h450_bestv2/lvQypTfeH2Gn2PTbzq6XkT2PLmn.jpg'
          }}
          name="Connie Nielsen"
          type="image"
          isStatus={true}
          isIcon={false}
          badgeText={'100'}
          badgeColor={'#ffffff'}
          badgeBackground={'#303030'}
          badgeFunction={e => {
            return e > 99 ? '99+' : e;
          }}
          positionStatus="left"
        />
        <AvatarSocial
          dim={80}
          image={{
              uri: 'https://image.tmdb.org/t/p/w300_and_h450_bestv2/lvQypTfeH2Gn2PTbzq6XkT2PLmn.jpg'
          }}
          name="Connie Nielsen"
          type="image"
          isStatus={true}
          isIcon={true}
          icon={'star'}
          iconColor="#ff9d00"
        />
        <AvatarSocial
          dim={80}
          image={{
              uri: 'https://image.tmdb.org/t/p/w300_and_h450_bestv2/lvQypTfeH2Gn2PTbzq6XkT2PLmn.jpg'
          }}
          name="Connie Nielsen"
          isStatus={true}
          isIcon={false}
          badgeText={100}
          badgeColor={'#ffffff'}
          badgeBackground={'#303030'}
          badgeFunction={e => {
            return e > 99 ? '99+' : e;
          }}
          positionStatus="left"
        />
        <AvatarSocial
          dim={80}
          image={{
              uri: 'https://image.tmdb.org/t/p/w300_and_h450_bestv2/lvQypTfeH2Gn2PTbzq6XkT2PLmn.jpg'
          }}
          name="Connie Nielsen"
          isStatus={true}
          isIcon={true}
          icon={'star'}
          iconColor="#ff9d00"
        />
      </View>
    );
  }
}

💡 Props

| Prop | Type | Default | Note | | ----------------- | ---------- | ------- | ---------------------------------------------------------------------------------------------------------- | | dim | number | | Avatar size. | image | obj | | We need to pass an url image, as in the example, or a required local image. | name | string | | Name to pass in case you want to use the letter mode or the image attribute is not found. | type | string | letter | Choose whether to use the letter or image mode, to use image you have to pass an image url. | isStatus | bool | | Indicates whether to have the status icon. | isIcon | bool | | Indicates whether to have the status icon. | icon | FontAwesome | | Indicates what kind of icon to use. | iconSize | number | | Icon size. | iconColor | string | | Icon color. | badgeText | string | | Badge text. | badgeColor | string | #000000 | Color of the badge text. | badgeBackground | string | transparent | Background color of the badge. | badgeFunction | function | | Use in case you want to define a function, for the badgeText attribute. | positionStatus | string | left | Status position

📜 License

This library is provided under the Apache License.