From 2272fadcffc43d2374ec0be9b81c1e9d5932d987 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=B6ksel=20P=C4=B1rnal?= <gokselpirnal@gmail.com>
Date: Thu, 15 Aug 2024 11:49:30 +0300
Subject: [PATCH] feat(box): add forwardRef

---
 src/components/Box/Box.tsx | 41 +++++++++++++++++++++-----------------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
index 84a483f..a912309 100644
--- a/src/components/Box/Box.tsx
+++ b/src/components/Box/Box.tsx
@@ -34,28 +34,33 @@ const restyleFunctions = composeRestyleFunctions<Theme, RestyleProps>([
 
 export type BoxProps = RNViewProps & RestyleProps;
 
-const Box = ({ testID, accessibilityLabel, accessible, ...rest }: BoxProps) => {
-  const props = useRestyle(restyleFunctions, rest);
+const Box = React.forwardRef(
+  (
+    { testID, accessibilityLabel, accessible, ...rest }: BoxProps,
+    ref: React.ForwardedRef<RNView>,
+  ) => {
+    const props = useRestyle(restyleFunctions, rest);
 
-  const testProps = React.useMemo(() => {
-    const result: RNViewProps = {
-      accessible: false,
-      accessibilityLabel: undefined,
-      testID: undefined,
-    };
+    const testProps = React.useMemo(() => {
+      const result: RNViewProps = {
+        accessible: false,
+        accessibilityLabel: undefined,
+        testID: undefined,
+      };
 
-    if (!(testID || accessibilityLabel)) {
-      return result;
-    }
+      if (!(testID || accessibilityLabel)) {
+        return result;
+      }
 
-    result.accessible = accessible ?? true;
-    result.accessibilityLabel = accessibilityLabel ?? testID;
-    result.testID = testID ?? accessibilityLabel;
+      result.accessible = accessible ?? true;
+      result.accessibilityLabel = accessibilityLabel ?? testID;
+      result.testID = testID ?? accessibilityLabel;
 
-    return result;
-  }, [testID, accessibilityLabel, accessible]);
+      return result;
+    }, [testID, accessibilityLabel, accessible]);
 
-  return <RNView {...props} {...testProps} />;
-};
+    return <RNView {...props} {...testProps} ref={ref} />;
+  },
+);
 
 export default Box;