react native icon too big

Question

I have used this for my navigation: https://reactnavigation.org/docs/material-top-tab-navigator

And set it to the bottom, set Icons it looks beautiful. But If I change the Icon Size from 22 to 32, then I only see more than a half of the Icon. How can I fix this ? I didnt find anything how I can fix this.

thank your for your help

import React, { useState } from 'react';
import { StyleSheet } from 'react-native';
import * as Font from 'expo-font';
import { createStackNavigator, HeaderTitle } from '@react-navigation/stack';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { NavigationContainer } from '@react-navigation/native';
import AppLoading from 'expo-app-loading';
import { FontAwesome5, AntDesign } from '@expo/vector-icons'; 
import Shopping from './screens/shopping';
import Discover from './screens/discover';
import Product from './screens/product';
import Search from './screens/search';
import Profile from './screens/profile';

const Tab = createMaterialTopTabNavigator();
const Stack = createStackNavigator();

const AppTabs = () => {
  return (
    <Tab.Navigator
    shifting={true}
    tabBarPosition="bottom"
    activeColor={true}
    tabBarOptions={
    {
      tabStyle: {
        backgroundColor: '#fff',
        padding: 6,
        margin: 2
      },
      indicatorStyle:{backgroundColor: 'red'},
      showLabel: false,
      activeTintColor: '#333',
      labelStyle: {
        fontSize: 32
      },
      iconStyle: {
        color: '#333',
      },
      showIcon: true
    }
    }
  >
    <Tab.Screen
      name="Home"
      component={Discover}
      iconStyle={true}
      activeColor={true}
      options={{
        tabBarColor: 'blue',
        tabBarIcon: ({ focused, color }) => (
         <FontAwesome5 name="globe" size={22} color="black"/>
        ),
      }}
    />
    <Tab.Screen 
      name="Search"
      component={Search}
      iconStyle={true}
      activeColor={true}
      options={{
        tabBarLabel: 'Suche',
        tabBarColor: 'red',
        tabBarIcon: ({ focused, color }) => (
          <AntDesign name="search1" size={22} color="black" />
        )
      }}
      />
    <Tab.Screen 
      name="Product"
      component={Product}
      iconStyle={true}
      activeColor={true}
      options={{
        tabBarLabel: 'Plus',
        tabBarColor: 'red',
        tabBarIcon: ({ focused, color }) => (
          <AntDesign name="pluscircle" size={36} color="red" />
        )
      }}
      />
    <Tab.Screen 
      name="Shopping"
      component={Shopping}
      iconStyle={true}
      activeColor={true}
      options={{
        tabBarLabel: 'Plus',
        tabBarColor: 'red',
        tabBarIcon: ({ focused, color }) => (
          <AntDesign name="shoppingcart" size={22} color="black" />
        )
      }}
      />
    <Tab.Screen 
      name="Profile"
      component={Profile}
      iconStyle={true}
      activeColor={true}
      options={{
        tabBarLabel: 'Plus',
        tabBarColor: 'red',
        tabBarIcon: ({ focused, color }) => (
          <AntDesign name="user" size={22} color="black" />
        )
      }}
      />
    </Tab.Navigator>
  )
};

@ FIX:

        <View style={{
          flex: 1,
          width: width * 5
        }}>
          <AntDesign name="pluscircle" size={32} style={{width: '100%'}} color="red" />
        </View>