This is image which show my problem

I don’t know why but this text look like this and i don’t know which component is above label and so on…

import React from 'react';
import {
    createMaterialTopTabNavigator,
    MaterialTopTabNavigationOptions,
    MaterialTopTabNavigationEventMap,
} from '@react-navigation/material-top-tabs';
import { withLayoutContext } from 'expo-router';
import { ParamListBase, TabNavigationState } from '@react-navigation/native';

const { Navigator } = createMaterialTopTabNavigator();

export const MaterialTopTabs = withLayoutContext<
    MaterialTopTabNavigationOptions,
    typeof Navigator,
    TabNavigationState<ParamListBase>,
    MaterialTopTabNavigationEventMap
>(Navigator);
<MaterialTopTabs
            screenOptions={{
                tabBarStyle: {
                    backgroundColor: '#161622',
                    paddingHorizontal: 'auto',
                    paddingTop: 16,
                    width: '100%',
                },
                tabBarItemStyle: {
                    minWidth: 'auto',
                },
                tabBarIndicatorStyle: {
                    backgroundColor: '#A8DADC',
                },
                tabBarLabelStyle: {
                    fontSize: 16, // Customize font size if needed
                    fontFamily: 'Poppins-SemiBold',
                    textAlign: 'center',
                    color: '#B0B0B0',
                },
                tabBarPressOpacity: 0.7,
            }}
        >

Please help me to make it look like it should (space between) or grid 3fr and every text show as 1fr