【React Native】Expoでタブfocus時のテキストカラーを変える方法

Expoを使ってReact Nativeの勉強を始めましたが、しょっぱなからつまづいたので覚書です。

タブ選択時初期状態

まずはデフォルトの状態がこちら。

↑選択しているタブ「Home」のアイコン、テキストカラーが青です。

これを別の色に変えていきます。

タブ選択時(focus)のテキストカラーを変える

/navigation/MainTabNavigator.jsを編集します。

MainTabNavigator.js編集前

export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
});

↑の部分を↓

MainTabNavigator.js編集後

export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
},{
  tabBarOptions: { activeTintColor:'red'}, // 追加箇所
});
};

に変更します。
tabBarOptions: { activeTintColor:'red'},
を追加しました。redのところに好きな色を入れてください。

すると…

↑選択時（focus）時の色が変わりました！

おまけ：　アイコンの色も変える

constants/Colors.js

const tintColor = '#2f95dc';

↑「#2f95dc」を変えると

constants/Colors.js

tabIconSelected: tintColor,

に色が入るので

青いアイコンがピンクになりました！！

---

参考：https://github.com/react-navigation/react-navigation/issues/1781