Tab Navigationのアイコン表示をすっきり書く方法

はじめに

スマホアプリを作る際によく出てくるのがアイコンを使ったナビゲーション。
今回はReactNavigationの公式ドキュメントに載っているコードをすっきり見やすく書いてみたので紹介します。

＜使用するもの＞
・React Native
・NavigationContainer
・createBottomTabNavigator
・@expo/vector-icons

公式

こちらの公式ドキュメントではこんな感じで書いてあります。(focusedは今回除きました)

<Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = 'ios-information-circle';
            } else if (route.name === 'Settings') {
              iconName = 'ios-list';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>

screenの名前をもとにif文で表示させるアイコンを分岐させています。

すっきり書いてみた

const TAB_ICON = {
    Home: 'ios-information-circle',
    Settings: 'ios-list',
};
const createScreenOptions = ({ route }) => {
    const iconName = TAB_ICON[route.name];
    return {
        tabBarIcon: ({ size, color }) => (
            <Ionicons name={iconName} size={size} color={color} />
        )
    };
};

createScreenOptionsをscreenOptions={}に入れてあげれば公式ドキュメントと同じ動きをします。