Indicator Glitch in React native scrollspy

I am experiencing an issue with the tab indicator on Android when tabs autoscroll. The indicator disappears during the autoscroll process, and when I manually scroll the tabs back to their initial position, the indicator reappears at that position.

This issue does not occur on iOS, where the code functions as expected. I have attempted several solutions, such as removing the indicator from the ListHeaderComponent and displaying it externally, but I have not been able to resolve the problem.

I have included both the code and a GIF demonstrating the behavior. If anyone has encountered a similar issue or has any suggestions for resolving this, I would greatly appreciate your insights.

Thank you in advance for your help!

import { ThemedText } from "@/components/ThemedText";
import { ThemedView } from "@/components/ThemedView";
import { faker } from "@faker-js/faker";
import React, { useEffect, useRef, useState, useCallback } from "react";
import {
  FlatList,
  Image,
  LayoutRectangle,
  SectionList,
  StyleSheet,
  TouchableOpacity,
  useWindowDimensions,
  ViewToken,
} from "react-native";
import Animated, {
  AnimatedProps,
  interpolate,
  runOnJS,
  SharedValue,
  useAnimatedScrollHandler,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from "react-native-reanimated";
import getItemLayout from "react-native-get-item-layout-section-list";
import { useSafeAreaInsets } from "react-native-safe-area-context";

faker.seed(123);
const AnimatedSectionList = Animated.createAnimatedComponent(SectionList);
const getRandomData = () =>
  [...Array(faker.number.int({ min: 2, max: 5 }))].map(() => ({
    key: faker.string.uuid(),
    song: faker.music.songName(),
    artist: faker.music.artist(),
    album: faker.music.album(),
    cover: faker.image.personPortrait(),
  }));

const _sections = [...Array(5).keys()].map((index) => ({
  key: faker.string.uuid(),
  title: faker.music.genre(),
  data: getRandomData(),
  sectionIndex: index,
}));

const _spacing = 12;
const _indicatorSize = 4;
const ITEM_HEIGHT = 99;
const SECTION_HEADER_HEIGHT = 46;

const buildGetItemLayout = getItemLayout({
  getItemHeight: ITEM_HEIGHT,
  getSectionHeaderHeight: SECTION_HEADER_HEIGHT,
});

type TabsLayout = Record<number, LayoutRectangle>;

// Memoized list item component
const DummyItem = React.memo(
  ({ item }: { item:any}) => (
    <ThemedView style={styles.itemContainer}>
      <ThemedView style={{ gap: _spacing, flexDirection: "row" }}>
        <Image
          source={{ uri: item.cover }}
          style={{
            height: 50,
            aspectRatio: 1,
            borderRadius: _spacing / 2,
            borderWidth: 2,
            borderColor: "rgba(255,255,255,0.5)",
          }}
        />
        <ThemedView style={{ flex: 1, justifyContent: "space-between" }}>
          <ThemedText style={styles.artistText}>{item?.artist}</ThemedText>
          <ThemedText style={styles.songText}>{item?.song}</ThemedText>
          <ThemedText style={styles.albumText}>{item?.album}</ThemedText>
        </ThemedView>
      </ThemedView>
    </ThemedView>
  )
);

function Indicator({ measurements }: { measurements: LayoutRectangle }) {

  const _stylez = useAnimatedStyle(() => ({
    width: withTiming(measurements.width, { duration: 150 }),
    left: withTiming(measurements.x, { duration: 150 }),
    top: measurements.height,
  }));

  return <Animated.View style={[styles.indicator, _stylez]} />;
}

const Tabs = React.memo(
  ({
    activeSectionIndex,
    onTabPress,
  }: {
    activeSectionIndex: number;
    onTabPress: (index: number) => void;
  }) => {
    const _tabsLayout = useRef<TabsLayout>({});
    
    const ref = useRef<FlatList>(null);
    const [isDoneMeasuring, setIsDoneMeasuring] = useState(false);

    const scrollToIndex = useCallback((index: number) => {
      ref.current?.scrollToIndex({
        index,
        animated: true,
        viewPosition: 0.5,
      });
    }, []);

    useEffect(() => {
      scrollToIndex(activeSectionIndex);
    }, [activeSectionIndex, scrollToIndex]);

    const renderTabItem = useCallback(
      ({ item, index }: { item: (typeof _sections)[0]; index: number }) => (
        <TouchableOpacity onPress={() => onTabPress(index)}>
          <ThemedView style={styles.tabItem}>
            <ThemedText style={styles.tabText}>{item?.title}</ThemedText>
          </ThemedView>
        </TouchableOpacity>
      ),
      [onTabPress]
    );

    return (
      <FlatList
        ref={ref}
        data={_sections}
        initialNumToRender={5}
        maxToRenderPerBatch={5}
        windowSize={21}
        getItemLayout={(_, index) => ({
          length: _tabsLayout.current[index]?.width || 0,
          offset: _tabsLayout.current[index]?.x || 0,
          index,
        })}
        CellRendererComponent={({ children, index, ...rest }) => (
          <ThemedView
            {...rest}
            onLayout={(e) => {
              _tabsLayout.current[index] = e.nativeEvent.layout;
              if (
                Object.keys(_tabsLayout.current).length === _sections.length &&
                !isDoneMeasuring
              ) {
                setIsDoneMeasuring(true);
              }              
            }}
          >
            {children}
          </ThemedView>
        )}
        renderItem={renderTabItem}
        horizontal
        style={styles.tabsContainer}
        showsHorizontalScrollIndicator={false}
        scrollEventThrottle={16}
        contentContainerStyle={styles.tabsContent}
        ListHeaderComponent={
          isDoneMeasuring ? (
            <Indicator measurements={_tabsLayout.current[activeSectionIndex]} />
          ) : null
        }
        ListHeaderComponentStyle={styles.indicatorPosition}
      />
    );
  }
);

const _headerHeight = 350;
const _headerTabsHeight = 49;
const _headerTopNav = 80;
const _headerImageHeight = _headerHeight - _headerTabsHeight;
const _topThreshold = _headerHeight - _headerTopNav;

const ScrollHeader = React.memo(
  ({
    selectedSection,
    onTabPress,
    scrollY,
  }: {
    selectedSection: number;
    onTabPress: (index: number) => void;
    scrollY: SharedValue<number>;
  }) => {
    const { top } = useSafeAreaInsets();

    const headerStylez = useAnimatedStyle(() => ({
      transform: [
        {
          translateY: interpolate(
            scrollY.value,
            [-1, 0, 1, _topThreshold - 1, _topThreshold],
            [1, 0, -1, -_topThreshold, -_topThreshold]
          ),
        },
      ],
    }));

    const imageStyles = useAnimatedStyle(() => ({
      opacity: interpolate(
        scrollY.value,
        [-1, 0, _headerImageHeight - 1, _headerImageHeight],
        [1, 1, 0.3, 0]
      ),
      transform: [
        {
          scale: interpolate(
            scrollY.value,
            [-1, 0, 1],
            [1 + 1 / _headerHeight, 1, 1]
          ),
        },
      ],
    }));

    return (
      <Animated.View style={[styles.headerContainer, headerStylez]}>
        <Animated.Image
          source={{
            uri: "https://images.pexels.com/photos/7497788/pexels-photo-7497788.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
          }}
          style={[styles.headerImage, imageStyles]}
          resizeMode="cover"
        />
        <Tabs activeSectionIndex={selectedSection} onTabPress={onTabPress} />
      </Animated.View>
    );
  }
);

const Home = () => {
  const [selectedSection, setSelectedSection] = useState(0);
  const activeSectionIndexRef = useRef(0);
  const scrollingFromTabPress = useRef(false);
  const sectionRef = useRef<SectionList>(null);
  const { height } = useWindowDimensions();
  const scrollY = useSharedValue(0);

  const setScrollingFromTabPress = useCallback((value: boolean) => {
    scrollingFromTabPress.current = value;
  }, []);

  const onScroll = useAnimatedScrollHandler({
    onScroll: (e) => {
      scrollY.value = e.contentOffset.y;
    },
    onBeginDrag: () => {
      runOnJS(setScrollingFromTabPress)(false);
    },
  });

  const scrollToSection = useCallback((index: number) => {
    sectionRef.current?.scrollToLocation({
      itemIndex: 0,
      sectionIndex: index,
      animated: true,
      viewOffset: 0,
      viewPosition: 0,
    });
  }, []);

  const handleViewableItemsChanged = useCallback(
    ({ viewableItems }: { viewableItems: ViewToken[] }) => {
      if (scrollingFromTabPress.current) return;

      const section = viewableItems[0]?.section;
      if (!section) return;

      const { sectionIndex } = section as (typeof _sections)[0];
      if (sectionIndex !== selectedSection) {
        activeSectionIndexRef.current = sectionIndex;
        setSelectedSection(sectionIndex);
      }
    },
    [selectedSection]
  );

  const viewabilityConfig = useRef({
    minimumViewTime: 50,
    itemVisiblePercentThreshold: 50,
    waitForInteraction: true,
  }).current;

  return (
    <ThemedView style={styles.container}>
      <AnimatedSectionList
        ref={sectionRef as any}
        sections={_sections}
        keyExtractor={(item:any) => item.key}
        renderItem={({ item }) => <DummyItem item={item} />}
        contentContainerStyle={[
          styles.sectionListStyle,
          { paddingBottom: height / 3, paddingTop: _headerHeight },
        ]}
        renderSectionHeader={({ section: { title } }:{section:any}) => (
          <ThemedView style={styles.sectionHeader}>
            <ThemedText style={styles.sectionHeaderText}>{title}</ThemedText>
          </ThemedView>
        )}
        getItemLayout={buildGetItemLayout}
        onViewableItemsChanged={handleViewableItemsChanged}
        viewabilityConfig={viewabilityConfig}
        onScroll={onScroll}
        scrollEventThrottle={16}
        initialNumToRender={10}
        maxToRenderPerBatch={10}
        windowSize={21}
        bounces={false}
        removeClippedSubviews={true}
        stickyHeaderHiddenOnScroll
      />
      <ScrollHeader
        scrollY={scrollY}
        onTabPress={(index) => {
          if (selectedSection !== index) {
            setSelectedSection(index);
            scrollToSection(index);
            scrollingFromTabPress.current = true;
          }
        }}
        selectedSection={selectedSection}
      />
    </ThemedView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  itemContainer: {
    padding: _spacing,
    borderBottomWidth: 1,
    borderBottomColor: "rgba(0,0,0,0.05)",
  },
  songText: {
    fontSize: 16,
    fontWeight: "bold",
  },
  albumText: {
    fontSize: 10,
    opacity: 0.3,
  },
  sectionListStyle: {},
  artistText: {
    fontSize: 14,
    opacity: 0.3,
  },
  sectionHeader: {
    backgroundColor: "#fff",
    paddingVertical: _spacing * 2,
    paddingHorizontal: _spacing,
  },
  sectionHeaderText: {
    fontSize: 18,
    fontWeight: "700",
  },
  indicator: {
    height: _indicatorSize,
    backgroundColor: "#000",
  },
  tabsContainer: {
    flexGrow: 0,
    paddingBottom: _indicatorSize,
    height: _headerTabsHeight,
  },
  tabsContent: {
    gap: _spacing * 2,
    paddingHorizontal: _spacing,
  },
  indicatorPosition: {
    position: "absolute",
  },
  tabItem: {
    paddingVertical: _spacing,
  },
  tabText: {
    fontWeight: "600",
  },
  headerContainer: {
    height: _headerHeight,
    position: "absolute",
    backgroundColor: "#fff",
    top: 0,
    left: 0,
    right: 0,
  },
  headerImage: {
    height: _headerImageHeight,
    width: "100%",
  },
});

export default Home;