added documentation for prop

Author: iNerdStack

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>

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>

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';
 }