Glitchy header offset position on Android - offsets might not be syncing properly

[Ben Pearce]

Describe the bug

The header position is glitchy on Android when switching between tabs. It seems like the scroll offset is not synced properly between the tabs. Please see my code and video of behavior below:

Example behaviour of bug

android-header-glitch.mp4

MyTabView.tsx

export const MyTabView: React.FC = () => {
  const { width } = useWindowDimensions();

  const [index, setIndex] = React.useState(1);
  const [routes] = React.useState<TabViewRoute[]>([
    { key: 'tab0', title: 'Tab 0' },
    { key: 'tab1', title: 'Tab 1' },
    { key: 'tab2', title: 'Tab 2' },
  ]);

  // MyCustomFlatList is wrapped with React.memo as described by 
  // https://github.com/satya164/react-native-tab-view#optimization-tips
  const renderScene = ({ route }: { route: TabViewRoute }) => {
    switch (route.key) {
      case 'tab0':
        return <MyCustomFlatList index={0} />;
      case 'tab1':
        return <MyCustomFlatList index={1} />;
      case 'tab2':
        return <MyCustomFlatList index={2} />;
      default:
        return null;
    }
  };

  const renderTabBar = (props: MyCustomProps) => (
    <CustomTabBar {...props} currentRoute={routes[index].key} />
  );

  // MyCustomHeader is also wrapped with React.memo like above
  // it returns a react-native-snap-carousel component
  // https://www.npmjs.com/package/react-native-snap-carousel
  const renderScrollHeader = () => <MyCustomHeader />;

  return (
    <CollapsibleHeaderTabView
      sceneContainerStyle={styles.sceneContainer}
      navigationState={{ index, routes }}
      initialLayout={{ width }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      renderTabBar={renderTabBar}
      renderScrollHeader={renderScrollHeader}
      headerHeight={247}
    />
  );
};

MyCustomFlatList.tsx

// 
export const MyCustomFlatList: React.FC<Props> = React.memo(
  ({  index, ...props }) => {
    const keyExtractor = (item: MyItem) => item.id.toString();

    const renderItem = ({ item }: { item: MyItem }) => {
        // ... render some components
    };

    // Some other logic, eg data fetching, onMomentumScrollBegin, onEndReached...

    return (
      <HFlatList
        index={index}
        contentContainerStyle={styles.contentContainer}
        initialNumToRender={7}
        data={MY_DATA}
        onMomentumScrollBegin={onMomentumScrollBegin}
        onScrollBeginDrag={onMomentumScrollBegin}
        onEndReached={onEndReached}
        onEndReachedThreshold={3}
        keyExtractor={keyExtractor}
        renderItem={renderItem}
      />
    );
  },
);

Expected behavior

Expect the header to be in sync between tabs. iOS is working perfectly.

Video of my app working as expected

ios-header.mp4

Package versions

• React: 17.0.2
• React Native: 0.67.3
• React-Native-Gesture-Handler: 2.6.0
• react-native-reanimated: 2.5.0
• react-native-tab-view: 3.1.1