From b4485f12abca0145fb453cdce9026ce176bc74e4 Mon Sep 17 00:00:00 2001
From: Ajetunmobi Isaac <isaacajetunmobi@gmail.com>
Date: Thu, 5 Dec 2024 02:26:11 +0100
Subject: [PATCH] added documentation for prop

---
 README.md                     |  7 +++++++
 src/responsive-grid/index.tsx | 26 +++++++++++++++-----------
 src/responsive-grid/types.ts  |  4 ++++
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 12f3685..1449e0c 100644
--- a/README.md
+++ b/README.md
@@ -383,6 +383,13 @@ A lower value results in more frequent updates, offering smoother visual updates
       <td><code>false</code></td>
       <td> Defines the base unit height for items within the grid. This value serves as a foundational measure to determine the actual height of each grid item. The item's final height is calculated by multiplying this base unit height (<code>itemUnitHeight</code>) by the item's heightRatio, allowing for proportional scaling of items based on their content or design requirements. While <code>widthRatio</code> affects the item's width in relation to the column width, <code>itemUnitHeight</code> and <code>heightRatio</code> together define the item's vertical dimension, enabling dynamic grid layouts that adapt seamlessly to varying content sizes.</td>
     </tr>
+    <tr>
+      <td><code>direction</code></td>
+      <td><code>string</code></td>
+      <td><code>ltr</code></td>
+      <td><code>false</code></td>
+      <td> Determines the direction for arranging grid items in the layout: left-to-right (ltr) or right-to-left (rtl). </td>
+    </tr>
     <tr>
       <td><code>virtualization</code></td>
       <td><code>Boolean</code></td>
diff --git a/src/responsive-grid/index.tsx b/src/responsive-grid/index.tsx
index 6069a5b..d0b1607 100644
--- a/src/responsive-grid/index.tsx
+++ b/src/responsive-grid/index.tsx
@@ -28,7 +28,6 @@ export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
   FooterComponent = null,
   direction = 'ltr',
 }) => {
-  const start = direction === 'ltr' ? 'left' : 'right';
   const [visibleItems, setVisibleItems] = useState<TileItem[]>([]);
 
   const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
@@ -122,6 +121,20 @@ export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
     onEndReachedCalled.current = false;
   }, [gridItems, containerSize, virtualization]);
 
+  const getItemPositionStyle = (item: TileItem) => {
+    const baseStyle = {
+      position: 'absolute' as const,
+      top: item.top,
+      width: item.width,
+      height: item.height,
+    };
+
+    return {
+      ...baseStyle,
+      ...(direction === 'rtl' ? { right: item.left } : { left: item.left }),
+    };
+  };
+
   return (
     <View
       style={[{ flexGrow: 1 }, style]}
@@ -156,16 +169,7 @@ export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
           {renderedItems.map((item, index) => (
             <View
               key={keyExtractor(item, index)}
-              style={[
-                {
-                  position: 'absolute',
-                  top: item.top,
-                  [start]: item.left,
-                  width: item.width,
-                  height: item.height,
-                },
-                itemContainerStyle,
-              ]}
+              style={[getItemPositionStyle(item), itemContainerStyle]}
             >
               {renderItem({ item, index })}
             </View>
diff --git a/src/responsive-grid/types.ts b/src/responsive-grid/types.ts
index a3578bb..9e91806 100644
--- a/src/responsive-grid/types.ts
+++ b/src/responsive-grid/types.ts
@@ -69,6 +69,10 @@ export interface ResponsiveGridProps {
     | null
     | undefined;
 
+  /**
+   * Determines the direction for arranging grid items in the layout: left-to-right (ltr) or right-to-left (rtl).
+   * @default ltr
+   */
   direction?: 'rtl' | 'ltr';
 }