タブの1つだけにアイコンを表示したい

Question

やりたいこと:
上部のタブで、1つのタブだけにアイコンを表示させたい （他の2つはテキストのみ)

実装:
react-navigation-tabsのcreateMaterialTopTabsを使用

困っていること:
showIcons: true にすると、アイコンを表示させないタブにアイコン分の余白ができる

コード:

export default createMaterialTopTabNavigator(
  {
    tab1: screen1,
    tab2: screen2,
    tab3: {
      screen: screen3,
      navigationOptions: {
        tabBarIcon: <Icon name="filter" color="#777776" size={25} />,
      },
    },
  },
  {
    tabBarOptions: {
      activeTintColor: '#E91818',
      inactiveTintColor: '#777777',
      indicatorStyle: {
        backgroundColor: '#E91818',
        height: 3,
      },
      showIcon: true,
      tabStyle: {
        flexDirection: 'row',
      },
      labelStyle: {
        alignItems: 'center',
        textAlign: 'center',
      },
      style: {
        backgroundColor: '#fff',
        marginLeft: 20,
        marginRight: 20,
        elevation: 0, // remove shadow
        borderBottomColor: '#F5F4F4',
      },
    },
  }
);

Answer 1

https://bagelee.com/programming/react-native/react-navigation-customize/

あまりスマートな方法ではないですが、こちらのサイトのように、tabBarComponentを利用して
タブ3だけアイコンを表示することで実現可能ではあります。