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
;;; { 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= { 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= { 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= { 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.