You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
`React Native Flexible Grid` is an advanced grid layout system inspired by CSS Grid, designed to facilitate responsive, customizable, and dynamic grid layouts in React Native applications. It supports both responsive and fixed layouts, enabling the creation of intricate designs with minimal effort.
-**Responsive Design**: Adapts fluidly to both screen and container sizes, ensuring your content looks perfect on any device. This guarantees that your grid will seamlessly accommodate different resolutions and orientations, making it ideal for responsive mobile applications.
`FlexGrid` is designed for creating highly flexible and dynamic grid layouts, capable of two-way scrolling to accommodate content that extends beyond both the viewport's width and height. By leveraging `maxColumnRatioUnits`, `itemSizeUnit`, and smooth scrolling mechanics, `FlexGrid` facilitates precise control over the grid's arrangement, dimensions, and scrolling behavior. This makes it exceptionally suited for applications requiring a versatile grid system that can display content in both horizontally and vertically overflowed layouts with ease.
66
-
67
62
63
+
`FlexGrid` is designed for creating highly flexible and dynamic grid layouts, capable of two-way scrolling to accommodate content that extends beyond both the viewport's width and height. By leveraging `maxColumnRatioUnits`, `itemSizeUnit`, and smooth scrolling mechanics, `FlexGrid` facilitates precise control over the grid's arrangement, dimensions, and scrolling behavior. This makes it exceptionally suited for applications requiring a versatile grid system that can display content in both horizontally and vertically overflowed layouts with ease.
68
64
69
65
#### Use Cases:
66
+
70
67
-**Interactive Galleries**: Optimal for galleries where users can explore content through both horizontal and vertical navigation.
71
68
-**Board Layout**: Ideal for creating grid board with documents or media or files in a grid that exceeds the viewport, allowing for comprehensive exploration.
72
69
-**Complex Layouts**: Perfect for applications demanding intricate grid arrangements that go beyond simple lists, including dashboards or design portfolios.
@@ -109,44 +123,58 @@ export default function App() {
109
123
</View>
110
124
);
111
125
}
112
-
113
126
```
114
127
115
-
116
128
#### See Examples:
117
-
1. <ahref="https://github.com/iNerdStack/react-native-flexible-grid/blob/main/example/src/PinterestHomeExample.tsx">Grid Board Example </a>
118
-
119
129
130
+
1. <ahref="https://github.com/iNerdStack/react-native-flexible-grid/blob/main/example/src/PinterestHomeExample.tsx">Grid Board Example </a>
120
131
121
132
### 2. Responsive Grid
122
133
123
134
The `ResponsiveGrid` is designed for optimal responsiveness, dynamically adjusting grid items based on the container's width or a specified width within the component's style properties. Utilizing a combination of `maxItemsPerColumn` alongside item-specific `widthRatio` and `heightRatio`, it efficiently organizes content into a vertically scrollable grid. This component is ideally suited for layouts where vertical scrolling is preferred and where the grid's adaptability to varying container widths or device width is crucial.
124
135
125
136
#### Use Cases:
137
+
126
138
-**Content Feeds**: Perfect for vertically scrolling content feeds that require adaptability to different screen sizes.
127
139
-**Image Galleries**: Ideal for image galleries where images need to be displayed in a responsive, organized or uneven manner.
128
140
-**Product Listings**: Suitable for e-commerce apps needing to showcase products in a neatly arranged, responsive grid.
@@ -240,19 +265,21 @@ export default function App() {
240
265
<br/>
241
266
242
267
A higher buffer factor increases the number of items pre-loaded outside the viewport, contributing to a smoother scrolling experience as more content is ready for immediate display when scrolling. However, setting a large buffer factor can affect overall performance, especially on devices with limited resources, as it increases the number of components rendered off-screen.
243
-
<br/>
268
+
<br/>
244
269
245
270
While, a lower buffer factor reduces the off-screen component count, optimizing performance and resource usage. This setting is beneficial for large data or resource-constrained environments. However, it may lead to brief moments where content needs to catch up with the user's scroll speed, momentarily displaying blank areas until new items are rendered.
246
-
</td>
247
-
</tr>
248
-
<tr>
249
-
<td><code>scrollEventInterval</code></td>
250
-
<td><code>Number</code></td>
251
-
<td><code>200</code></td>
252
-
<td><code>false</code></td>
253
-
<td>Defines the interval, in milliseconds, at which scroll events are processed for the purpose of recalculating visible items and buffer in a virtualized grid. By setting this prop, developers can throttle the frequency of scroll event handling, optimizing performance during rapid scrolling by reducing the computational load associated with updating the list of visible items and buffer.
271
+
272
+
</td>
273
+
</tr>
274
+
<tr>
275
+
<td><code>scrollEventInterval</code></td>
276
+
<td><code>Number</code></td>
277
+
<td><code>200</code></td>
278
+
<td><code>false</code></td>
279
+
<td>Defines the interval, in milliseconds, at which scroll events are processed for the purpose of recalculating visible items and buffer in a virtualized grid. By setting this prop, you can throttle the frequency of scroll event handling, optimizing performance during rapid scrolling by reducing the computational load associated with updating the list of visible items and buffer.
254
280
255
281
A lower value results in more frequent updates, offering smoother visual updates of the grid's content at the potential cost of higher computational overhead. While, a higher interval decreases the frequency of updates, potentially improving performance but with less immediate recalculation triggered by scroll actions. This is crucial for fine-tuning the performance and experience of virtualized grid.
282
+
256
283
</td>
257
284
</tr>
258
285
<tr>
@@ -410,19 +437,21 @@ A lower value results in more frequent updates, offering smoother visual updates
410
437
<br/>
411
438
412
439
A higher buffer factor increases the number of items pre-loaded outside the viewport, contributing to a smoother scrolling experience as more content is ready for immediate display when scrolling. However, setting a large buffer factor can affect overall performance, especially on devices with limited resources, as it increases the number of components rendered off-screen.
413
-
<br/>
440
+
<br/>
414
441
415
442
While, a lower buffer factor reduces the off-screen component count, optimizing performance and resource usage. This setting is beneficial for large data or resource-constrained environments. However, it may lead to brief moments where content needs to catch up with the user's scroll speed, momentarily displaying blank areas until new items are rendered.
416
-
</td>
417
-
</tr>
418
-
<tr>
419
-
<td><code>scrollEventInterval</code></td>
420
-
<td><code>Number</code></td>
421
-
<td><code>200</code></td>
422
-
<td><code>false</code></td>
423
-
<td>Defines the interval, in milliseconds, at which scroll events are processed for the purpose of recalculating visible items and buffer in a virtualized grid. By setting this prop, developers can throttle the frequency of scroll event handling, optimizing performance during rapid scrolling by reducing the computational load associated with updating the list of visible items and buffer.
443
+
444
+
</td>
445
+
</tr>
446
+
<tr>
447
+
<td><code>scrollEventInterval</code></td>
448
+
<td><code>Number</code></td>
449
+
<td><code>200</code></td>
450
+
<td><code>false</code></td>
451
+
<td>Defines the interval, in milliseconds, at which scroll events are processed for the purpose of recalculating visible items and buffer in a virtualized grid. By setting this prop, you can throttle the frequency of scroll event handling, optimizing performance during rapid scrolling by reducing the computational load associated with updating the list of visible items and buffer.
424
452
425
453
A lower value results in more frequent updates, offering smoother visual updates of the grid's content at the potential cost of higher computational overhead. While, a higher interval decreases the frequency of updates, potentially improving performance but with less immediate recalculation triggered by scroll actions. This is crucial for fine-tuning the performance and experience of virtualized grid.
454
+
426
455
</td>
427
456
</tr>
428
457
<tr>
@@ -461,6 +490,22 @@ A lower value results in more frequent updates, offering smoother visual updates
461
490
<td> Defines the distance from the end of the content at which <code>onEndReached</code> should be triggered, expressed as a proportion of the total content length. For example, a value of <code>0.1</code> triggers the callback when the user has scrolled to within 10% of the end of the content. </td>
<td>Callback function triggered when the scroll view is scrolled. Receives the scroll event as a parameter and can be used for custom scroll handling.</td>
499
+
</tr>
500
+
501
+
<tr>
502
+
<td><code>bounces</code></td>
503
+
<td><code>boolean</code></td>
504
+
<td><code>true</code></td>
505
+
<td><code>false</code></td>
506
+
<td>Controls whether the ScrollView content can "bounce" when it reaches the end of the content. When set to <code>false</code>, disables the bouncing effect.</td>
507
+
</tr>
508
+
464
509
<tr>
465
510
<td><code>autoAdjustItemWidth</code></td>
466
511
<td><code>boolean</code></td>
@@ -487,8 +532,8 @@ A lower value results in more frequent updates, offering smoother visual updates
487
532
</tbody>
488
533
</table>
489
534
490
-
491
535
## 🚀 Vision and Roadmap
536
+
492
537
Our mission is not just to provide a flexible layout solution but to improve grid systems and layout flexibility in React Native. By continuously refining our algorithm and incorporating feedback, we aim to bring CSS Grid-like capabilities to the React Native ecosystem, fostering creativity and pushing the boundaries of what's possible in app design with React Native.
0 commit comments