Saturday, 16 February, 2019
Summary
react-native-icon-badge
Default badge style
Icon badge is used to create icon badge on some element, such as avatar, icon, image.... The badge is used to give some alert to user of specific element.
How to use
Install package:
npm install --save react-native-icon-badge
Import to your app:
...
import IconBadge from 'react-native-icon-badge';
...
Use the component:
<View style={{flexDirection: 'row',alignItems: 'center',justifyContent: 'center',}}>
<IconBadge
MainElement={
<View style={{backgroundColor:'#489EFE',
width:50,
height:50,
margin:6
}}/>
}
BadgeElement={
<Text style={{color:'#FFFFFF'}}>{this.state.BadgeCount}</Text>
}
IconBadgeStyle={
{width:30,
height:30,
backgroundColor: '#FF00EE'}
}
Hidden={this.state.BadgeCount==0}
/>
</View>
API table
| API name | Usage |
|---|---|
| MainElement | The background element. |
| BadgeElement | The badge element, normally it is a Text. |
| IconBadgeStyle | Customized badge style.(Optional) |
| Hidden | Hides badge.(Optional) |
IconBadge: {
position:'absolute',
top:1,
right:1,
minWidth:20,
height:20,
borderRadius:15,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#FF0000'
}