Merge pull request #51 from forabi/patch-1

Support RTL in ResponsiveGrid

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

@@ -26,6 +26,7 @@ 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 [visibleItems, setVisibleItems] = useState<TileItem[]>([]);
 
@@ -120,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]}
@@ -154,16 +169,7 @@ export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
           {renderedItems.map((item, index) => (
             <View
               key={keyExtractor(item, index)}
-              style={[
-                {
-                  position: 'absolute',
-                  top: item.top,
-                  left: item.left,
-                  width: item.width,
-                  height: item.height,
-                },
-                itemContainerStyle,
-              ]}
+              style={[getItemPositionStyle(item), itemContainerStyle]}
             >
               {renderItem({ item, index })}
             </View>

src/responsive-grid/types.ts

@@ -68,6 +68,12 @@ export interface ResponsiveGridProps {
     | React.ReactElement<any, string | React.JSXElementConstructor<any>>
     | 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';
 }
 
 export interface TileItem {