[How-To/Expo Rotuer] tabBarのレイアウトを中央寄せに調整する

詳細は割愛いたします！

tabBarのアイコンとラベルを中央寄せに変更する。

Before

基本的に下向きに偏ったレイアウトを変更する。

After

TabBarIcon のスタイルを調子する

TabBarIconMi、TabBarIconMci コンポーネントを作成し、それぞれのスタイルに style={{marginBottom: -5}} 設定を追加する。(数字は任意)

// src/components/TabBarIcon.tsx

import React from 'react';
import {MaterialIcons, MaterialCommunityIcons} from '@expo/vector-icons';

export function TabBarIconMi(props: {
  name: React.ComponentProps<typeof MaterialIcons>['name'];
  color: string;
}) {
  return <MaterialIcons size={25} style={{marginBottom: -5}} {...props} />;
}

export function TabBarIconMci(props: {
  name: React.ComponentProps<typeof MaterialCommunityIcons>['name'];
  color: string;
}) {
  return (
    <MaterialCommunityIcons size={25} style={{marginBottom: -5}} {...props} />
  );
}

tabBarLabelStyleを調整する

Tabs > screenOptions > tabBarLabelStyle: {paddingBottom: 5} 設定を追加する。

// app/(tabs)/_layout.tsx

...
export default function TabLayout() {
  const {colors} = useTheme();
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: colors.primary,　　　　// <-- 追加する（任意）
        tabBarLabelStyle: {paddingBottom: 5},   // <-- 追加する
      }}>
      <Tabs.Screen
        name="index"
        options={{
          title: 'TAB ONE',
...

アプリをリロードして変更内容を確認する。