【React Native】「react-native-app-badge」でアプリアイコンのバッヂ数を管理する

React Native で、アプリアイコンの右上に表示される通知数を管理するために「react-native-app-badge」というライブラリを導入したので使い方についてまとめ。

GitHub のページはこちらです。

GitHub – hoang-nguyen2-niteco/react-native-app-badge: Badge for the shortcut icon in your React Native Android Apps
https://github.com/hoang-nguyen2-niteco/react-native-app-badge

 

ライブラリの導入方法ですが、まずは下記のインストールコマンドを実行します。

npm install react-native-app-badge --save

上記コマンドの実行が完了したら、あとは任意のタイミングでバッヂ数の取得と設定を行うだけです!
バッヂ数の設定と取得は、下記のサンプルコードをご参考ください。

import ShortcutBadge from 'react-native-app-badge';

// バッヂ数を +1 する処理
const count = await ShortcutBadge.getCount();
ShortcutBadge.setCount(count + 1);

なお、GitHub に掲載していたサンプルコードでは、バッヂ数の取得は下記のように記述してあったのですが、私の環境では動作しなかったので、上記のように書き直ました。

// バッヂ数を +1 する処理 ※私の環境では動作しませんでした
ShortcutBadge.getCount((count) => {
  ShortcutBadge.setCount(count + 1);
});

ですが、私のコードが間違っている可能性もなくはないので、実装の際は、まず GitHub の参考コードからお試しくださいますようお願いします。

 

以上、React Native で アプリアイコンのバッヂ数を管理できるライブラリ「react-native-app-badge」の実装方法についてでした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG