CODEWITHSUNDEEP
cssreactjsreact-nativereact-navigationreact-navigation-top-tabs
Pieczasz
Pieczasz

Reputation: 1

React Native Material Top Tabs styling

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

Upvotes: 0

Views: 181

Answers (1)

Saumay Paul
Saumay Paul

Reputation: 425

screenOptions={{
            tabBarStyle: {
                backgroundColor: '#161622',
                paddingHorizontal: 16,
                paddingTop: 16,
                width: '100%',
            },
            tabBarItemStyle: {
                flex: 1,
            },
            tabBarIndicatorStyle: {
                backgroundColor: '#A8DADC',
            },
            tabBarLabelStyle: {
                fontSize: 16,
                fontFamily: 'Poppins-SemiBold',
                textAlign: 'center',
                color: '#B0B0B0',
            },
            tabBarPressOpacity: 0.7,
        }}

tabBarStyle:

paddingHorizontal is set to 16 to give some padding on the left and right. paddingTop remains 16.

tabBarItemStyle: flex: 1 ensures that each tab item takes up an equal portion of the available space, distributing the tabs evenly across the width. tabBarLabelStyle:

The label style settings remain the same to ensure text styling is consistent.

Upvotes: 0

Related Questions