Installations
npm install @react-native-seoul/masonry-listDeveloper Guide
Typescript
Yes
Module System
CommonJS
Score
36.2
Supply Chain
49.5
Quality
65.3
Maintenance
50
Vulnerability
88.7
License
Releases
Contributors
Unable to fetch Contributors
Languages
TypeScript (85.78%)
JavaScript (13.89%)
Shell (0.32%)
Developer
hyochan
Download Statistics
Total Downloads
929,322
Last Day
1,109
Last Week
6,040
Last Month
33,517
Last Year
396,001
GitHub Statistics
411 Stars
55 Commits
58 Forks
4 Watching
1 Branches
9 Contributors
Maintainers
Package Meta Information
Latest Version
1.4.2
Package Id
@react-native-seoul/masonry-list@1.4.2
Unpacked Size
16.52 kB
Size
6.06 kB
File Count
14
Publised On
06 Jun 2023
Total Downloads
Cumulative downloads
Total Downloads
929,322
Last day
-29.8%
1,109
Compared to previous day
Last week
-15.1%
6,040
Compared to previous week
Last month
14.1%
33,517
Compared to previous month
Last year
29.7%
396,001
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
3
Dev Dependencies
22
react-native-masonry-list
Pinterest like listview made in React Native. It just behaves like the FlatList so it is easy to use.
Notice
If you want react-native-reanimated version, you may checkout reanimated-masonry-list. This repo is created with issue #14.
Installation
yarn add @react-native-seoul/masonry-list
1import MasonryList from '@react-native-seoul/masonry-list';
Preview
| 2-columns | 3-columns | 4-columns |
|---|---|---|
 |  |  |
You can use as many columns as you want. It is flexible!
YouTube
Blog
Description
Current MasonryList extends ScrollView and can pass down its props. Indeed, this looks similar to FlatList to provide good developer experience. Look how this is used and compare to the FlatList.
The FlatList won't offer you to draw MansonryList because when you provide numColumns bigger than 1, the native view will switch to FlatList to GridView which will render its children with identical height only.
Our MasonryList view component is able to render all child views with all different sizes.
Props
1innerRef?: MutableRefObject<ScrollView | undefined>; 2loading?: boolean; 3refreshing?: RefreshControlProps['refreshing']; 4onRefresh?: RefreshControlProps['onRefresh']; 5onEndReached?: () => void; 6onEndReachedThreshold?: number; 7style?: StyleProp<ScrollViewProps>; 8data: T[]; 9renderItem: ({item: T, i: number}) => ReactElement; 10LoadingView?: React.ComponentType<any> | React.ReactElement | null; 11ListHeaderComponent?: React.ComponentType<any> | React.ReactElement | null; 12ListEmptyComponent?: React.ComponentType<any> | React.ReactElement | null; 13ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null; 14numColumns?: number; 15keyExtractor?: ((item: T | any, index: number) => string) | undefined;
innerRef - Expose ScrollView instance with ref, example usage: ref.current.scrollTo.
loading - Currently in loading status.
refreshing - Currently in refreshing status.
onRefresh - Callback when refresh has been triggered.
onEndReached - Callback when end is reached just like the onEndReached in FlatList
style - Style props for ScrollView which is the container view.
data - The array of the data for the view to render in renderItem
renderItem - Render custom view with the data passed down.
LoadingView - Custom loading view when the view is in loading status.
ListHeaderComponent - Header component
ListFooterComponent - Footer component
ListEmptyComponent - Component to render when the data is empty.
numColumns - Number of columns you want to render. Default to 2.
Usage
1<MasonryList 2 data={filteredItems} 3 keyExtractor={(item): string => item.id} 4 numColumns={2} 5 showsVerticalScrollIndicator={false} 6 renderItem={({item}) => <CardItem />} 7 refreshing={isLoadingNext} 8 onRefresh={() => refetch({first: ITEM_CNT})} 9 onEndReachedThreshold={0.1} 10 onEndReached={() => loadNext(ITEM_CNT)} 11/>
Run Example
-
Clone the repository.
git clone https://github.com/hyochan/react-native-masonry-list.git -
Navigate to example project
cd RNMasonryExample -
Install packages and run it as you do in
react-nativeproject.
LICENSE
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 5/30 approved changesets -- score normalized to 1
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/ci-example.yml:1
- Warn: no topLevel permission defined: .github/workflows/ci.yml:1
- Warn: no topLevel permission defined: .github/workflows/publish-package.yml:1
- Info: no jobLevel write permissions found
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-example.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/hyochan/react-native-masonry-list/ci-example.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/hyochan/react-native-masonry-list/ci.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/hyochan/react-native-masonry-list/ci.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-package.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/hyochan/react-native-masonry-list/publish-package.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-package.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/hyochan/react-native-masonry-list/publish-package.yml/main?enable=pin
- Info: 0 out of 4 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'main'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 13 are checked with a SAST tool
Reason
57 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-593m-55hh-j8gv
- Warn: Project is vulnerable to: GHSA-c2jc-4fpr-4vhg
- Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-33f9-j839-rf8h
- Warn: Project is vulnerable to: GHSA-c36v-fmgq-m8hx
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
- Warn: Project is vulnerable to: GHSA-2j79-8pqc-r7x6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
Score
2.6
/10
Last Scanned on 2025-01-27
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More