0.0.3 • Published 5 years ago
react-native-avatar-social v0.0.3
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.