# react-native-badge-view

> A badge view with react native.

Latest version **2.0.1** (published 2018-08-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-badge-view
pnpm add react-native-badge-view
yarn add react-native-badge-view
bun add react-native-badge-view
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2018-08-30 |
| First published | 2017-04-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 73 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Samoy |
| Maintainers | samoy |
| Keywords | badge, badgeView, badge-view, badge view |

## Links

- npm: https://www.npmjs.com/package/react-native-badge-view
- Repository: https://github.com/Samoy/react-native-badge-view
- Homepage: https://github.com/Samoy/react-native-badge-view#readme
- Issues: https://github.com/Samoy/react-native-badge-view/issues
- npm.io page: https://npm.io/package/react-native-badge-view

## Recent versions

- 2.0.1 (latest) — 2018-08-30
- 1.0.1 — 2018-06-14
- 1.0.0 — 2017-04-21

## README

RNBadgeView
===========================
![npm](https://img.shields.io/badge/npm-v2.0.1-green.svg)

Installation
----------
>
`npm i react-native-badge-view -S`

Base Use
-------
>
```
<BadgeView parentView={<View style={{width: 40, height: 40, backgroundColor: 'blue'}}/>} 
           badgeText={"12"}/>
```

```
<BadgeView parentView={<View style={{width: 40, height: 40, backgroundColor: 'blue'}}/>
                } badgeImageSource={require('./badge-view/test.png')}/>
```

Prop
----
>
|Prop|Type|Required|Default|Comment|
|:----:|:---:|:---:|:---:|:----:|
|badgePosition|string|optional|right|The position of badge, one of *right* or *left*|
|badgeText|string|optional|--|The text of badge, if the text is an empty string or equal to *0*, the badge will be invisible.|
|badgeImageSource|{uri:string},number|optional|--|The image source of badge.It works only the `badgeText` is *empty*.|
|badgeImageWidth|number|optional|20|The width of badge image. It works only the `badgeImageSource` is *not* empty.|
|badgeImageHeight|number|optional|20|The height of badge image. It works only the `badgeImageSource` is *not* empty.|
|badgeTextColor|string|optional|white|The text color of badge, default is *white*.|
|autoSize|bool|optional|true|When the prop is *true*, the badge size will be self-adaption to the text size.|
|badgeSize|number|optional|20|The size of badge,default is *20*. It works only when the `autoSize` is *false*.|
|badgeBackgroundColor|string|optional|red|The background color of badge, default is *red*.|
|parentView|element|required|--|The parent view of badge, it is required.|

ScreenShot
---------
>
![ScreenShot](badge-view/screenShot.jpg)

---
_Source: https://npm.io/package/react-native-badge-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._