React Native の Top Tab Navigator の末尾のタブに＋（プラス）アイコンを設定する

元々は以下のようなコードになっています。表示されているタブの最後に「＋」ボタンを表示させたいと思っています。

TopTabNavigator.tsx

import MemoListScreen from '../screens/MemoListScreen';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { Text } from 'react-native';

const Tab = createMaterialTopTabNavigator();

interface TabScreenProp {
  name: string;
  tabId: string;
}

const tabScreenProps: TabScreenProp[] = [
  { name: 'TodoList', tabId: '123' },
  { name: 'Memo', tabId: '456' },
  { name: 'Tasks', tabId: '789' },
  { name: '買い物', tabId: '101112' },
  { name: '下書き', tabId: '131415' },
  {
    name: '長い長いタブの名前はどうなるのかな？',
    tabId: '131415',
  },
];
export default function TopTabNavigator() {
  return (
    <Tab.Navigator screenOptions={{ tabBarScrollEnabled: true, tabBarItemStyle: { width: 160 } }}>
      {tabScreenProps.map((tabScreenProp) => (
        <Tab.Screen
          key={tabScreenProp.name}
          name={tabScreenProp.name}
          component={MemoListScreen}
          initialParams={{ tabId: tabScreenProp.tabId }}
          options={{
            tabBarLabel: ({ focused, color }) => (
              <Text numberOfLines={1} ellipsizeMode="tail" style={{ color }}>
                {tabScreenProp.name}
              </Text>
            ),
          }}
        />
      ))}
    </Tab.Navigator>
  );
}

@expo/vector-icons でアイコンを探す

Expo のプロジェクトでは @expo/vector-icons を使うのが便利です。以下のページから使いたいアイコンを探しましょう。

参考

@expo/vector-icons directory

アイコンをタブに設定する

options プロパティを使えば、 Tab にアイコンを設定できます。

TabBar.tsx

<Tab.Screen
        key={'add-uuid'}
        name={'add-uuid'}
        component={TopTabAddScreen}
        initialParams={{ tabId: 'add' }}
        options={{
          tabBarLabel: ({ focused, color }) => <Entypo name="plus" size={24} color={color} />,
        }}
      />

以下のように表示されます。

コード全体は以下のとおりです。

TopTabNavigator.tsx

import MemoListScreen from '../screens/MemoListScreen';
import TopTabAddScreen from '../screens/TopTabAddScreen';
import TopTabSettingScreen from '../screens/TopTabSettingScreen';
import { Entypo, SimpleLineIcons } from '@expo/vector-icons';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { Text } from 'react-native';

const Tab = createMaterialTopTabNavigator();

interface TabScreenProp {
  name: string;
  tabId: string;
}

const tabScreenProps: TabScreenProp[] = [
  { name: 'TodoList', tabId: '123' },
  { name: 'Memo', tabId: '456' },
  { name: 'Tasks', tabId: '789' },
  { name: '買い物', tabId: '101112' },
  { name: '下書き', tabId: '131415' },
  {
    name: '長い長いタブの名前はどうなるのかな？',
    tabId: '131415',
  },
];
export default function TopTabNavigator() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarScrollEnabled: true,
        tabBarItemStyle: { maxWidth: 160 },
      }}
    >
      {tabScreenProps.map((tabScreenProp) => (
        <Tab.Screen
          key={tabScreenProp.name}
          name={tabScreenProp.name}
          component={MemoListScreen}
          initialParams={{ tabId: tabScreenProp.tabId }}
          options={{
            tabBarLabel: ({ focused, color }) => (
              <Text numberOfLines={1} ellipsizeMode="tail" style={{ color }}>
                {tabScreenProp.name}
              </Text>
            ),
          }}
        />
      ))}
      <Tab.Screen
        key={'add-uuid'}
        name={'add-uuid'}
        component={TopTabAddScreen}
        initialParams={{ tabId: 'add' }}
        options={{
          tabBarLabel: ({ focused, color }) => <Entypo name="plus" size={24} color={color} />,
        }}
      />
      <Tab.Screen
        key={'setting-uuid'}
        name={'setting-uuid'}
        component={TopTabSettingScreen}
        initialParams={{ tabId: 'add' }}
        options={{
          tabBarLabel: ({ focused, color }) => (
            <SimpleLineIcons name="settings" size={24} color="black" />
          ),
        }}
      />
    </Tab.Navigator>
  );
}