React Navigationのタブバーのバッジが見えないので背景色を変える

Posted at 2020-09-14

React Navigationのタブバーのアイコンにバッジを表示したくて調べてみたところ、tabBarBadgeというオプションがあるのを発見しました。

このオプション、@react-navigation/bottom-tabsが5.6.1では存在しなかったような気がするのですが、5.8.0にバージョンを上げたところ使えるようになっていました。

早速tabBarBadgeを試してみたところ、文字色が白で背景色が透明？なのか思うように表示されません。以下のアイコンの右上に"4"てバッジが表示されているはずなんですけどわかるでしょうか？

色の変更については公式ドキュメントにも特に記載が見当たりません。ググってみたところ、以下のチケットで解決方法についてコメントを書いている人を発見しました。

NavigationContainerにthemeを設定すると、文字色が白で背景色が赤となり綺麗に表示されました。

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    notification: 'red',
  },
}

<NavigationContainer theme={MyTheme}>
...
</NavigationContainer>

なお、tabBarBadgeにゼロ"0"を指定するとゼロがそのまま表示されてしまいます。バッジを表示したくない場合はundefinedを指定しましょう。

        options={{
          title: 'AAA',
          tabBarIcon: tabBarIconAAA,
          tabBarBadge: someCondition ? undefined : 1,
        }}

Why not login to Qiita and try out its useful features?