React Native Bottom Tabs Add Padding Vertical

Question

How can I add padding vertical in my bottom tab?

Currently my bottom tab looks like this.

I want to do something like this where it has some nice spacing vertically.

However, if I add this paddingVertical:

The bottom tab will now look like this.

Answer 1

So first you need to create Tab.Screen

You need to give the style in it if you need some space between pictures and labels. I'll show you my code

This is what my bottom navigation looks like

<Tab.Screen
    name={screenName}
    component={componentName}
    options={{
        tabBarItemStyle: { styles.tabBarStyle },
        headerShown: false,
        tabBarLabelStyle: { bottom: '12%' },
        tabBarIcon: ({ focused }) => (
            <View
                style={[
                    styles.tabBarIcon,
                ]}>
                <Image
                    source={iconPath}
                    resizeMode="contain"
                    style={{
                        width: 20,
                        height: 20,
                        tintColor: focused && isTabFocused
                            ? AppColors.MAIN_COLOR
                            : AppColors.WHITE_COLOR,
                    }}
                />
            </View>
        ),
    }} />