Merge pull request #92 from bamlab/add-ref-to-SpatialNavigationview

feat: Add imperative focus to SpatialNavigationView

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

@@ -1,28 +1,30 @@
 import { StyleSheet, View, ViewStyle } from 'react-native';
 import { SpatialNavigationNode } from './Node';
+import { forwardRef } from 'react';
+import { SpatialNavigationNodeRef } from '../types/SpatialNavigationNodeRef';
 
-export const SpatialNavigationView = ({
-  direction = 'horizontal',
-  alignInGrid = false,
-  children,
-  style,
-}: {
+type Props = {
   children: React.ReactNode;
   style?: ViewStyle;
   direction: 'horizontal' | 'vertical';
   alignInGrid?: boolean;
-}) => {
-  return (
-    <SpatialNavigationNode orientation={direction} alignInGrid={alignInGrid}>
-      <View
-        style={[style, direction === 'horizontal' ? styles.viewHorizontal : styles.viewVertical]}
-      >
-        {children}
-      </View>
-    </SpatialNavigationNode>
-  );
 };
 
+export const SpatialNavigationView = forwardRef<SpatialNavigationNodeRef, Props>(
+  ({ direction = 'horizontal', alignInGrid = false, children, style }: Props, ref) => {
+    return (
+      <SpatialNavigationNode orientation={direction} alignInGrid={alignInGrid} ref={ref}>
+        <View
+          style={[style, direction === 'horizontal' ? styles.viewHorizontal : styles.viewVertical]}
+        >
+          {children}
+        </View>
+      </SpatialNavigationNode>
+    );
+  },
+);
+SpatialNavigationView.displayName = 'SpatialNavigationView';
+
 const styles = StyleSheet.create({
   viewVertical: {
     display: 'flex',