Add imperative focus in SpatialNavigationVirtualizedGrid

[arthuruan]

Is your feature request related to a problem? Please describe.
I'm trying to go back the focus to the header of SpatialNavigationVirtualizedGrid, but looks like from the third row I lose the reference of the component and I'm not able to do the imperative focus.

Describe the solution you'd like
I'd like to have I way to keep the header reference while scrolling down. Or even expose the SpatialNavigationVirtualizedList reference in the SpatialNavigationVirtualizedGrid component, would be very helpful. With that, I could scroll to the first grid item and then move the focus to the header. Like that:

 <SpatialNavigationVirtualizedGrid
      ref={virtualizedListRef}
      data={data}
      header={header}
      headerSize={headerSize}
      renderItem={renderItem}
      itemHeight={getItemHeight(itemAspectRatio)}
      numberOfColumns={NUMBER_OF_COLUMNS}
      onEndReachedThresholdRowsNumber={INFINITE_SCROLL_ROW_THRESHOLD}
      onEndReached={onEndReached}
      descendingArrowContainerStyle={styles.topArrowContainer}
      ascendingArrowContainerStyle={styles.bottomArrowContainer}
    />

 useRemoteControlKeys(
    [SupportedKeys.Back],
    useCallback(() => {
      if (isItemFocused) {
        virtualizedListRef.current?.focus(0);
        headerViewRef.current?.focus();
        return true;
      }

      return false;
    }, [isItemFocused]),
  );

Additional context

Screen.Recording.2024-11-06.at.11.28.34.mov

[Yria]

VirtualizedList only draws visible items, the desired behavior seems unlikely.

[arthuruan]

Well, what I would like is to have a way to focus on the first item (or maybe to the header of SpatialNavigationVirtualizedGrid). I used as an example the SpatialNavigationVirtualizedList that in its reference we can pass the index of the item through the .focus(0) method (did some test on it and worked fine). So if we had some way to do that too in the SpatialNavigationVirtualizedGrid would be nice. I know that the Grid component use the VirtualizedList inside of it, so exposing the ref we'd be able to manage the focused item.

See the video that I switch the SpatialNavigationVirtualizedGrid for a SpatialNavigationVirtualizedList on the same screen and I was able to focus on a not visible item (which is the first item).

Code that I did the test:

VirtualizedGrid switched to VirtualizedList

    <SpatialNavigationVirtualizedList
        ref={virtualizedRef}
        data={data}
        renderItem={renderItem}
        itemSize={getItemHeight(itemAspectRatio)}
        orientation="vertical"
      />

and the reference handling
virtualizedRef.current?.focus(0);

Screen.Recording.2024-11-21.at.17.09.04.mov

[arthuruan]

fixed on the #199