diff --git a/packages/example/src/modules/program/view/ProgramNode.tsx b/packages/example/src/modules/program/view/ProgramNode.tsx index f11ffe5a..b502bde1 100644 --- a/packages/example/src/modules/program/view/ProgramNode.tsx +++ b/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( +export const ProgramNode = forwardRef( ({ programInfo, onSelect, indexRange, label, variant }: Props, ref) => { const { rotate360, animatedStyle } = useRotateAnimation(); diff --git a/packages/example/src/pages/GridWithLongNodesPage.tsx b/packages/example/src/pages/GridWithLongNodesPage.tsx index 6658a8b5..ad13db99 100644 --- a/packages/example/src/pages/GridWithLongNodesPage.tsx +++ b/packages/example/src/pages/GridWithLongNodesPage.tsx @@ -1,6 +1,8 @@ import { DefaultFocus, + SpatialNavigationFocusableViewRef, SpatialNavigationNode, + SpatialNavigationNodeRef, SpatialNavigationScrollView, SpatialNavigationView, SpatialNavigationVirtualizedListRef, @@ -14,7 +16,6 @@ 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'; @@ -22,8 +23,8 @@ import { BottomArrow, TopArrow } from '../design-system/components/Arrows'; const HEADER_SIZE = scaledPixels(400); export const GridWithLongNodesPage = () => { - const firstItemRef = useRef(null); - const lastItemRef = useRef(null); + const firstItemRef = useRef(null); + const lastItemRef = useRef(null); const parentRef = useRef(null); return ( @@ -73,7 +74,7 @@ export const GridWithLongNodesPage = () => { ); }; -const FirstRow = forwardRef((_, ref) => { +const FirstRow = forwardRef((_, ref) => { return ( @@ -93,7 +94,7 @@ const FirstRow = forwardRef((_, ref) => { }); FirstRow.displayName = 'FirstRow'; -const SecondRow = forwardRef((_, ref) => { +const SecondRow = forwardRef((_, ref) => { const programs = programInfos.slice(6, 13); return ( diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts index 7aab2252..3f41f30b 100644 --- a/packages/lib/src/index.ts +++ b/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'; diff --git a/packages/lib/src/spatial-navigation/components/FocusableView.tsx b/packages/lib/src/spatial-navigation/components/FocusableView.tsx index 3287acbf..583b0838 100644 --- a/packages/lib/src/spatial-navigation/components/FocusableView.tsx +++ b/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( +export const SpatialNavigationFocusableView = forwardRef( ({ children, style, viewProps, ...props }, ref) => { const { deviceTypeRef } = useSpatialNavigationDeviceType(); const nodeRef = useRef(null); + const viewRef = useRef(null); useImperativeHandle( ref, () => ({ focus: () => nodeRef.current?.focus(), + viewRef, }), [nodeRef], ); @@ -53,6 +56,7 @@ export const SpatialNavigationFocusableView = forwardRef {(nodeState) => ( void; + viewRef: RefObject; +};