Skip to content

Commit 6af72a3

Browse files
numandev1numandev1
committed
chore: prepare first version
1 parent 5a5a163 commit 6af72a3

15 files changed

Lines changed: 16651 additions & 57 deletions

File tree

‎README.md‎

Lines changed: 73 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,91 @@
1-
# react-native-masonry-flatlist
1+
### Would you like to support me?
22

3-
Pure js Masonry Flatlist
3+
<div align="center">
4+
<a href="https://github.com/nomi9995?tab=followers">
5+
<img src="https://img.shields.io/github/followers/nomi9995?label=Follow%20%40nomi9995&style=social" />
6+
</a>
7+
</br>
8+
<a href="https://www.buymeacoffee.com/numan.dev" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>
9+
</div>
10+
11+
# react-native-masonry-grid
12+
13+
Customizable masonry Flatlist. it just behave like [Flatlist](https://reactnative.dev/docs/flatlist) but using [ScrollView](https://reactnative.dev/docs/scrollview) behind the scene
414

515
## Installation
616

717
```sh
8-
npm install react-native-masonry-flatlist
18+
npm install react-native-masonry-grid
919
```
1020

21+
## Preview
22+
23+
| ![](media/2columns.gif) | ![](media/2columns.gif) | ![](media/4columns.gif) |
24+
| :---------------------: | :---------------------: | :---------------------: |
25+
| 2-columns | 3-columns | 4-columns |
26+
1127
## Usage
1228

1329
```js
14-
import { multiply } from "react-native-masonry-flatlist";
30+
import MasonryFlatlist from 'react-native-masonry-grid';
1531

1632
// ...
33+
const DATA = [
34+
{
35+
name: 'Coffee Now!',
36+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/eac92236-0e4f-466a-9bc2-e68a04bb96ad_NowCoffeeNew.png',
37+
height: 136, // Mendatory and can be dynamic for each item
38+
}
39+
]
40+
41+
<MasonryFlatlist
42+
data={DATA}
43+
numColumns={3} // for number of columns
44+
columnWrapperStyle={styles.columnWrapperStyle}
45+
showsVerticalScrollIndicator={false}
46+
style={styles.masonryFlatlist}
47+
renderItem={({ item, index }) => {
48+
return <Card data={item} height={item.height} onPress={() => {}} />;
49+
}}
50+
/>
51+
```
1752

18-
const result = await multiply(3, 7);
53+
## Props
54+
55+
```
56+
interface Props extends ScrollViewProps {
57+
numColumns?: number;
58+
loading?: boolean;
59+
LoadingView?: React.ReactNode | React.ReactElement | null;
60+
61+
columnWrapperStyle: StyleProp<ViewStyle>;
62+
ListHeaderComponent?: React.ReactNode | React.ReactElement | null;
63+
ListEmptyComponent?: typeof React.Fragment | React.ReactElement | null;
64+
ListFooterComponent?: React.ReactNode | React.ReactElement | null;
65+
ListHeaderComponentStyle?: StyleProp<ViewStyle>;
66+
contentContainerStyle?: StyleProp<ViewStyle>;
67+
containerStyle?: StyleProp<ViewStyle>;
68+
onRefresh?: RefreshControlProps['onRefresh'];
69+
onEndReached?: () => void;
70+
keyExtractor?: ((item: any, index: number) => string) | undefined;
71+
onEndReachedThreshold?: number;
72+
style?: StyleProp<ViewStyle>;
73+
data: any[];
74+
renderItem: ({ item, index }: { item: any; index: number }) => ReactElement;
75+
76+
}
1977
```
2078

79+
| name | required | default | description |
80+
| ------------------ | -------- | ------- | -------------------------------------------------------------------------------------- |
81+
| numColumns | no | 2 | Number of columns you want to render. |
82+
| columnWrapperStyle | no | null | Optional custom style for multi-item rows generated when `numColumns > 1`. |
83+
| loading | no | false | for enabling loadingView. |
84+
| LoadingView | no | null | Loader component will be show when loading prop will true. |
85+
| ref | no | null | it will be forwardRef to `ScrollView` then you can use all props of scrollview by ref. |
86+
87+
**Note:** Other props are the same as [Flatlist](https://reactnative.dev/docs/flatlist). you can read flatlist docs for other props which are in props but not in the props table.
88+
2189
## Contributing
2290

2391
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

‎example/app.json‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,16 @@
11
{
2-
"name": "react-native-masonry-flatlist-example",
2+
"name": "react-native-masonry-grid-example",
33
"displayName": "MasonryFlatlist Example",
44
"expo": {
5-
"name": "react-native-masonry-flatlist-example",
6-
"slug": "react-native-masonry-flatlist-example",
7-
"description": "Example app for react-native-masonry-flatlist",
5+
"name": "react-native-masonry-grid-example",
6+
"slug": "react-native-masonry-grid-example",
7+
"description": "Example app for react-native-masonry-grid",
88
"privacy": "public",
99
"version": "1.0.0",
10-
"platforms": [
11-
"ios",
12-
"android",
13-
"web"
14-
],
10+
"platforms": ["ios", "android", "web"],
1511
"ios": {
1612
"supportsTablet": true
1713
},
18-
"assetBundlePatterns": [
19-
"**/*"
20-
]
14+
"assetBundlePatterns": ["**/*"]
2115
}
2216
}

‎example/metro.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const path = require('path');
2-
const blacklist = require('metro-config/src/defaults/blacklist');
2+
const blacklist = require('metro-config/src/defaults/exclusionList');
33
const escape = require('escape-string-regexp');
44
const pak = require('../package.json');
55

‎example/package.json‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"name": "react-native-masonry-flatlist-example",
3-
"description": "Example app for react-native-masonry-flatlist",
2+
"name": "react-native-masonry-grid-example",
3+
"description": "Example app for react-native-masonry-grid",
44
"version": "0.0.1",
55
"private": true,
66
"main": "index",
@@ -12,19 +12,20 @@
1212
"test": "jest"
1313
},
1414
"dependencies": {
15-
"expo": "^42.0.0",
16-
"expo-splash-screen": "~0.11.2",
17-
"react": "16.13.1",
18-
"react-dom": "16.13.1",
19-
"react-native": "0.63.4",
20-
"react-native-unimodules": "~0.14.5",
21-
"react-native-web": "~0.13.12"
15+
"expo": "~46.0.9",
16+
"expo-status-bar": "~1.4.0",
17+
"react": "18.0.0",
18+
"react-dom": "18.0.0",
19+
"react-native": "0.69.5",
20+
"react-native-web": "~0.18.7"
2221
},
2322
"devDependencies": {
24-
"@babel/core": "~7.9.0",
23+
"@babel/core": "^7.18.6",
2524
"@babel/runtime": "^7.9.6",
25+
"@types/react": "~18.0.14",
26+
"@types/react-native": "^0.69.6",
2627
"babel-plugin-module-resolver": "^4.0.0",
27-
"babel-preset-expo": "8.3.0",
28-
"expo-cli": "^4.0.13"
28+
"babel-preset-expo": "~9.2.0",
29+
"typescript": "~4.3.5"
2930
}
3031
}

