react-native-avatar-social

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.