Scroll to first element of SpatialNavigationVirtualizedGrid when data dynamically changed

[robmim]

When data chnaged dynamically in the grid, the focus remain on the selected index element of the previous data.

Describe the solution you'd like
When data change dynamically, the first element of the grid should be focus by default.

See video below

Enregistrement.d.ecran.le.2025-07-02.a.15.1.mp4

Since we can use the scrollTo on SpatialNavigationVirtualizedList, the same behavior on the grid would be a great addition.

[robmim]

@pierpo here some basic code and feature the SpatialNavigationVirtualizedGrid should have.

1. The possibility to set the focus programmatically to the first, last or any cell in the grid.

2. While navigating into the grid pressing RIGHT when the last cell of a row is focused should give focus to the first item of the next row. And vice versa

here some basic code that will need to be tested but its a start.

Enregistrement.d.ecran.le.2025-07-03.a.15.mp4

import React, { useRef, useEffect, useState, createRef } from "react";
import {
  StyleSheet,
  Text,
  View,
  Platform,
  TouchableOpacity,
} from "react-native";
import KeyEvent from "react-native-keyevent";
import {
  SpatialNavigationRoot,
  SpatialNavigationView,
  SpatialNavigationFocusableView,
} from "react-tv-space-navigation";

const ROWS = 4;
const COLS = 6;

const createGridRefs = () =>
  Array.from({ length: ROWS }, () =>
    Array.from({ length: COLS }, () => createRef<any>())
  );

const WorkingGrid: React.FC = () => {
  const [focused, setFocused] = useState<{ row: number; col: number }>({
    row: 0,
    col: 0,
  });
  const cellRefs = useRef(createGridRefs());
  const isInitialMount = useRef(true);

  // Focus the first cell of the grid
  const focusFirstCell = () => {
    setFocused({ row: 0, col: 0 });
    const firstCell = cellRefs.current[0][0];
    if (firstCell.current && typeof firstCell.current.focus === "function") {
      firstCell.current.focus();
    }
  };

  // Focus the last cell of the grid
  const focusLastCell = () => {
    setFocused({ row: ROWS - 1, col: COLS - 1 });
    const lastCell = cellRefs.current[ROWS - 1][COLS - 1];
    if (lastCell.current && typeof lastCell.current.focus === "function") {
      lastCell.current.focus();
    }
  };

  useEffect(() => {
    focusFirstCell();
  }, []);

  useEffect(() => {
    if (!isInitialMount.current) {
      const ref = cellRefs.current[focused.row][focused.col];
      if (ref.current && typeof ref.current.focus === "function") {
        ref.current.focus();
      }
    } else {
      isInitialMount.current = false;
    }
  }, [focused]);

  useEffect(() => {
    if (Platform.OS !== "android") return;
    KeyEvent.onKeyDownListener((keyEvent) => {
      switch (keyEvent.keyCode) {
        case 19: // DPAD_UP
          setFocused((curr) => ({
            row: Math.max(0, curr.row - 1),
            col: curr.col,
          }));
          break;
        case 20: // DPAD_DOWN
          setFocused((curr) => ({
            row: Math.min(ROWS - 1, curr.row + 1),
            col: curr.col,
          }));
          break;
        case 21: // DPAD_LEFT
          setFocused((curr) => {
            if (curr.col === 0) {
              if (curr.row > 0) {
                return { row: curr.row - 1, col: COLS - 1 };
              } else {
                return curr;
              }
            } else {
              return { row: curr.row, col: curr.col - 1 };
            }
          });
          break;
        case 22: // DPAD_RIGHT
          setFocused((curr) => {
            if (curr.col === COLS - 1) {
              if (curr.row < ROWS - 1) {
                return { row: curr.row + 1, col: 0 };
              } else {
                return curr;
              }
            } else {
              return { row: curr.row, col: curr.col + 1 };
            }
          });
          break;
        default:
          break;
      }
    });

    return () => {
      KeyEvent.removeKeyDownListener();
    };
  }, []);

  return (
    <SpatialNavigationRoot>
      <View style={styles.container}>
        <SpatialNavigationView direction="vertical">
          {Array.from({ length: ROWS }).map((_, row) => (
            <SpatialNavigationView
              key={row}
              direction="horizontal"
              style={styles.row}
              alignInGrid
            >
              {Array.from({ length: COLS }).map((_, col) => (
                <SpatialNavigationFocusableView
                  key={col}
                  ref={cellRefs.current[row][col]}
                  onFocus={() => {
                    setFocused((curr) => {
                      if (curr.row !== row || curr.col !== col) {
                        return { row, col };
                      }
                      return curr;
                    });
                  }}
                  onSelect={() => {}}
                >
                  {({ isFocused }) => (
                    <View
                      style={[
                        styles.cell,
                        isFocused ? styles.selectedCell : null,
                      ]}
                    >
                      <Text
                        style={[
                          styles.cellText,
                          isFocused ? styles.selectedText : null,
                        ]}
                      >
                        {row + 1},{col + 1}
                      </Text>
                    </View>
                  )}
                </SpatialNavigationFocusableView>
              ))}
            </SpatialNavigationView>
          ))}
        </SpatialNavigationView>
        <View style={styles.buttonRow}>
          <TouchableOpacity style={styles.button} onPress={focusFirstCell}>
            <Text style={styles.buttonText}>Focus First Cell</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.button} onPress={focusLastCell}>
            <Text style={styles.buttonText}>Focus Last Cell</Text>
          </TouchableOpacity>
        </View>
      </View>
    </SpatialNavigationRoot>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  row: {
    flexDirection: "row",
  },
  cell: {
    width: 80,
    height: 80,
    margin: 10,
    justifyContent: "center",
    alignItems: "center",
    borderWidth: 3,
    borderColor: "#555",
    backgroundColor: "#222",
    borderRadius: 10,
  },
  selectedCell: {
    borderColor: "#33aaff",
    backgroundColor: "#135",
  },
  cellText: {
    color: "#fff",
    fontSize: 20,
  },
  selectedText: {
    color: "#33aaff",
    fontWeight: "bold",
  },
  buttonRow: {
    flexDirection: "row",
    marginTop: 32,
    justifyContent: "center",
    width: "100%",
  },
  button: {
    marginHorizontal: 16,
    paddingHorizontal: 32,
    paddingVertical: 16,
    borderRadius: 8,
    backgroundColor: "#135",
  },
  buttonText: {
    color: "#fff",
    fontWeight: "bold",
    fontSize: 18,
  },
});

