yanqiw/react-native-icon-badge

react-native-icon-badge

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:

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'
}

react-native-icon-badge's Issues

How to add marginLeft in IconBadgeStyle.

I want add marginLeft in IconBadge Here is my code:
<IconBadge MainElement={ <View style={{ backgroundColor: '#489EFE', width: 50, height: 50, margin: 6, }} /> } BadgeElement={ <Text style={{ color: '#FFFFFF' }}>3</Text> } IconBadgeStyle={ { width: 30, height: 30, backgroundColor: '#FF00EE', # marginLeft:100 } } />
But iconBadge not change:

Seem my issue just appear which marginLeft because I try change 'marginLeft' to marginRight it work well.

Pls help me
P/s I want my MainElement not moving and iconBadge moving.

How to add Padding

Hello, I placed my object on a tab, but the badge is not positioned correctly, it need more padding bottom and left. Where should I place these styles? I tried on MainView, IconBadge and IconBadgeElement, but they are not affecting it correctly.

Please let me know how to fix this! thanks

Publish latest version to NPM?

Currently the NPM package doesn't reference the latest version of this package.

Icon badge obscures touchable.

If a user presses on the spot where the badge is, we cannot trigger onPress events. How can I fix this?

Round edges blurry or overgrowing?

Hi, my badges are not very clean. When rendered, they seem blurry. (React Native 0.55.4)

Style:

badgeIcon: {
  alignItems: 'center',
  backgroundColor: colors.black,
  borderColor: colors.red,
  borderRadius: 50,
  borderWidth: 1.5,
  height: 20,
  justifyContent: 'center',
  minWidth: 20,
  position: 'absolute',
  right: -12,
  top: -5
}

Results:

No matter the colors, the border width or border radius, the color pierces the edges.
Is there a way to avoid this?

Comparable styling in the web is rendered like this:

Cannot modify width to be smaller than default width

<IconBadge MainElement={<Image source={require('path/to/image.png'} />} IconBadgeStyle={{ width:10, height:10, borderRadius:5, }} />

In this example, the height of the badge changes but the width does not.

I think that this is because the source code is using minWidth instead of width.

[Question] Can this lib add badge to app icon?

Hi,

Can this lib add badge (number of notifications) to app icon? And if can, where should I put code for that?

Thank you!

Badge is not displayed in Android.

Hi, I am running sample app. I am using this module it's working fine.
In iOS badge is displayed like below image.

In Android badge is not displayed. Here is the image for android.

here is my code:

<View style={styles.numberWrap}>
       <IconBadge
         IconBadgeStyle={{
           width: 25,
           height: 25,
           backgroundColor: Color.error
         }}
         BadgeElement={<Text style={{ color: '#FFFFFF' }}>{number}</Text>}
         Hidden={number == 0}
       />
     </View>
const styles = StyleSheet.create({
numberWrap: {
   position: 'absolute',
   top: -15,
   right: -10,
   backgroundColor: 'white',
   borderRadius: 10
 },
})

Please give me any suggestion. Thank you in advance.