Skip to content

Commit c1537ee

Browse files
iNerdStackiNerdStack
committed
released 0.1.5
1 parent 6c036c6 commit c1537ee

File tree

8 files changed

+106
-70
lines changed

8 files changed

+106
-70
lines changed

‎README.md‎

Lines changed: 34 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -77,17 +77,20 @@ import { FlexGrid } from 'react-native-flexible-grid';
7777

7878
export default function App() {
7979
const data = [
80-
{ imageUrl: 'https://picsum.photos/200/300?random=1', widthRatio: 1, heightRatio: 1 },
81-
{ imageUrl: 'https://picsum.photos/200/300?random=2', widthRatio: 2, heightRatio: 1 },
82-
{ imageUrl: 'https://picsum.photos/200/300?random=3', widthRatio: 2, heightRatio: 1 },
80+
{ imageUrl: 'https://picsum.photos/200/300?random=1', widthRatio: 1, heightRatio: 1, text: "Item 1" },
81+
{ imageUrl: 'https://picsum.photos/200/300?random=2', widthRatio: 2, heightRatio: 1, text: "Item 2" },
82+
{ imageUrl: 'https://picsum.photos/200/300?random=3', widthRatio: 2, heightRatio: 1, text: "Item 3" },
8383
];
8484

8585
const renderItem = (item, index) => (
86-
<TouchableOpacity style={styles.boxContainer} onPress={() => console.log(`Item ${item.text} pressed`)}>
87-
<View style={styles.box}>
86+
<View style={styles.boxContainer}>
87+
<Image
88+
source={{ uri: item.imageUrl }}
89+
style={styles.box}
90+
resizeMode="cover"
91+
/>
8892
<Text style={styles.text}>{item.text}</Text>
8993
</View>
90-
</TouchableOpacity>
9194
);
9295

9396
return (
@@ -130,17 +133,20 @@ import { ResponsiveGrid } from 'react-native-flexible-grid';
130133

131134
export default function App() {
132135
const data = [
133-
{ imageUrl: 'https://picsum.photos/200/300?random=1', widthRatio: 1, heightRatio: 1 },
134-
{ imageUrl: 'https://picsum.photos/200/300?random=2', widthRatio: 2, heightRatio: 1 },
135-
{ imageUrl: 'https://picsum.photos/200/300?random=3', widthRatio: 2, heightRatio: 1 },
136+
{ imageUrl: 'https://picsum.photos/200/300?random=1', widthRatio: 1, heightRatio: 1, text: "Item 1" },
137+
{ imageUrl: 'https://picsum.photos/200/300?random=2', widthRatio: 2, heightRatio: 1, text: "Item 2" },
138+
{ imageUrl: 'https://picsum.photos/200/300?random=3', widthRatio: 2, heightRatio: 1, text: "Item 3" },
136139
];
137140

138141
const renderItem = (item, index) => (
139-
<TouchableOpacity style={styles.boxContainer} onPress={() => console.log(`Item ${item.text} pressed`)}>
140-
<View style={styles.box}>
142+
<View style={styles.boxContainer}>
143+
<Image
144+
source={{ uri: item.imageUrl }}
145+
style={styles.box}
146+
resizeMode="cover"
147+
/>
141148
<Text style={styles.text}>{item.text}</Text>
142149
</View>
143-
</TouchableOpacity>
144150
);
145151

146152
return (
@@ -254,7 +260,14 @@ A lower value results in more frequent updates, offering smoother visual updates
254260
<td><code>ViewStyle</code></td>
255261
<td><code>{}</code></td>
256262
<td><code>false</code></td>
257-
<td> Accepts a React Native ViewStyle object. This applied to the outermost container of the component, can be used to set a fixed width, height, etc </td>
263+
<td> Accepts a React Native <code>ViewStyle</code> object. This property applies to the outermost container of the component and can be used to set various styling aspects such as fixed width, height, background color, margin, padding, and more. </td>
264+
</tr>
265+
<tr>
266+
<td><code>itemContainerStyle</code></td>
267+
<td><code>ViewStyle</code></td>
268+
<td><code>{}</code></td>
269+
<td><code>false</code></td>
270+
<td> Accepts a React Native <code>ViewStyle</code> object. This applies to the container of each item in the grid layout and can be used to create a gap between each grid item with padding, apply background color, etc. </td>
258271
</tr>
259272
</tbody>
260273
</table>
@@ -350,7 +363,14 @@ A lower value results in more frequent updates, offering smoother visual updates
350363
<td><code>ViewStyle</code></td>
351364
<td><code>{}</code></td>
352365
<td><code>false</code></td>
353-
<td> Accepts a React Native ViewStyle object. This applied to the outermost container of the component, can be used to set a fixed width, height, etc </td>
366+
<td> Accepts a React Native <code>ViewStyle</code> object. This property applies to the outermost container of the component and can be used to set various styling aspects such as fixed width, height, background color, margin, padding, and more. </td>
367+
</tr>
368+
<tr>
369+
<td><code>itemContainerStyle</code></td>
370+
<td><code>ViewStyle</code></td>
371+
<td><code>{}</code></td>
372+
<td><code>false</code></td>
373+
<td> Accepts a React Native <code>ViewStyle</code> object. This applies to the container of each item in the grid layout and can be used to create a gap between each grid item with padding, apply background color, etc. </td>
354374
</tr>
355375
</tbody>
356376
</table>

‎example/src/GridBoardExample.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ export default function GridBoardExamplePage() {
4343
<View
4444
style={{
4545
flex: 1,
46-
padding: 10,
4746
}}
4847
>
4948
<View style={styles.card}>
@@ -165,6 +164,9 @@ export default function GridBoardExamplePage() {
165164
style={{
166165
flex: 1,
167166
}}
167+
itemContainerStyle={{
168+
padding: 10,
169+
}}
168170
/>
169171

170172
<Text

‎example/src/TileGrid.tsx‎

Lines changed: 40 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,39 @@ export default function TileGrid() {
3232
},
3333
];
3434

35+
const renderItem = (item: any, _: number) => {
36+
return (
37+
<TouchableOpacity
38+
style={{
39+
flex: 1,
40+
}}
41+
onPress={() => {
42+
console.log(item.text, 'pressed');
43+
}}
44+
>
45+
<View
46+
style={{
47+
width: '100%',
48+
height: '100%',
49+
backgroundColor: '#FFA502',
50+
justifyContent: 'center',
51+
alignItems: 'center',
52+
borderRadius: 5,
53+
}}
54+
>
55+
<Text
56+
style={{
57+
color: 'white',
58+
fontSize: 20,
59+
}}
60+
>
61+
{item.text}
62+
</Text>
63+
</View>
64+
</TouchableOpacity>
65+
);
66+
};
67+
3568
return (
3669
<View
3770
style={{
@@ -41,41 +74,13 @@ export default function TileGrid() {
4174
<ResponsiveGrid
4275
maxItemsPerColumn={4}
4376
data={data}
44-
renderItem={(item, _) => (
45-
<TouchableOpacity
46-
style={{
47-
backgroundColor: 'white',
48-
justifyContent: 'center',
49-
alignItems: 'center',
50-
width: '100%',
51-
height: '100%',
52-
padding: 2,
53-
}}
54-
onPress={() => {
55-
console.log(item.text, 'pressed');
56-
}}
57-
>
58-
<View
59-
style={{
60-
width: '100%',
61-
height: '100%',
62-
backgroundColor: '#FFA502',
63-
justifyContent: 'center',
64-
alignItems: 'center',
65-
borderRadius: 5,
66-
}}
67-
>
68-
<Text
69-
style={{
70-
color: 'white',
71-
fontSize: 20,
72-
}}
73-
>
74-
{item.text}
75-
</Text>
76-
</View>
77-
</TouchableOpacity>
78-
)}
77+
itemContainerStyle={{
78+
padding: 2,
79+
}}
80+
renderItem={renderItem}
81+
style={{
82+
backgroundColor: 'white',
83+
}}
7984
/>
8085
</View>
8186
);

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-flexible-grid",
3-
"version": "0.1.4",
3+
"version": "0.1.5",
44
"description": "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.",
55
"main": "lib/commonjs/index",
66
"module": "lib/module/index",
@@ -127,4 +127,4 @@
127127
"directories": {
128128
"example": "example"
129129
}
130-
}
130+
}

‎src/flex-grid/index.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export const FlexGrid: React.FC<FlexGridProps> = ({
1717
showScrollIndicator = true,
1818
renderItem = () => null,
1919
style = {},
20+
itemContainerStyle = {},
2021
}) => {
2122
const [visibleItems, setVisibleItems] = useState<FlexGridTile[]>([]);
2223

@@ -150,19 +151,21 @@ export const FlexGrid: React.FC<FlexGridProps> = ({
150151
style={{
151152
height: totalHeight,
152153
width: totalWidth,
153-
position: 'relative',
154154
}}
155155
>
156156
{renderedList.map((item, index) => (
157157
<View
158158
key={index}
159-
style={{
160-
position: 'absolute',
161-
top: item.top,
162-
left: item.left,
163-
width: (item.widthRatio || 1) * itemSizeUnit,
164-
height: (item.heightRatio || 1) * itemSizeUnit,
165-
}}
159+
style={[
160+
{
161+
position: 'absolute',
162+
top: item.top,
163+
left: item.left,
164+
width: (item.widthRatio || 1) * itemSizeUnit,
165+
height: (item.heightRatio || 1) * itemSizeUnit,
166+
},
167+
itemContainerStyle,
168+
]}
166169
>
167170
{renderItem(item, index)}
168171
</View>

‎src/flex-grid/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export interface FlexGridProps {
1111
scrollEventInterval?: number;
1212
showScrollIndicator?: boolean;
1313
style?: StyleProp<ViewStyle>;
14+
itemContainerStyle?: StyleProp<ViewStyle>;
1415
}
1516

1617
export interface FlexGridTile {

‎src/responsive-grid/index.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33

44
import React, { useEffect, useMemo, useRef, useState } from 'react';
55
import { ScrollView, View } from 'react-native';
6-
import type { FlexGridProps, TileItem } from './types';
6+
import type { ResponsiveGridProps, TileItem } from './types';
77
import { calcResponsiveGrid } from './calc-responsive-grid';
88
import type { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
99

10-
export const ResponsiveGrid: React.FC<FlexGridProps> = ({
10+
export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
1111
data = [],
1212
maxItemsPerColumn = 3,
1313
virtualizedBufferFactor = 5,
@@ -16,6 +16,7 @@ export const ResponsiveGrid: React.FC<FlexGridProps> = ({
1616
virtualization = true,
1717
showScrollIndicator = true,
1818
style = {},
19+
itemContainerStyle = {},
1920
itemUnitHeight,
2021
}) => {
2122
const [visibleItems, setVisibleItems] = useState<TileItem[]>([]);
@@ -115,13 +116,16 @@ export const ResponsiveGrid: React.FC<FlexGridProps> = ({
115116
{renderedItems.map((item, index) => (
116117
<View
117118
key={index}
118-
style={{
119-
position: 'absolute',
120-
top: item.top,
121-
left: item.left,
122-
width: item.width,
123-
height: item.height,
124-
}}
119+
style={[
120+
{
121+
position: 'absolute',
122+
top: item.top,
123+
left: item.left,
124+
width: item.width,
125+
height: item.height,
126+
},
127+
itemContainerStyle,
128+
]}
125129
>
126130
{renderItem(item, index)}
127131
</View>

‎src/responsive-grid/types.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { ReactNode } from 'react';
22
import type { StyleProp, ViewStyle } from 'react-native';
33

4-
export interface FlexGridProps {
4+
export interface ResponsiveGridProps {
55
renderItem: (item: TileItem, index: number) => ReactNode;
66
data: TileItem[];
77
maxItemsPerColumn: number;
@@ -10,6 +10,7 @@ export interface FlexGridProps {
1010
virtualizedBufferFactor?: number;
1111
showScrollIndicator?: boolean;
1212
style?: StyleProp<ViewStyle>;
13+
itemContainerStyle?: StyleProp<ViewStyle>;
1314
itemUnitHeight?: number;
1415
}
1516

0 commit comments

Comments
 (0)