diff --git a/packages/example/src/modules/program/view/ProgramNode.tsx b/packages/example/src/modules/program/view/ProgramNode.tsx
index e97608fc..2d53a048 100644
--- a/packages/example/src/modules/program/view/ProgramNode.tsx
+++ b/packages/example/src/modules/program/view/ProgramNode.tsx
@@ -3,6 +3,8 @@ import { SpatialNavigationNode } from 'react-tv-space-navigation';
import { ProgramInfo } from '../domain/programInfo';
import { Program } from './Program';
import { LongProgram } from './LongProgram';
+import { forwardRef } from 'react';
+import { SpatialNavigationNodeRef } from '../../../../../lib/src/spatial-navigation/types/SpatialNavigationNodeRef';
type Props = {
programInfo: ProgramInfo;
@@ -10,18 +12,30 @@ type Props = {
indexRange?: [number, number];
};
-export const ProgramNode = ({ programInfo, onSelect, indexRange }: Props) => {
- return (
-
- {({ isFocused }) => }
-
- );
-};
+export const ProgramNode = forwardRef(
+ ({ programInfo, onSelect, indexRange }: Props, ref) => {
+ return (
+
+ {({ isFocused }) => }
+
+ );
+ },
+);
+ProgramNode.displayName = 'ProgramNode';
-export const LongProgramNode = ({ programInfo, onSelect, indexRange }: Props) => {
- return (
-
- {({ isFocused }) => }
-
- );
-};
+export const LongProgramNode = forwardRef(
+ ({ programInfo, onSelect, indexRange }: Props, ref) => {
+ return (
+
+ {({ isFocused }) => }
+
+ );
+ },
+);
+LongProgramNode.displayName = 'LongProgramNode';
diff --git a/packages/example/src/pages/GridWithLongNodesPage.tsx b/packages/example/src/pages/GridWithLongNodesPage.tsx
index 9135dcf2..d46e6a46 100644
--- a/packages/example/src/pages/GridWithLongNodesPage.tsx
+++ b/packages/example/src/pages/GridWithLongNodesPage.tsx
@@ -10,10 +10,16 @@ import styled from '@emotion/native';
import { scaledPixels } from '../design-system/helpers/scaledPixels';
import { LongProgramNode, ProgramNode } from '../modules/program/view/ProgramNode';
import { theme } from '../design-system/theme/theme';
+import { MutableRefObject, forwardRef, useRef } from 'react';
+import { Button } from '../design-system/components/Button';
+import { SpatialNavigationNodeRef } from '../../../lib/src/spatial-navigation/types/SpatialNavigationNodeRef';
const HEADER_SIZE = scaledPixels(400);
export const GridWithLongNodesPage = () => {
+ const firstItemRef = useRef(null);
+ const lastItemRef = useRef(null);
+
return (
@@ -22,8 +28,9 @@ export const GridWithLongNodesPage = () => {
<>
-
-
+
+
+
>
@@ -34,11 +41,11 @@ export const GridWithLongNodesPage = () => {
);
};
-const FirstRow = () => {
+const FirstRow = forwardRef((_, ref) => {
return (
-
+
@@ -46,20 +53,44 @@ const FirstRow = () => {
);
-};
+});
+FirstRow.displayName = 'FirstRow';
-const SecondRow = () => {
+const SecondRow = forwardRef((_, ref) => {
const programs = programInfos.slice(6, 13);
return (
- {/* */}
- {programs.map((program) => {
- return ;
+ {programs.map((program, index) => {
+ return (
+
+ );
})}
);
+});
+SecondRow.displayName = 'SecondRow';
+
+const ButtonRow = ({
+ firstItemRef,
+ lastItemRef,
+}: {
+ firstItemRef: MutableRefObject;
+ lastItemRef: MutableRefObject;
+}) => {
+ return (
+
+
+
+
+ );
};
const ListContainer = styled.View(({ theme }) => ({