Indicator growing when scrolling between tabs on certain devices

[OscarBlackbullion]

Issue

I'm having an issue with my customised MaterialTabBar where on certain devices (e.g. an iPhone 13 mini) the indicator seems to grow/extend when scrolling on the header. This issue doesn't occur when navigating between the tabs by tapping, except for when tapping the tab that is partially off-screen and the auto-scroll happens, in which case the bar seems to extend/grow again.

Video

The video below is taken form an iPhone 13 mini:

Screen.Recording.2024-10-16.at.09.49.00.mov

Code snippet

import * as emoji from 'node-emoji';
import { useState } from 'react';
import { View } from 'react-native';
import { MaterialTabBar, MaterialTabBarProps, Tabs } from 'react-native-collapsible-tab-view';

import tw, { getColour } from '~/styles/tw';
import Heading from '~/components/typography/Heading';

import ActivityTab from './ActivityTab';
import ExpensesTab from './ExpensesTab';
import MembersTab from './MembersTab';
import YourSummaryTab from './YourSummaryTab';

const TAB_MARGIN = 24;

const renderTabBar = (props: MaterialTabBarProps<string>) => (
  <MaterialTabBar
    {...props}
    activeColor={getColour('brand-accent')}
    inactiveColor={getColour('tonal-10')}
    labelStyle={tw('font-book text-[15px] m-0')}
    getLabelText={(name) => name}
    tabStyle={tw(`w-auto px-${TAB_MARGIN / 2}`)}
    scrollEnabled
    style={tw('bg-tonal-70')}
    indicatorStyle={tw('bg-brand-accent')}
  />
);

const Header = ({ group }) => {
  return (
    <View style={tw('items-center pb-16 bg-tonal-70')}>
      <Heading size='3xl'>{emoji.get(group.icon)}</Heading>
      <Heading>{group.name}</Heading>
    </View>
  );
};

const GroupsTabbedView = ({ group }) => {
  const [routes] = useState([
    { key: 'summary', title: 'Your summary', component: YourSummaryTab },
    { key: 'expenses', title: 'Expenses', component: ExpensesTab },
    { key: 'members', title: 'Members', component: MembersTab },
    { key: 'activity', title: 'Activity', component: ActivityTab }
  ]);

  return (
    <View style={tw('flex-1 h-full -mx-16')}>
      <Tabs.Container renderHeader={() => <Header group={group} />} renderTabBar={(props) => renderTabBar(props)}>
        {routes.map((route) => (
          <Tabs.Tab key={route.key} name={route.title}>
            <Tabs.ScrollView>{route.component()}</Tabs.ScrollView>
          </Tabs.Tab>
        ))}
      </Tabs.Container>
    </View>
  );
};

export default GroupsTabbedView;