Skip to content
No description, website, or topics provided.
JavaScript Objective-C Python Java
Branch: master
Clone or download
yanqiw Merge pull request #12 from janhesters/patch-1
Create TypeScript definitions file
Latest commit ccca39b Feb 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example change api table May 5, 2016
.eslintrc add inconbadge May 5, 2016
.gitignore init project May 5, 2016
.npmignore add npm ignore, remove the example from npm package May 6, 2016
IconBadge.js include prop types checking Jul 4, 2018
README.md FIX: Correct few typos in README docs Apr 17, 2018
demo.png add readme May 5, 2016
index.d.ts
package.json 1.1.0 Jun 2, 2016

README.md

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 can’t perform that action at this time.