‎example/src/App.tsx‎

Lines changed: 179 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,181 @@
11
import * as React from 'react';
22

3-
import { StyleSheet, View, Text } from 'react-native';
4-
import { multiply } from 'react-native-masonry-flatlist';
3+
import { StyleSheet, View } from 'react-native';
4+
import MasonryFlatlist from 'react-native-masonry-grid';
5+
import Card from './component/Card';
56

6-
export default function App() {
7-
const [result, setResult] = React.useState<number | undefined>();
8-
9-
React.useEffect(() => {
10-
multiply(3, 7).then(setResult);
11-
}, []);
7+
const DATA = [
8+
{
9+
name: 'Coffee Now!',
10+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/eac92236-0e4f-466a-9bc2-e68a04bb96ad_NowCoffeeNew.png',
11+
height: 136,
12+
id: '211',
13+
},
14+
{
15+
name: 'Fruits & vegetables',
16+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/4fa903f6-8de2-42fe-b0a0-d69a6c6aed05_Fruitsvegetables.png',
17+
height: 136,
18+
id: '11',
19+
},
20+
{
21+
name: 'Snacks & Candy',
22+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/31f8537a-dd16-460d-a13a-7753cbcef288_snakscancy.png',
23+
height: 280,
24+
id: '1',
25+
},
26+
{
27+
name: 'Beverages & Drinks',
28+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/c5a9e597-d511-4581-a97e-377a1af7d1ae_BeveragesDrinks.png',
29+
height: 136,
30+
id: '6',
31+
},
32+
{
33+
name: 'Dairy & Eggs',
34+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/e2f02d7d-ca52-4482-a85f-ec1ddbeb1f92_DairyEggs.png',
35+
height: 280,
36+
id: '8',
37+
},
38+
{
39+
name: 'Milk & Laban',
40+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/8e8bac9b-38e4-437b-8b81-77449a2403ce_MilkLaban.png',
41+
height: 136,
42+
id: '5',
43+
},
44+
{
45+
name: 'Ice Cream',
46+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/cf85db2f-dd1a-4feb-b380-2b5583985523_ice-cream.png',
47+
height: 280,
48+
id: '2',
49+
},
50+
{
51+
name: 'Bakery',
52+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/983ba625-85bb-49ec-afde-88d276e2b5ed_Bakery.png',
53+
height: 136,
54+
id: '7',
55+
},
56+
{
57+
name: 'Fresh Poultry & Meat',
58+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/e3e39b42-7c25-4e16-89c3-fc4322cffaff_FreshPoultryMeat.png',
59+
height: 136,
60+
id: '15',
61+
},
62+
{
63+
name: 'For your guests',
64+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/236586b5-183b-4cdc-a0fc-7e9bf6fe9700_eidcategory_Eidcategory.png',
65+
height: 136,
66+
id: '221',
67+
},
68+
{
69+
name: 'Canned food',
70+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/6a47741a-d3a8-42fe-b4dc-88373c97a16e_cannedfood.png',
71+
height: 136,
72+
id: '13',
73+
},
74+
{
75+
name: 'Water & Ice',
76+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/980e8f60-4cf9-4bea-a941-b7a6859250d1_WaterIce.png',
77+
height: 136,
78+
id: '3',
79+
},
80+
{
81+
name: 'Coffee & Tea',
82+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/06b262ca-bef4-43c8-8ca3-ef52bb6f0135_CoffeeTea.png',
83+
height: 280,
84+
id: '17',
85+
},
86+
{
87+
name: 'Condiments',
88+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/6287f181-9819-4efb-9dcb-a19f75873d07_Condiments.png',
89+
height: 280,
90+
id: '16',
91+
},
92+
{
93+
name: 'Ready to Eat',
94+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/64f45280-b836-44ac-bf0c-0d740907e11e_Readytoeat.png',
95+
height: 136,
96+
id: '26',
97+
},
98+
{
99+
name: 'Pet Supplies',
100+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/228d9fc3-a562-4466-ad40-918e6780d021_PetSupplies.png',
101+
height: 136,
102+
id: '25',
103+
},
104+
{
105+
name: 'Disposables',
106+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/bb3860c5-9232-40e0-882d-4ad32d67044e_Disposables.png',
107+
height: 280,
108+
id: '24',
109+
},
110+
{
111+
name: 'Baby Products',
112+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/c74e261e-066c-4b55-bc17-5ec5dc2ea621_Baby.png',
113+
height: 136,
114+
id: '23',
115+
},
116+
{
117+
name: 'Household essentials',
118+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/df65739a-ccbf-4acf-8aa1-cc99a8a7b4f4_Householdessentials.png',
119+
height: 136,
120+
id: '22',
121+
},
122+
{
123+
name: 'Pharmacy',
124+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/76fda727-634c-4f0d-be16-84069177e8f2_Pharmacy.png',
125+
height: 136,
126+
id: '21',
127+
},
128+
{
129+
name: 'Beauty and Personal Care',
130+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/1ff6d157-98f2-421f-b00b-00b59cde02b5_BeautyandPersonalCare.png',
131+
height: 136,
132+
id: '20',
133+
},
134+
{
135+
name: 'Cleaning and Laundry',
136+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/ecb6ba83-ef06-4e58-8a05-03cc45f737e6_CleaningandLaundry.png',
137+
height: 136,
138+
id: '19',
139+
},
140+
{
141+
name: 'Frozen Food',
142+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/43849a44-f9e2-4010-a3d5-5bc813d7708a_Frozenfood.png',
143+
height: 136,
144+
id: '14',
145+
},
146+
{
147+
name: 'Healthy Destination',
148+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/392127a1-5150-47ec-bac9-98b59e4f22bf_Organic.png',
149+
height: 136,
150+
id: '12',
151+
},
152+
{
153+
name: 'Breakfast',
154+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/5bc0c75c-de40-4b8f-a678-20916cb6bb5b_Breakfast.png',
155+
height: 136,
156+
id: '10',
157+
},
158+
{
159+
name: 'Cooking & Baking',
160+
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/b58b1a50-2dad-4db1-b744-921dd4efc120_CookingBaking.png',
161+
height: 136,
162+
id: '9',
163+
},
164+
];
12165

166+
export default function App() {
13167
return (
14168
<View style={styles.container}>
15-
<Text>Result: {result}</Text>
169+
<MasonryFlatlist
170+
data={DATA}
171+
numColumns={4}
172+
showsVerticalScrollIndicator={false}
173+
columnWrapperStyle={styles.columnWrapperStyle}
174+
style={styles.masonryFlatlist}
175+
renderItem={({ item, index }) => {
176+
return <Card data={item} height={item.height} onPress={() => {}} />;
177+
}}
178+
/>
16179
</View>
17180
);
18181
}
@@ -22,10 +185,13 @@ const styles = StyleSheet.create({
22185
flex: 1,
23186
alignItems: 'center',
24187
justifyContent: 'center',
188+
marginHorizontal: 16,
189+
marginVertical: 32,
190+
},
191+
columnWrapperStyle: {
192+
marginTop: 8,
25193
},
26-
box: {
27-
width: 60,
28-
height: 60,
29-
marginVertical: 20,
194+
masonryFlatlist: {
195+
marginTop: 8,
30196
},
31197
});

0 commit comments

Comments
 (0)