From cad3e80d4f31b9853bb95f3faa4439fac5c19940 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Leroy?= <remil@bam.tech>
Date: Thu, 28 Mar 2024 14:13:57 +0100
Subject: [PATCH] feat: Add imperative focus to SpatialNavigationView

---
 .../spatial-navigation/components/View.tsx    | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/lib/src/spatial-navigation/components/View.tsx b/packages/lib/src/spatial-navigation/components/View.tsx
index b21a7dcb..946eb045 100644
--- a/packages/lib/src/spatial-navigation/components/View.tsx
+++ b/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',