Как мне получить полностью настраиваемую панель вкладок в реагирующей навигации?

Question

Объяснение

Я хочу создать полностью настраиваемую панель вкладок, которая выглядит следующим образом:

Я знаю, что компонент react-navigation createBottomTabNavigator может использовать эту опцию tabBarComponent

Поэтому, если я создаю полностью пользовательский компонент, он имеет цвет фона, а также прикрепляется к нижней части. Так что, если я немного переместлю свой компонент, это действительно так, но также расширяется снизу. Как вы можете видеть здесь:

(красная граница - это мой пользовательский компонент с marginBottom, но, как вы можете видеть, он все еще прикреплен к нижней части. , поэтому я подумал, может быть, сделать backgroundColor прозрачным, но это ничего не делает. Вот как я это попробовал:

{
    tabBarComponent: TabBar,
    tabBarOptions: {
      activeTintColor: '#4F4F4F',
      inactiveTintColor: '#ddd',
      style: {
        backgroundColor: 'transparent',
      },
    },
  },

Каков наилучший способ добиться этого? Мне даже нужен TabNavigator или, может быть, другойнавигатор? Как установить прозрачный цвет фона?