https://github.com/numandev1/react-native-masonry-grid
Customizable masonry Flatlist. it just behave like Flatlist but using ScrollView behind the scene
https://github.com/numandev1/react-native-masonry-grid
android flatlist gallery grid grid-layout ios list masonry masonry-flatlist masonry-grid masonry-list masonry-scroll pinterest react-native scrollview
Last synced: about 1 year ago
JSON representation
Customizable masonry Flatlist. it just behave like Flatlist but using ScrollView behind the scene
- Host: GitHub
- URL: https://github.com/numandev1/react-native-masonry-grid
- Owner: numandev1
- License: mit
- Created: 2022-08-31T06:13:48.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-08-31T06:30:45.000Z (almost 4 years ago)
- Last Synced: 2025-05-12T21:13:24.879Z (about 1 year ago)
- Topics: android, flatlist, gallery, grid, grid-layout, ios, list, masonry, masonry-flatlist, masonry-grid, masonry-list, masonry-scroll, pinterest, react-native, scrollview
- Language: TypeScript
- Homepage:
- Size: 3.56 MB
- Stars: 8
- Watchers: 1
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
### Would you like to support me?
# react-native-masonry-grid
Customizable masonry Flatlist. it just behave like [Flatlist](https://reactnative.dev/docs/flatlist) but using [ScrollView](https://reactnative.dev/docs/scrollview) behind the scene
## Installation
```sh
npm install react-native-masonry-grid
```
## Preview
|  |  |  |
| :---------------------: | :---------------------: | :---------------------: |
| 2-columns | 3-columns | 4-columns |
## Usage
```js
import MasonryFlatlist from 'react-native-masonry-grid';
// ...
const DATA = [
{
name: 'Coffee Now!',
url: 'https://mp-staging-ix.onshobbak.net/media/ninja-catalog-42/eac92236-0e4f-466a-9bc2-e68a04bb96ad_NowCoffeeNew.png',
height: 136, // Mendatory and can be dynamic for each item
}
]
{
return {}} />;
}}
/>
```
## Props
```
interface Props extends ScrollViewProps {
numColumns?: number;
loading?: boolean;
LoadingView?: React.ReactNode | React.ReactElement | null;
columnWrapperStyle: StyleProp;
ListHeaderComponent?: React.ReactNode | React.ReactElement | null;
ListEmptyComponent?: typeof React.Fragment | React.ReactElement | null;
ListFooterComponent?: React.ReactNode | React.ReactElement | null;
ListHeaderComponentStyle?: StyleProp;
contentContainerStyle?: StyleProp;
containerStyle?: StyleProp;
onRefresh?: RefreshControlProps['onRefresh'];
onEndReached?: () => void;
keyExtractor?: ((item: any, index: number) => string) | undefined;
onEndReachedThreshold?: number;
style?: StyleProp;
data: any[];
renderItem: ({ item, index }: { item: any; index: number }) => ReactElement;
}
```
| name | required | default | description |
| ------------------ | -------- | ------- | -------------------------------------------------------------------------------------- |
| numColumns | no | 2 | Number of columns you want to render. |
| columnWrapperStyle | no | null | Optional custom style for multi-item rows generated when `numColumns > 1`. |
| loading | no | false | for enabling loadingView. |
| LoadingView | no | null | Loader component will be show when loading prop will true. |
| ref | no | null | it will be forwardRef to `ScrollView` then you can use all props of scrollview by ref. |
**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.
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT