{"id":14986107,"url":"https://github.com/benjamin-dobell/react-native-android-toolbar-badge","last_synced_at":"2026-01-18T20:32:45.527Z","repository":{"id":57335298,"uuid":"88095451","full_name":"Benjamin-Dobell/react-native-android-toolbar-badge","owner":"Benjamin-Dobell","description":"React Native support for displaying badges in ToolbarAndroid","archived":false,"fork":false,"pushed_at":"2021-03-11T19:21:08.000Z","size":30,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-11T12:41:42.080Z","etag":null,"topics":["android","badge-view","react-component","react-native"],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Benjamin-Dobell.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["Benjamin-Dobell"]}},"created_at":"2017-04-12T20:55:58.000Z","updated_at":"2021-03-11T19:21:10.000Z","dependencies_parsed_at":"2022-08-29T19:41:29.834Z","dependency_job_id":null,"html_url":"https://github.com/Benjamin-Dobell/react-native-android-toolbar-badge","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Benjamin-Dobell%2Freact-native-android-toolbar-badge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Benjamin-Dobell%2Freact-native-android-toolbar-badge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Benjamin-Dobell%2Freact-native-android-toolbar-badge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Benjamin-Dobell%2Freact-native-android-toolbar-badge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Benjamin-Dobell","download_url":"https://codeload.github.com/Benjamin-Dobell/react-native-android-toolbar-badge/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247361598,"owners_count":20926642,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","badge-view","react-component","react-native"],"created_at":"2024-09-24T14:12:20.244Z","updated_at":"2026-01-18T20:32:45.519Z","avatar_url":"https://github.com/Benjamin-Dobell.png","language":"Java","funding_links":["https://github.com/sponsors/Benjamin-Dobell"],"categories":[],"sub_categories":[],"readme":"# react-native-android-toolbar-badge\n\n![npm version](https://img.shields.io/npm/v/react-native-android-toolbar-badge.svg)\n\nA simple module that allows you to attach badges to action icons in your Android toolbars.\n\n## Install\n\nInstall the node module:\n\n    yarn add react-native-android-toolbar-badge\n\nThen link the native code into your Android project with:\n\n    react-native link\n\nAfter linking the code you'll need to make a small change to the native Android (Java) code included in your React Native app.\n\nIn the file(s) that define your React Native Android activities (classes that extends `ReactActivity`), typically just `MainActivity`, you'll need to add the following imports:\n\n```\nimport au.com.glassechidna.react.drawables.DrawableProviderResourcesWrapper;\nimport au.com.glassechidna.react.toolbar.badge.ToolbarBadgeAndroidModule;\n```\n\nthen inside your class definition, add/override `getResources()` as follows:\n\n```\n    @Override\n    public Resources getResources() {\n        return new DrawableProviderResourcesWrapper(super.getResources(), ToolbarBadgeAndroidModule.getDrawableStore());\n    }\n```\n\n## Appearance\n\n### Default\n\n![Default - 3](https://benjamin-dobell.github.io/react-native-android-toolbar-badge/screenshots/default.png)\n\n![Default - 7](https://benjamin-dobell.github.io/react-native-android-toolbar-badge/screenshots/default_7.png)\n\n### No Number\n\n![No Number](https://benjamin-dobell.github.io/react-native-android-toolbar-badge/screenshots/no_number.png)\n\n### Large Number (Prevent Overflow)\n\n![Large Number](https://benjamin-dobell.github.io/react-native-android-toolbar-badge/screenshots/large_number.png)\n\n### Automatically Hides (`number` == 0)\n\n![Badge Hidden](https://benjamin-dobell.github.io/react-native-android-toolbar-badge/screenshots/blank.png)\n\n### Custom Background Color\n\n![Background Color](https://benjamin-dobell.github.io/react-native-android-toolbar-badge/screenshots/background_color.png)\n\n### Custom Text (and Background) Color\n\n![Text Color](https://benjamin-dobell.github.io/react-native-android-toolbar-badge/screenshots/background_and_text_color.png)\n\n### Custom Text Size\n\n![Large Text](https://benjamin-dobell.github.io/react-native-android-toolbar-badge/screenshots/large_text.png)\n\n![Small Text](https://benjamin-dobell.github.io/react-native-android-toolbar-badge/screenshots/small_text.png)\n\n## Basic Usage\n\nInstead of directly using the `ToolbarAndroid` provided by React Native, you'll use `BadgeToolbarAndroid`, which is just a simple wrapper around `ToolbarAndroid`.\n\nImport `BadgeToolbarAndroid` like so:\n\n```\nimport { BadgeToolbarAndroid } from 'react-native-android-toolbar-badge'\n```\n\nthen in your render method, you can use `BadgeToolbarAndroid` exactly as you would `ToolbarAndroid` e.g.\n\n```\n\u003cBadgeToolbarAndroid\n\tnavIcon={navIcon}\n\ttitle=\"Title\"\n\ttitleColor=\"#111\"\n\tactions={actions}\n\tonIconClicked={this._onIconClicked}\n\tonActionSelected={this._onActionSelected}\n\tstyle={styles.toolbar} /\u003e\n```\n\nHowever, now your actions can include an optional `badge` property. `badge` is an object with the following properties:\n\n### `badge` Properties\n\n| Property        | Type   | Default | Description                                                                                                                                                                                                                |\n| --------------- | ------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| width           | number | 32      | Width of the badge bounds (including transparent region around the action icon).                                                                                                                                           |\n| height          | number | 32      | Width of the badge bounds (including transparent region around the action icon).                                                                                                                                           |\n| backgroundColor | color  | '#f00'  | Fill color of the badge circular background.                                                                                                                                                                               |\n| textColor       | color  | '#fff'  | Color of the number/text displayed on the badge (if displayed, see `number`).                                                                                                                                              |\n| textSize        | number | 16      | Size of the number/text displayed on the badge  (if displayed, see `number`)                                                                                                                                               |\n| maxNumber       | number | 9       | The maximum number displayed on the badge. If `number` exceeds this value, 3 vertically centered dots (\"...\") are displayed instead. This functionality exists to stop long numbers overflowing outside the badge circle.  |\n| number          | number | 0       | If the value is zero, the badge will be hidden. If the value is greater than zero, the number (or 3 dots) will be displayed. If you wish to show the badge without any text, you can specify a negative number.            |\n\n**Note:** Icons found in an Android toolbar are typically 24dp x 24dp (20dp x 20dp safe area). It's recommended you stick to that size. The default badge size of 32dp x 32dp gives the badge some additional room to be displayed without completely obscuring the icon or having illegibly small font. Your icon will _not_ be stretched.\n\n### Usage with  [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)\n\n_react-native-vector-icon_'s `Icon.ToolbarAndroid` (or whatever you've imported it as) wraps a regular `ToolbarAndroid`, however we need to use `BadgeToolbarAndroid` in order to display badges.\n\nUnfortunately, we can't use composition (as you would normally in React) because `Icon.ToolbarAndroid` doesn't take any props to support our use case. However, using ES6 class inheritance we can trivially extend `Icon.ToolbarAndroid` and override `render()` to display `BadgeToolbarAndroid` instead of `ToolbarAndroid`.\n\n```\nexport class BadgeIconToolbarAndroid extends Icon.ToolbarAndroid {\n  render() {\n    return \u003cBadgeToolbarAndroid {...this.props} {...this.state}/\u003e\n  }\n}\n\n```\n\nNow you can simply use `BadgeIconToolbarAndroid` instead of `ToolbarAndroid` or `Icon.ToolbarAndroid` - you'll have support for both badges and vector icons.\n\nAdmittedly, the solution is not particularly elegant as we've utilised internal knowledge of how _react-native-vector-icons_ works, however it gets the job done.\n\n## How does this library work?\n\nReact Native's `ToolbarAndroid` uses the real Android SDK-provided toolbar, not a react view hierarchy. Doing so amounts to a more consistent experience for Android users, however we can't customise the toolbar as we would a regular React Native view hierarchy.\n\nIn particular, action icons are not specified as views at all. Rather, they're specified as either a static image, or a \"[drawable](https://developer.android.com/reference/android/graphics/drawable/Drawable.html)\", which is just a general abstraction for something that can be drawn, and much more light-weight than a view. Static images obviously won't do for badges (not without a lot of pre-generated assets), however drawables afford us much greater flexibility.\n\nUnfortunately, given that drawables are inherently an Android feature/representation, React Native doesn't expose a simple means to utilise drawables from Javascript.\n\nQuite frankly, this library is a bit dodgy in how it's implemented, I don't exactly recommend looking through the code-base for inspiration! Basically, it just so happens that the way `ToolbarAndroid` is implemented in React Native, if the specified image URI is not a `file://`, `http://` or `https://` URL then it'll fallback to grabbing a `Drawable` from the Android app's resources. Consequently, we utilise [react-native-android-drawables](https://github.com/Benjamin-Dobell/react-native-android-drawables) to facilitate injection of our badge drawables into the Android app's \"resources\" at runtime, where React Native can, inadvertedly, find them.\n\n### Memory usage\n\nBadged icon images and generated drawables, once first displayed, are kept in memory (cached and reused) whilst your app remains running. Generally I'd expect this to be a non-issue as we're talking about tiny toolbar icons, likely only one or two of which actually have badges displayed, and are frequently visibile, hence in memory anyway.\n\nHowever, if you have a use-case that makes this non-desirable, pull requests are welcome :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjamin-dobell%2Freact-native-android-toolbar-badge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenjamin-dobell%2Freact-native-android-toolbar-badge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjamin-dobell%2Freact-native-android-toolbar-badge/lists"}