Updated Documentation

Author: iNerdStack

README.md

@@ -155,8 +155,8 @@ export default function GridBoardExamplePage() {
           </Text>
 
           <FlexGrid
-            maxWidthRatio={60}
-            tileSize={60}
+            maxColumnRatioUnits={60}
+            itemSizeUnit={60}
             data={data}
             virtualizedBufferFactor={2}
             renderItem={renderItem}

example/src/GridBoardExample.tsx

@@ -72,7 +72,6 @@ export default function InstagramExploreExample() {
         maxItemsPerColumn={3}
         data={repeatedData}
         renderItem={renderItem}
-        virtualization={true}
         showScrollIndicator={false}
         style={{
           padding: 5,

example/src/InstagramExploreExample.tsx

@@ -63,7 +63,7 @@ export default function PinterestExample() {
         maxItemsPerColumn={2}
         data={repeatedData}
         renderItem={renderItem}
-        tileHeight={80} // set tileHeight to control uneven tiles
+        itemUnitHeight={80} // set itemUnitHeight to control uneven tiles
         style={{
           padding: 5,
         }}

example/src/PinterestHomeExample.tsx

@@ -34,10 +34,9 @@
     "react-native",
     "ios",
     "android",
-    "flexible-grid",
     "grid",
-    "grid-system",
-    "expo"
+    "grid-layout",
+    "masonry"
   ],
   "repository": {
     "type": "git",
@@ -128,4 +127,4 @@
   "directories": {
     "example": "example"
   }
-}
+}

package.json

@@ -2,15 +2,15 @@ import type { FlexGridItem, FlexGridTile } from './types';
 
 export const calcFlexGrid = (
   data: FlexGridTile[],
-  maxWidthRatio: number,
-  tileSize: number
+  maxColumnRatioUnits: number,
+  itemSizeUnit: number
 ): {
   gridItems: FlexGridItem[];
   totalHeight: number;
   totalWidth: number;
 } => {
   const gridItems: FlexGridItem[] = [];
-  let columnHeights = new Array(maxWidthRatio).fill(0); // Track the height of each column.
+  let columnHeights = new Array(maxColumnRatioUnits).fill(0); // Track the height of each column.
 
   data.forEach((item) => {
     const widthRatio = item.widthRatio || 1;
@@ -19,7 +19,7 @@ export const calcFlexGrid = (
     // Find the column with the minimum height to start placing the current item.
     let columnIndex = columnHeights.indexOf(Math.min(...columnHeights));
     // If the item doesn't fit in the remaining columns, reset the row.
-    if (widthRatio + columnIndex > maxWidthRatio) {
+    if (widthRatio + columnIndex > maxColumnRatioUnits) {
       columnIndex = 0;
       const maxHeight = Math.max(...columnHeights);
       columnHeights.fill(maxHeight); // Align all columns to the height of the tallest column.
@@ -29,18 +29,22 @@ export const calcFlexGrid = (
     gridItems.push({
       ...item,
       top: columnHeights[columnIndex],
-      left: columnIndex * tileSize,
+      left: columnIndex * itemSizeUnit,
     });
 
     // Update the heights of the columns spanned by this item.
     for (let i = columnIndex; i < columnIndex + widthRatio; i++) {
-      columnHeights[i] += heightRatio * tileSize;
+      columnHeights[i] += heightRatio * itemSizeUnit;
     }
   });
 
   // After positioning all data, calculate the total height of the grid.
   const totalHeight = Math.max(...columnHeights);
 
   // Return the positioned data and the total height of the grid.
-  return { gridItems, totalHeight, totalWidth: maxWidthRatio * tileSize };
+  return {
+    gridItems,
+    totalHeight,
+    totalWidth: maxColumnRatioUnits * itemSizeUnit,
+  };
 };

src/flex-grid/calc-flex-grid.ts

@@ -10,12 +10,12 @@ import { calcFlexGrid } from './calc-flex-grid';
 export const FlexGrid: React.FC<FlexGridProps> = ({
   data = [],
   virtualization = true,
-  maxWidthRatio = 1,
-  tileSize = 50,
+  maxColumnRatioUnits = 1,
+  itemSizeUnit = 50,
   scrollEventInterval = 200, // milliseconds
   virtualizedBufferFactor = 2,
   showScrollIndicator = true,
-  renderItem,
+  renderItem = () => null,
   style = {},
 }) => {
   const [visibleItems, setVisibleItems] = useState<FlexGridTile[]>([]);
@@ -33,8 +33,8 @@ export const FlexGrid: React.FC<FlexGridProps> = ({
   );
 
   const { totalHeight, totalWidth, gridItems } = useMemo(() => {
-    return calcFlexGrid(data, maxWidthRatio, tileSize);
-  }, [data, maxWidthRatio, tileSize]);
+    return calcFlexGrid(data, maxColumnRatioUnits, itemSizeUnit);
+  }, [data, maxColumnRatioUnits, itemSizeUnit]);
 
   const renderedList = virtualization ? visibleItems : gridItems;
 
@@ -51,8 +51,8 @@ export const FlexGrid: React.FC<FlexGridProps> = ({
     const visibleEndY = scrollPosition.current.y + containerHeight + bufferY;
 
     const vItems = gridItems.filter((item) => {
-      const itemRight = item.left + (item.widthRatio || 1) * tileSize;
-      const itemBottom = item.top + (item.heightRatio || 1) * tileSize;
+      const itemRight = item.left + (item.widthRatio || 1) * itemSizeUnit;
+      const itemBottom = item.top + (item.heightRatio || 1) * itemSizeUnit;
       return (
         item.left < visibleEndX &&
         itemRight > visibleStartX &&
@@ -109,13 +109,13 @@ export const FlexGrid: React.FC<FlexGridProps> = ({
   };
 
   useEffect(() => {
-    //recalculate visible items when tileSize or maxWidthRatio or data changes
+    //recalculate visible items when itemSizeUnit or maxColumnRatioUnits or data changes
     if (virtualization) {
       updateVisibleItems();
     }
   }, [
-    tileSize,
-    maxWidthRatio,
+    itemSizeUnit,
+    maxColumnRatioUnits,
     data,
     virtualization,
     containerHeight,
@@ -160,8 +160,8 @@ export const FlexGrid: React.FC<FlexGridProps> = ({
                   position: 'absolute',
                   top: item.top,
                   left: item.left,
-                  width: (item.widthRatio || 1) * tileSize,
-                  height: (item.heightRatio || 1) * tileSize,
+                  width: (item.widthRatio || 1) * itemSizeUnit,
+                  height: (item.heightRatio || 1) * itemSizeUnit,
                 }}
               >
                 {renderItem(item, index)}

src/flex-grid/index.tsx

@@ -2,9 +2,9 @@ import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 export interface FlexGridProps {
-  maxWidthRatio: number;
+  maxColumnRatioUnits: number;
   virtualization?: boolean;
-  tileSize: number;
+  itemSizeUnit: number;
   renderItem: (item: FlexGridTile, index: number) => ReactNode;
   data: FlexGridTile[];
   virtualizedBufferFactor?: number;

src/flex-grid/types.ts

@@ -4,24 +4,24 @@ export const calcResponsiveGrid = (
   data: TileItem[],
   maxItemsPerColumn: number,
   containerWidth: number,
-  tileHeight?: number
+  itemUnitHeight?: number
 ): {
   gridItems: GridItem[];
   gridViewHeight: number;
 } => {
   const gridItems: GridItem[] = [];
-  const tileSize = containerWidth / maxItemsPerColumn; // Determine TileSize based on container width and max number of columns
+  const itemSizeUnit = containerWidth / maxItemsPerColumn; // Determine TileSize based on container width and max number of columns
   let columnHeights: number[] = new Array(maxItemsPerColumn).fill(0); // Track the height of each column end.
 
   data.forEach((item) => {
     const widthRatio = item.widthRatio || 1;
     const heightRatio = item.heightRatio || 1;
 
-    const itemWidth = widthRatio * tileSize;
+    const itemWidth = widthRatio * itemSizeUnit;
 
-    const itemHeight = tileHeight
-      ? tileHeight * heightRatio
-      : heightRatio * tileSize; // Use tileHeight if provided, else fallback to tileSize
+    const itemHeight = itemUnitHeight
+      ? itemUnitHeight * heightRatio
+      : heightRatio * itemSizeUnit; // Use itemUnitHeight if provided, else fallback to itemSizeUnit
 
     // Find the column where the item should be placed.
     let columnIndex = findColumnForItem(
@@ -32,7 +32,7 @@ export const calcResponsiveGrid = (
 
     // Calculate item's top and left positions.
     const top = columnHeights[columnIndex]!;
-    const left = columnIndex * tileSize;
+    const left = columnIndex * itemSizeUnit;
 
     // Place the item.
     gridItems.push({

src/responsive-grid/calc-responsive-grid.ts

@@ -16,7 +16,7 @@ export const ResponsiveGrid: React.FC<FlexGridProps> = ({
   virtualization = true,
   showScrollIndicator = true,
   style = {},
-  tileHeight,
+  itemUnitHeight,
 }) => {
   const [visibleItems, setVisibleItems] = useState<TileItem[]>([]);
   const throttleScrollTimeout = useRef<ReturnType<typeof setTimeout> | null>(
@@ -30,7 +30,12 @@ export const ResponsiveGrid: React.FC<FlexGridProps> = ({
 
   const { gridViewHeight, gridItems } = useMemo(
     () =>
-      calcResponsiveGrid(data, maxItemsPerColumn, containerWidth, tileHeight),
+      calcResponsiveGrid(
+        data,
+        maxItemsPerColumn,
+        containerWidth,
+        itemUnitHeight
+      ),
     [data, maxItemsPerColumn, containerWidth]
   );