Offset of Header in Virtualized List not respected

[dgocoder]

Describe the bug I'm using SpatialNavigationVirtualizedGrid and using header component. On initial render its visible however once a node is focused the offset isn't considered. Trying to show the header if scrolled up to the top.

To Reproduce

const renderCategory = useCallback(
    ({ item }: { item: { category: Category; index: number } }) => (
      <CategoryNode
        category={item.category}
        onSelect={() => onPress(item.category)}
      />
    ),
    [onPress],
  );

  const categoriesIndexed = useMemo(
    () => [
      { category: "Todas", index: 0 },
      ...categories.map((c, index) => ({ category: c, index: index + 1 })),
    ],
    [],
  );

  const Header = useCallback(
    () => (
      <SpatialNavigationNode>
        <View className="h-16 bg-pink-50">
          <Text
            style={{ fontSize: 20 }}
            className="pb-2 font-medium text-white"
          >
            Categorias
          </Text>
        </View>
      </SpatialNavigationNode>
    ),
    [],
  );

  return (
    <Screen>
      <SpatialNavigationScrollView
        offsetFromStart={140}
        style={{ backgroundColor: "black" }}
      >
        <View
          style={{ height: Dimensions.get("screen").height }}
          className="bg-black pr-4"
        >
          <SpatialNavigationVirtualizedGrid
            data={categoriesIndexed}
            style={{ backgroundColor: "#000000" }}
            renderItem={renderCategory}
            itemHeight={118 * 1.075}
            header={<Header />}
            headerSize={64}
            numberOfColumns={NUMBER_OF_COLUMNS}
            numberOfRenderedRows={NUMBER_OF_RENDERED_ROWS}
            numberOfRowsVisibleOnScreen={NUMBER_OF_ROWS_VISIBLE_ON_SCREEN}
            onEndReachedThresholdRowsNumber={INFINITE_SCROLL_ROW_THRESHOLD}
            scrollInterval={150}
          />
        </View>
      </SpatialNavigationScrollView>
    </Screen>
  );

Expected behavior I would expect it to show the header when reaching the top. I've tried not having scroll view, also adding scrolloffset to node in header. Just not sure how to solve it.

Screenshots

https://github.com/bamlab/react-tv-space-navigation/assets/13984190/8cae1b85-f7f7-4ff8-8486-657de92e7796

Version and OS

• Library version: 3/1.2
• React Native version: 0.73.6
• OS [e.g. Android, web]: Android

[dgocoder]

@pierpo any thoughts on this?

[pierpo]

Hey! Sorry, I forgot to answer 😁

The fact that you nested a scroll view and a grid is weird: the grid is not supposed to work properly inside a scroll view. It scrolls on its own.

You should add margins/paddings above your component to match the behaviour you need, I think 🤔

[pierpo]

Hey @dgocoder, have you solved this? I don't know what to do with this issue 😄

[dgocoder]

We ended up going native fully route due to some player performance we were seeing. I can close issue

[pierpo]

Alright 😁 Thanks for the news!