From a04c6ee4498cf8ba62fc7ab486f0eaa56af09dc4 Mon Sep 17 00:00:00 2001
From: M-Fawaz Orabi <mfawwaz93@gmail.com>
Date: Wed, 4 Dec 2024 05:42:01 +0100
Subject: [PATCH 1/3] Support RTL in ResponsiveGrid

---
 src/responsive-grid/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/responsive-grid/index.tsx b/src/responsive-grid/index.tsx
index 1beb781..6069a5b 100644
--- a/src/responsive-grid/index.tsx
+++ b/src/responsive-grid/index.tsx
@@ -26,7 +26,9 @@ export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
   keyExtractor = (_, index) => String(index), // default to item index if no keyExtractor is provided
   HeaderComponent = null,
   FooterComponent = null,
+  direction = 'ltr',
 }) => {
+  const start = direction === 'ltr' ? 'left' : 'right';
   const [visibleItems, setVisibleItems] = useState<TileItem[]>([]);
 
   const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
@@ -158,7 +160,7 @@ export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
                 {
                   position: 'absolute',
                   top: item.top,
-                  left: item.left,
+                  [start]: item.left,
                   width: item.width,
                   height: item.height,
                 },

From 1fa751cda340aaa2899ec7637cbdc0c34d5de03e Mon Sep 17 00:00:00 2001
From: M-Fawaz Orabi <mfawwaz93@gmail.com>
Date: Wed, 4 Dec 2024 05:42:43 +0100
Subject: [PATCH 2/3] Update types.ts

---
 src/responsive-grid/types.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/responsive-grid/types.ts b/src/responsive-grid/types.ts
index 9578d18..a3578bb 100644
--- a/src/responsive-grid/types.ts
+++ b/src/responsive-grid/types.ts
@@ -68,6 +68,8 @@ export interface ResponsiveGridProps {
     | React.ReactElement<any, string | React.JSXElementConstructor<any>>
     | null
     | undefined;
+
+  direction?: 'rtl' | 'ltr';
 }
 
 export interface TileItem {

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 3/3] 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';
 }