When scrollEnabled=true, tabs don't expand to full width of screen

[jaybuangan]

I'm having an issue where I only have two tabs. When i set scrollEnable=true, it doesn't expand to the full width of the screen. it keeps it roughly the size of the tab label , and leaves the rest of the tab area empty.

scrollEnable={true}:

scrollEnable={false}:

Code:

import React from 'react';
import { View, Text } from 'react-native';
import { Tabs, MaterialTabBar } from 'react-native-collapsible-tab-view';

import ScheduleScreen from './ScheduleScreen';

export const ScheduleTabs = () => {
    return (
        <Tabs.Container
            headerHeight={100}
            TabBarComponent={(props) => <MaterialTabBar {...props} scrollEnabled />}
        >
            <Tabs.Tab name="article" label="Article">
                <View>
                    <Text>Article Text</Text>
                </View>
            </Tabs.Tab>
            <Tabs.Tab name="albums" label="Albums">
                <View>
                    <Text>Article Text </Text>
                </View>
            </Tabs.Tab>
        </Tabs.Container>
    );
};

If i knew that the tabs would always be set to 2, then i'd always set scrollEnabled={false} but there are times where the tabs could go up to 5 and I would need it to scroll. Then scrollEnabled={true} does its job.

Am I missing a property?

[andreialecu]

This is by design. If the tab labels are made to fit the width of the screen then when would they start scrolling?

You could use a condition like scrollEnabled={numTabs > 5}

[jaybuangan]

@andreialecu Ok. I'll play around with that. Thanks!