{"id":25880910,"url":"https://github.com/sauldom102/react-native-json-grid-list","last_synced_at":"2026-04-30T11:34:53.634Z","repository":{"id":41779928,"uuid":"223804335","full_name":"sauldom102/react-native-json-grid-list","owner":"sauldom102","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-27T05:18:05.000Z","size":15470,"stargazers_count":2,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-07T07:29:08.365Z","etag":null,"topics":["android","component","flatlist","flatlist-grid","grid","ios","mobile","react","react-native","reactjs","reactnative"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sauldom102.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-24T20:18:16.000Z","updated_at":"2021-09-25T17:23:10.000Z","dependencies_parsed_at":"2023-02-16T12:15:43.516Z","dependency_job_id":null,"html_url":"https://github.com/sauldom102/react-native-json-grid-list","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sauldom102/react-native-json-grid-list","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sauldom102%2Freact-native-json-grid-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sauldom102%2Freact-native-json-grid-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sauldom102%2Freact-native-json-grid-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sauldom102%2Freact-native-json-grid-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sauldom102","download_url":"https://codeload.github.com/sauldom102/react-native-json-grid-list/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sauldom102%2Freact-native-json-grid-list/sbom","scorecard":{"id":801761,"data":{"date":"2025-08-11","repo":{"name":"github.com/sauldom102/react-native-json-grid-list","commit":"a70de33aca1fa4c12ebcdb9449c0744b87bb9f9b"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.3,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/11 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Security-Policy","score":0,"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"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"SAST","score":0,"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"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"17 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-7gc6-qh9x-w6h8","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T10:41:05.741Z","repository_id":41779928,"created_at":"2025-08-23T10:41:05.741Z","updated_at":"2025-08-23T10:41:05.741Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32463892,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T22:27:22.272Z","status":"online","status_checked_at":"2026-04-30T02:00:05.929Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["android","component","flatlist","flatlist-grid","grid","ios","mobile","react","react-native","reactjs","reactnative"],"created_at":"2025-03-02T14:26:24.214Z","updated_at":"2026-04-30T11:34:48.625Z","avatar_url":"https://github.com/sauldom102.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native JSON Grid List\n\nThis library will help you create impressive grid lists like these.\n\n| List 1                     | List 2                     |\n| -------------------------- | -------------------------- |\n| ![](docs/images/list1.png) | ![](docs/images/list2.png) |\n\n| List 3                     | List 4                     |\n| -------------------------- | -------------------------- |\n| ![](docs/images/list3.png) | ![](docs/images/list4.png) |\n\n## Getting started\n\nTwo main components are exported from this library: `FlatGrid` and `GridItem`. The most common use case is just using the first one, you won't need to use `GridItem` unless you want to show a grid outside of a list.\n\nMany grid templates are already created so you won't have to make your owns if you are comfortable with the ones which are included.\n\n### Installing\n\nYou can install the package via npm or yarn.\n\n```bash\nnpm install -S react-native-json-grid-list\n```\n\nor\n\n```bash\nyarn add react-native-json-grid-list\n```\n\n### Usage\n\n#### Usage (FlatGrid)\n\nImport the `FlatGrid` component.\n\n```javascript\nimport FlatGrid, {LAYOUTS} from 'react-native-json-grid-list';\n```\n\nNow let's define what will be the content of our items. In this case, we just want a random photo from [Unspash](https://unsplash.com).\n\n```javascript\nconst ITEM_CONTENT = {\n  photo: {\n    uri: 'https://source.unsplash.com/random',\n  },\n};\n```\n\nRender our grid list.\n\n```javascript\n\u003cFlatGrid\n  data={[\n    {\n      layout: 'layout-1',\n      items: {\n        'item-1': ITEM_CONTENT,\n        'item-2': ITEM_CONTENT,\n        'item-3': ITEM_CONTENT,\n        'item-4': ITEM_CONTENT,\n      },\n    },\n  ]}\n  layouts={LAYOUTS}\n  rowSeparator={8}\n  paddingHorizontal={8}\n  showsVerticalScrollIndicator={false}\n/\u003e\n```\n\n##### Properties\n\n| Property          | Type                                           | Default value                         |  Description           |\n| ----------------- | ---------------------------------------------- | ------------------------------------- | ---------------------- |\n| rowSeparator      | number                                         |                                       | Separator between rows |\n| paddingHorizontal | number                                         |                                       | Padding horizontal     |\n| layouts           | [Layouts](src/components/FlatGrid/types.ts)    | [LAYOUTS](src/models/Layout/mock.tsx) | Layout definition      |\n| data              | [ItemType[]](src/components/FlatGrid/types.ts) |                                       | Items                  |\n\n## How to create your own layouts\n\nJust the same way as you would nest components to get the layout you want, you can create your own grid layouts writing it in JSON format following some rules.\n\nWe got three layout types:\n\n1. Rows:\n\n```js\n{\n  \"id\": \"row-1\",\n  \"type\": \"row\",\n  \"flex\": 2,\n  \"layouts\": [\n    // ...more rows, columns or items\n  ]\n}\n```\n\n2. Columns:\n\n```js\n// You can omit flex attribute if it's equal to 1\n{\n  \"id\": \"col-1\",\n  \"type\": \"column\",\n  // \"flex\": 1,\n  \"layouts\": [\n    // ...more rows, columns or items\n  ]\n}\n```\n\n3. Items:\n\n```js\n// You can omit flex attribute if it's equal to 1\n{\n  \"id\": \"item-1\",\n  // \"flex\": 1,\n\n  // add an overlay\n  \"overlay\": {\n    \"color\": \"#f00\",\n    \"opacity\": .6\n  }\n}\n```\n\n### Layout examples\n\n```js\n// Note that you can omit flex when it's equal to 1\n{\n  \"spacing\": 8,\n  \"height\": 350,\n  \"layouts\": [\n    {\n      \"id\": \"column-1\",\n      \"type\": \"column\",\n      \"layouts\": [\n        {\n          \"id\": \"item-1\",\n          \"flex\": 2,\n        },\n        {\n          \"id\": \"item-2\",\n          // \"flex\": 1\n        },\n      ],\n    },\n    {\n      \"id\": \"item-3\"\n      // \"flex\": 1\n    },\n  ]\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsauldom102%2Freact-native-json-grid-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsauldom102%2Freact-native-json-grid-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsauldom102%2Freact-native-json-grid-list/lists"}