🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

An icon badge component for React Native that can be used to create icon badge on some element, such as avatar, icon, image.

Others React Native

Documentation

react-native-icon-badge

npm

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.

For example: demo

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

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)

Default badge style

IconBadge: {   position:'absolute',   top:1,   right:1,   minWidth:20,   height:20,   borderRadius:15,   alignItems: 'center',   justifyContent: 'center',   backgroundColor: '#FF0000' }

You May Also Like