React Navigation の TabBar の文字が勝手に大文字にならないようにする

デフォルトのままだと、タブの英字が勝手に全部大文字になるので、その制御を外す方法です。

解決方法は以下のようにtextTransform: 'none', を設定することです。

TopTab.Screen

options={{
            tabBarLabelStyle: {
              textTransform: 'none',
            },
          }}

もう少し広くコードを見ると以下のようになります。

TopTabNavigator.tsx

export default function TopTabNavigator() {
  return (
    <TopTab.Navigator>
      {topTabProps.map((topTabProp) => (
        <TopTab.Screen
          key={topTabProp.tabId}
          name={topTabProp.name}
          component={SwipeableRowList}
          options={{
            tabBarLabelStyle: {
              textTransform: 'none',
            },
          }}
        />
      ))}
    </TopTab.Navigator>
  );
}

これでタブの文字は name に設定したままで表示されます。

参考

Change Tab Title Case · Issue #814 · react-navigation/react-navigation

GitHub