README
React Native: react-native-avatar-social
📖 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.