How to increase the tabbar height of a react navigation tabBar without automatically changing position of tabBarIcon and tabBarLabel in React Native?

When I change the height of the tabBar I'm getting the strange result, that the tabBarIcon and the tabBarLabel move apart from each other and do not stay together in the center of the tabBar. For example when increasing it, it results in the following picture:

Screenshot of the result

I tried many things to fix it in a way that they will stay together even if the height of the tabbar is changing, but I were not able find a nice solution. I appears both on android and ios. Can anybody help on this issue? This is my current code:

<NavigationContainer>
     <Tab.Navigator screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName: string = "";

            if (route.name === TRANSLATIONS.navigation.tabBar.dashboard) {
              iconName = 'ios-clipboard'
            } else if (route.name === TRANSLATIONS.navigation.tabBar.search) {
              iconName ='md-search';
            } else if (route.name === TRANSLATIONS.navigation.tabBar.offer) {
              size = 35
              iconName ='ios-add';
            } 

            return <Ionicons name={iconName} size={size} color={color} />;
          },
       })}
       tabBarOptions={{
          activeTintColor: THEME.colors.greenPrimary,
          inactiveTintColor: THEME.colors.grey,
          keyboardHidesTabBar: true,
          style: {
            height: 100, 
          },
          
       }}>

       <Tab.Screen name={TRANSLATIONS.navigation.tabBar.search} component={SearchStack} options={({ route }) => ({tabBarVisible: getTabBarVisible(route) })}/>
       <Tab.Screen name={TRANSLATIONS.navigation.tabBar.dashboard} component={DashboardStack} options={({ route }) => ({tabBarVisible: getTabBarVisible(route) })} />
       <Tab.Screen name={TRANSLATIONS.navigation.tabBar.offer} component={OfferStack} options={({ route }) => ({tabBarVisible: getTabBarVisible(route) })}/>
     </Tab.Navigator>
   </NavigationContainer>