React Native Custom Tab Bar With Vector Icons

Question

So after long hours of work, I finally got myself a custom tab bar. I should say that it was painful, I want my tab bars as children and print them.

I got the sample from https://reactnavigation.org/docs/bottom-tab-navigator/#tabbar I actually got the tabBarIcon function from options but don't know what to do with it.

here is my tab bar

<Tab.Navigator
            initialRouteName="Home"
            tabBar={(props: any) => <CustomTabBar {...props} />}
            screenOptions={{
                headerShown: false,
                tabBarStyle: {
                    backgroundColor: '#0000FF',
                    // elevation: 0.2,
                    height: 300,
                    position: 'absolute',
                    // borderTopColor: '#000',
                    // shadowColor: 'red',
                    // shadowOffset: { width: 0, height: 0.2 },
                    // shadowOpacity: 1,

                }
            }}
        >
            <Tab.Screen name="Home" component={Home}
                options={{
                    ...options,
                    tabBarIcon: ({ color, size }: any) => (
                        <MaterialCommunityIcons name="home-variant" color={color} size={size} />
                    ),
                }} />
            <Tab.Screen name="Search" component={Home}
                options={{
                    ...options,
                    tabBarIcon: ({ color, size }: any) => (
                        <SimpleLineIcons name="magnifier" color={color} size={size} />
                    ),
                }} />
            <Tab.Screen name="Library" component={Home}
                options={{
                    ...options,
                    tabBarIcon: ({ color, size }: any) => (
                        <MaterialCommunityIcons name="bookshelf" color={color} size={size} />
                    ),
                }} />
        </Tab.Navigator>

and my custom tab bar

import { whileStatement } from '@babel/types';
import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

const FocusedGradient = ['rgba(12,12,12,0.4)', 'rgba(0,0,0,0.4)', 'rgba(0,0,0,0.8)'];
const NotFocusedGradient = ['transparent', '#FFF'];

function CustomTabBar({ state, descriptors, navigation }: any) {
    const focusedOptions = descriptors[state.routes[state.index].key].options;

    if (focusedOptions.tabBarVisible === false) {
        return null;
    }

    return (
        <View style={{ position: 'absolute', bottom: 0, flexDirection: 'row', backgroundColor: 'transparent' }}>
            {state.routes.map((route: any, index: any) => {
                const { options } = descriptors[route.key];

                const label =
                    options.tabBarLabel !== undefined
                        ? options.tabBarLabel
                        : options.title !== undefined
                            ? options.title
                            : route.name;

                const isFocused = state.index === index;

                const onPress = () => {
                    const event = navigation.emit({
                        type: 'tabPress',
                        target: route.key,
                        canPreventDefault: true,
                    });

                    if (!isFocused && !event.defaultPrevented) {
                        navigation.navigate(route.name);
                    }
                };

                const onLongPress = () => {
                    navigation.emit({
                        type: 'tabLongPress',
                        target: route.key,
                    });
                };

                return (
                    <LinearGradient
                        colors={FocusedGradient}
                        style={{
                            flex: 1,
                            backgroundColor: '#66000000',

                        }}>
                        <TouchableOpacity
                            accessibilityRole="button"
                            accessibilityState={isFocused ? { selected: true } : {}}
                            accessibilityLabel={options.tabBarAccessibilityLabel}
                            testID={options.tabBarTestID}
                            onPress={onPress}
                            onLongPress={onLongPress}
                            style={{
                                minHeight: 50,
                                backgroundColor: '#66000000',
                                justifyContent: 'center',
                                alignItems: 'center',
                            }}>
                            <Text style={{ color: isFocused ? 'white' : '#CCCCCC' }}>
                                {label}
                            </Text>
                        </TouchableOpacity>
                    </LinearGradient>
                );
            })}
        </View>
    );
}

export default CustomTabBar;

and this is the options.tabBarIcon

function tabBarIcon(_ref3) {
          var color = _ref3.color,
              size = _ref3.size;
          return _react.default.createElement(_MaterialCommunityIcons.default, {
            name: "bookshelf",
            color: color,
            size: size,
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 74,
              columnNumber: 25
            }
          });
        }

I can just do options.tabBarIcon() but I need color and size props too

I want my vector icons inside my custom tab bar. How do I achieve that?