export default WorkingGrid;

[arthuruan]

Hi @robmim I just created a PR that will help you to handle the focus and the scroll in VirtualizedGrid component, this feature will also help me in a related issue that I have opened. Keep your eyes on this PR

[robmim]

@arthuruan finally someone willing to put his hands in the code to make it evolve., Cant thanks you enough.

[robmim]

@pierpo @arthuruan so i just tested it using 5.2.0 and if i understand correctly. scrollTo is actually focusing the index 0 ?? Is there any way to only scroll the grid without focusing index 0 ?

I need to show the first element of the grid whenever data changed ideally without a scrolling effect.

I'm trying to figure out WHY the grid should stay at the same selected row if data changed. Doesnt make any sens to me.

And by the way the scroll only work if the selectedIndex is in the first 3 rows. If the previous selected index is in row 4th and more the scroll doesnt work.

[robmim]

Let me show you what i mean by "doesn't make any sens"

I do have a list of movie categories. Whenever i change the selected category, data is fetched and is pass to the SpatialNavigationVirtualizedGrid. The issue is when i scroll inside the grid. (let say index 0 of row 3 is selected) and i go back on the categoryList to change the category again. We can all agree that if the data changed in the grid the first element of that grid should be visible and not the first one of the 3rd row right ?

I can't use focus(0) from the ref because it will hide the list of categories every time a user change the category.

Enregistrement.d.ecran.le.2025-08-01.a.15.mp4

I'm pretty sure the issue is coming from the registerNode function and i get the basic conept of LRUD but there gotta be a way to simply make the grid re render whenever data chnage

// This function must be idempotent so we don't register existing nodes again when grid data changes
  const registerNthVirtualNode = useCallback(
    (index: number) => {
      return spatialNavigator.registerNode(getNthVirtualNodeID(index), {
        parent: parentId,
        orientation: 'horizontal',
        isFocusable: false,
        /** This prop enables index synchronization for navigation between rows.
         * Thus you can navigate up and down inside columns, instead of going back to the first element of rows.
         */
        useMeForIndexAlign: true,
      });
    },
    [spatialNavigator, parentId, getNthVirtualNodeID],
  );

[robmim]

Problem solved...

I fixed this issue simply adding a key to the grid and it is now going back to top when i change category.