Add viewRef on SpatialNavigationFocusableView (for v5)

packages/example/src/modules/program/view/ProgramNode.tsx

@@ -1,9 +1,11 @@
-import { SpatialNavigationFocusableView } from 'react-tv-space-navigation';
+import {
+  SpatialNavigationFocusableView,
+  SpatialNavigationFocusableViewRef,
+} from 'react-tv-space-navigation';
 
 import { ProgramInfo } from '../domain/programInfo';
 import { Program } from './Program';
 import { forwardRef } from 'react';
-import { SpatialNavigationNodeRef } from '../../../../../lib/src/spatial-navigation/types/SpatialNavigationNodeRef';
 import { useRotateAnimation } from './useRotateAnimation';
 import { Animated } from 'react-native';
 
@@ -15,7 +17,7 @@ type Props = {
   variant?: 'portrait' | 'landscape';
 };
 
-export const ProgramNode = forwardRef<SpatialNavigationNodeRef, Props>(
+export const ProgramNode = forwardRef<SpatialNavigationFocusableViewRef, Props>(
   ({ programInfo, onSelect, indexRange, label, variant }: Props, ref) => {
     const { rotate360, animatedStyle } = useRotateAnimation();
 

packages/example/src/pages/GridWithLongNodesPage.tsx

@@ -1,6 +1,8 @@
 import {
   DefaultFocus,
+  SpatialNavigationFocusableViewRef,
   SpatialNavigationNode,
+  SpatialNavigationNodeRef,
   SpatialNavigationScrollView,
   SpatialNavigationView,
   SpatialNavigationVirtualizedListRef,
@@ -14,16 +16,15 @@ import { theme } from '../design-system/theme/theme';
 import { MutableRefObject, forwardRef, useRef } from 'react';
 import { StyleSheet } from 'react-native';
 import { Button } from '../design-system/components/Button';
-import { SpatialNavigationNodeRef } from '../../../lib/src/spatial-navigation/types/SpatialNavigationNodeRef';
 import { Spacer } from '../design-system/components/Spacer';
 import { ProgramListWithTitle } from '../modules/program/view/ProgramListWithTitle';
 import { BottomArrow, TopArrow } from '../design-system/components/Arrows';
 
 const HEADER_SIZE = scaledPixels(400);
 
 export const GridWithLongNodesPage = () => {
-  const firstItemRef = useRef<SpatialNavigationNodeRef | null>(null);
-  const lastItemRef = useRef<SpatialNavigationNodeRef | null>(null);
+  const firstItemRef = useRef<SpatialNavigationFocusableViewRef | null>(null);
+  const lastItemRef = useRef<SpatialNavigationFocusableViewRef | null>(null);
   const parentRef = useRef<SpatialNavigationVirtualizedListRef | null>(null);
 
   return (
@@ -73,7 +74,7 @@ export const GridWithLongNodesPage = () => {
   );
 };
 
-const FirstRow = forwardRef<SpatialNavigationNodeRef>((_, ref) => {
+const FirstRow = forwardRef<SpatialNavigationFocusableViewRef>((_, ref) => {
   return (
     <SpatialNavigationNode orientation="horizontal">
       <ListContainer>
@@ -93,7 +94,7 @@ const FirstRow = forwardRef<SpatialNavigationNodeRef>((_, ref) => {
 });
 FirstRow.displayName = 'FirstRow';
 
-const SecondRow = forwardRef<SpatialNavigationNodeRef>((_, ref) => {
+const SecondRow = forwardRef<SpatialNavigationFocusableViewRef>((_, ref) => {
   const programs = programInfos.slice(6, 13);
   return (
     <SpatialNavigationNode orientation="horizontal">

packages/lib/src/index.ts

@@ -10,6 +10,7 @@ export { SpatialNavigationVirtualizedGrid } from './spatial-navigation/component
 export { useSpatialNavigatorFocusableAccessibilityProps } from './spatial-navigation/hooks/useSpatialNavigatorFocusableAccessibilityProps';
 export { useLockSpatialNavigation } from './spatial-navigation/context/LockSpatialNavigationContext';
 export { SpatialNavigationNodeRef } from './spatial-navigation/types/SpatialNavigationNodeRef';
+export { SpatialNavigationFocusableViewRef } from './spatial-navigation/types/SpatialNavigationFocusableViewRef';
 export { SpatialNavigationVirtualizedListRef } from './spatial-navigation/types/SpatialNavigationVirtualizedListRef';
 export { SpatialNavigationFocusableView } from './spatial-navigation/components/FocusableView';
 export { SpatialNavigationDeviceTypeProvider } from './spatial-navigation/context/DeviceContext';

packages/lib/src/spatial-navigation/components/FocusableView.tsx

@@ -6,6 +6,7 @@ import {
 import { Platform, View, ViewStyle, ViewProps } from 'react-native';
 import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
 import { SpatialNavigationNodeRef } from '../types/SpatialNavigationNodeRef';
+import { SpatialNavigationFocusableViewRef } from '../types/SpatialNavigationFocusableViewRef';
 import { useSpatialNavigationDeviceType } from '../context/DeviceContext';
 import { useSpatialNavigatorFocusableAccessibilityProps } from '../hooks/useSpatialNavigatorFocusableAccessibilityProps';
 
@@ -19,15 +20,17 @@ type FocusableViewProps = {
 
 type Props = SpatialNavigationNodeDefaultProps & FocusableViewProps;
 
-export const SpatialNavigationFocusableView = forwardRef<SpatialNavigationNodeRef, Props>(
+export const SpatialNavigationFocusableView = forwardRef<SpatialNavigationFocusableViewRef, Props>(
   ({ children, style, viewProps, ...props }, ref) => {
     const { deviceTypeRef } = useSpatialNavigationDeviceType();
     const nodeRef = useRef<SpatialNavigationNodeRef>(null);
+    const viewRef = useRef<View>(null);
 
     useImperativeHandle(
       ref,
       () => ({
         focus: () => nodeRef.current?.focus(),
+        viewRef,
       }),
       [nodeRef],
     );
@@ -53,6 +56,7 @@ export const SpatialNavigationFocusableView = forwardRef<SpatialNavigationNodeRe
       <SpatialNavigationNode isFocusable {...props} ref={nodeRef}>
         {(nodeState) => (
           <InnerFocusableView
+            ref={viewRef}
             viewProps={viewProps}
             webProps={webProps}
             style={style}

packages/lib/src/spatial-navigation/types/SpatialNavigationFocusableViewRef.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+import { View } from 'react-native';
+
+export type SpatialNavigationFocusableViewRef = {
+  focus: () => void;
+  viewRef: RefObject<View | null>;
+};