{"id":17113328,"url":"https://github.com/hyochan/react-native-masonry-list","last_synced_at":"2025-05-16T03:02:04.213Z","repository":{"id":38411092,"uuid":"363569861","full_name":"hyochan/react-native-masonry-list","owner":"hyochan","description":"The Masonry List implementation which has similar implementation as the `FlatList` in React Native","archived":false,"fork":false,"pushed_at":"2024-03-27T15:13:18.000Z","size":3496,"stargazers_count":422,"open_issues_count":23,"forks_count":58,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-10T06:03:23.526Z","etag":null,"topics":["masonry","masonry-layout","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hyochan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-02T04:59:58.000Z","updated_at":"2025-04-25T06:22:09.000Z","dependencies_parsed_at":"2024-06-18T15:07:00.260Z","dependency_job_id":"3d520e74-541c-4d17-8dcd-419405a6f928","html_url":"https://github.com/hyochan/react-native-masonry-list","commit_stats":{"total_commits":55,"total_committers":9,"mean_commits":6.111111111111111,"dds":0.1454545454545455,"last_synced_commit":"a2b6346bc2c76b280881cc608786e875a1a94cfe"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyochan%2Freact-native-masonry-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyochan%2Freact-native-masonry-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyochan%2Freact-native-masonry-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyochan%2Freact-native-masonry-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hyochan","download_url":"https://codeload.github.com/hyochan/react-native-masonry-list/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254459077,"owners_count":22074604,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["masonry","masonry-layout","react-native"],"created_at":"2024-10-14T17:06:34.086Z","updated_at":"2025-05-16T03:02:04.166Z","avatar_url":"https://github.com/hyochan.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-native-masonry-list\n\n\u003e Pinterest like listview made in [React Native](https://reactnative.dev). It just behaves like the [FlatList](https://reactnative.dev/docs/next/flatlist) so it is easy to use.\n\n[![Npm Version](http://img.shields.io/npm/v/@react-native-seoul/masonry-list.svg?style=flat-square)](https://npmjs.org/package/@react-native-seoul/masonry-list)\n[![Downloads](http://img.shields.io/npm/dm/@react-native-seoul/masonry-list.svg?style=flat-square)](https://npmjs.org/package/@react-native-seoul/masonry-list)\n[![CI](https://github.com/hyochan/react-native-masonry-list/actions/workflows/ci.yml/badge.svg)](https://github.com/hyochan/react-native-masonry-list/actions/workflows/ci.yml)\n[![codecov](https://codecov.io/gh/hyochan/react-native-masonry-list/branch/main/graph/badge.svg?token=MSQVHOV57A)](https://codecov.io/gh/hyochan/react-native-masonry-list)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![LICENSE](http://img.shields.io/npm/l/@react-native-seoul/masonry-list.svg?style=flat-square)](https://npmjs.org/package/@react-native-seoul/masonry-list)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](CONTRIBUTING.md)\n[![supports iOS](https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square\u0026logo=APPLE\u0026labelColor=999999\u0026logoColor=fff)](https://itunes.apple.com/app/apple-store/id982107779)\n[![supports Android](https://img.shields.io/badge/Android-4630EB.svg?style=flat-square\u0026logo=ANDROID\u0026labelColor=A4C639\u0026logoColor=fff)](https://play.google.com/store/apps/details?id=host.exp.exponent\u0026referrer=www)\n[![supports web](https://img.shields.io/badge/web-4630EB.svg?style=flat-square\u0026logo=GOOGLE-CHROME\u0026labelColor=4285F4\u0026logoColor=fff)](https://docs.expo.io/workflow/web/)\n[![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-000.svg?style=flat\u0026logo=EXPO\u0026labelColor=ffffff\u0026logoColor=000)](https://github.com/expo/expo)\n\n## Notice\n\nIf you want [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) version, you may checkout [reanimated-masonry-list](https://github.com/hyochan/reanimated-masonry-list). This repo is created with issue [#14](https://github.com/hyochan/react-native-masonry-list/issues/14).\n\n## Installation\n\n```\nyarn add @react-native-seoul/masonry-list\n```\n\n```tsx\nimport MasonryList from '@react-native-seoul/masonry-list';\n```\n\n## Preview\n\n| 2-columns | 3-columns | 4-columns |\n|------------|:-----------:|:-----------:|\n|\u003cimg src=\"https://user-images.githubusercontent.com/27461460/116809803-f170e680-ab7a-11eb-8f16-e28a3ab0c741.gif\" width=200/\u003e|\u003cimg src=\"https://user-images.githubusercontent.com/27461460/116815966-08bfcc00-ab9b-11eb-9b9f-5928484217d9.gif\" width=200/\u003e|\u003cimg src=\"https://user-images.githubusercontent.com/27461460/116815949-f6459280-ab9a-11eb-8434-85f3cc834202.gif\" width=200/\u003e|\n\n\u003e You can use as many columns as you want. It is flexible!\n\n## YouTube\n\n[See how to use it](https://www.youtube.com/watch?v=QxSKAcKKW_Q)\n\n## Blog\n[How it is made](https://dooboolab.medium.com/react-native-masonry-list-a5365647f2c1)\n\n## Description\n\nCurrent `MasonryList` extends [ScrollView](https://reactnative.dev/docs/next/scrollview) and can pass down its props. Indeed, this looks similar to [FlatList](https://reactnative.dev/docs/next/flatlist) to provide good developer experience. Look how this is used and compare to the `FlatList`.\n\nThe `FlatList` won't offer you to draw `MansonryList` because when you provide [numColumns](https://reactnative.dev/docs/next/flatlist#numcolumns) bigger than `1`, the native view will switch to `FlatList` to `GridView` which will render its children with identical height only.\n\nOur `MasonryList` view component is able to render all child views with all different sizes.\n\n## Props\n\n```tsx\ninnerRef?: MutableRefObject\u003cScrollView | undefined\u003e;\nloading?: boolean;\nrefreshing?: RefreshControlProps['refreshing'];\nonRefresh?: RefreshControlProps['onRefresh'];\nonEndReached?: () =\u003e void;\nonEndReachedThreshold?: number;\nstyle?: StyleProp\u003cScrollViewProps\u003e;\ndata: T[];\nrenderItem: ({item: T, i: number}) =\u003e ReactElement;\nLoadingView?: React.ComponentType\u003cany\u003e | React.ReactElement | null;\nListHeaderComponent?: React.ComponentType\u003cany\u003e | React.ReactElement | null;\nListEmptyComponent?: React.ComponentType\u003cany\u003e | React.ReactElement | null;\nListFooterComponent?: React.ComponentType\u003cany\u003e | React.ReactElement | null;\nnumColumns?: number;\nkeyExtractor?: ((item: T | any, index: number) =\u003e string) | undefined;\n```\n\n**`innerRef`** -            Expose ScrollView instance with `ref`, example usage:  `ref.current.scrollTo`.\n\n**`loading`** -             Currently in loading status.\n\n**`refreshing`** -          Currently in refreshing status.\n\n**`onRefresh`** -           Callback when `refresh` has been triggered.\n\n**`onEndReached`** -        Callback when end is reached just like the [onEndReached in FlatList](https://reactnative.dev/docs/flatlist#onendreached)\n\n**`style`** -               Style props for [ScrollView](https://reactnative.dev/docs/next/scrollview) which is the container view.\n\n**`data`** -                The array of the `data` for the view to render in `renderItem`\n\n**`renderItem`** -          Render custom view with the `data` passed down.\n\n**`LoadingView`** -         Custom loading view when the view is in `loading` status.\n\n**`ListHeaderComponent`** - Header component\n\n**`ListFooterComponent`** - Footer component\n\n**`ListEmptyComponent`** -  Component to render when the `data` is empty.\n\n**`numColumns`** -          Number of columns you want to render. `Default to 2`.\n\n\n## Usage\n\n```tsx\n\u003cMasonryList\n  data={filteredItems}\n  keyExtractor={(item): string =\u003e item.id}\n  numColumns={2}\n  showsVerticalScrollIndicator={false}\n  renderItem={({item}) =\u003e \u003cCardItem /\u003e}\n  refreshing={isLoadingNext}\n  onRefresh={() =\u003e refetch({first: ITEM_CNT})}\n  onEndReachedThreshold={0.1}\n  onEndReached={() =\u003e loadNext(ITEM_CNT)}\n/\u003e\n```\n\n\n## Run Example\n1. Clone the repository.\n\n    ```\n    git clone https://github.com/hyochan/react-native-masonry-list.git\n    ```\n    \n2. Navigate to example project\n\n    ```\n    cd RNMasonryExample\n    ```\n\n3. Install packages and run it as you do in `react-native` project.\n\n\n## LICENSE\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fhyochan%2Freact-native-masonry-list.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fhyochan%2Freact-native-masonry-list?ref=badge_large)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyochan%2Freact-native-masonry-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyochan%2Freact-native-masonry-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyochan%2Freact-native-masonry-list/lists"}