{"id":31711058,"url":"https://github.com/callstack/masked-view","last_synced_at":"2025-10-09T00:53:18.730Z","repository":{"id":38460684,"uuid":"169555970","full_name":"callstack/masked-view","owner":"callstack","description":"React Native Masked View Library","archived":false,"fork":false,"pushed_at":"2024-11-04T05:19:29.000Z","size":1560,"stargazers_count":1097,"open_issues_count":60,"forks_count":129,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-09-30T01:10:21.250Z","etag":null,"topics":["hacktoberfest","masked-view","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/callstack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-07T10:42:47.000Z","updated_at":"2025-09-29T19:18:25.000Z","dependencies_parsed_at":"2024-06-18T12:16:44.144Z","dependency_job_id":"7e9b3852-e2a8-440b-95eb-2669f67034fa","html_url":"https://github.com/callstack/masked-view","commit_stats":{"total_commits":137,"total_committers":34,"mean_commits":4.029411764705882,"dds":0.708029197080292,"last_synced_commit":"a6e0d3d8da8c65bcf3e7f596bbbf453abf1866c9"},"previous_names":["react-native-community/react-native-masked-view"],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/callstack/masked-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Fmasked-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Fmasked-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Fmasked-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Fmasked-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/callstack","download_url":"https://codeload.github.com/callstack/masked-view/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Fmasked-view/sbom","scorecard":{"id":765546,"data":{"date":"2025-08-11","repo":{"name":"github.com/react-native-masked-view/masked-view","commit":"14df52650be2441fbf6f2a0308cc54a62e68820c"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.2,"checks":[{"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":"Binary-Artifacts","score":9,"reason":"binaries present in source code","details":["Warn: binary detected: example/android/gradle/wrapper/gradle-wrapper.jar:1"],"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":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/ci.yml:1","Info: no jobLevel write permissions found"],"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":"Code-Review","score":5,"reason":"Found 10/19 approved changesets -- score normalized to 5","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":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","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":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-masked-view/masked-view/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-masked-view/masked-view/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-masked-view/masked-view/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-masked-view/masked-view/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-masked-view/masked-view/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-masked-view/masked-view/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-masked-view/masked-view/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-masked-view/masked-view/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-masked-view/masked-view/ci.yml/master?enable=pin","Info:   0 out of   9 GitHub-owned GitHubAction dependencies pinned"],"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":"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":"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":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"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":"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":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"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":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 27 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":"16 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-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693"],"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-23T00:39:49.910Z","repository_id":38460684,"created_at":"2025-08-23T00:39:49.910Z","updated_at":"2025-08-23T00:39:49.910Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000641,"owners_count":26082879,"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","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"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":["hacktoberfest","masked-view","react-native"],"created_at":"2025-10-09T00:53:16.244Z","updated_at":"2025-10-09T00:53:18.723Z","avatar_url":"https://github.com/callstack.png","language":"JavaScript","readme":"# React Native `MaskedView`\n\n[![Build Status][build-badge]][build]\n[![Version][version-badge]][package]\n[![MIT License][license-badge]][license]\n[![Lean Core Badge][lean-core-badge]][lean-core-issue]\n\nProvides a React component that renders a masked view.\n\n## Platforms Supported\n\n- [x] iOS\n- [x] Android\n- [x] Web\n\n## Getting Started\n\n```sh\nyarn add @react-native-masked-view/masked-view\n```\n\nor\n\n```sh\nnpm install --save @react-native-masked-view/masked-view\n```\n\n### Using React Native \u003e= 0.60\n\nLinking the package manually is not required anymore with [Autolinking](https://github.com/react-native-masked-view/cli/blob/master/docs/autolinking.md).\n\nRemember to install the pod with:\n\n```sh\nnpx pod-install\n```\n\n### Using React Native \u003c 0.60\n\nYou then need to link the native parts of the library for the platforms you are using. The easiest way to link the library is using the CLI tool by running this command from the root of your project:\n\n```sh\nreact-native link @react-native-masked-view/masked-view\n```\n\n## Usage\n\nImport the `MaskedView` component from `@react-native-masked-view/masked-view` and use it like so:\n\n```jsx\nimport React from 'react';\nimport { Text, View } from 'react-native';\nimport MaskedView from '@react-native-masked-view/masked-view';\n\nconst App = () =\u003e {\n  return (\n    \u003cMaskedView\n      style={{ flex: 1, flexDirection: 'row', height: '100%' }}\n      maskElement={\n        \u003cView\n          style={{\n            // Transparent background because mask is based off alpha channel.\n            backgroundColor: 'transparent',\n            flex: 1,\n            justifyContent: 'center',\n            alignItems: 'center',\n          }}\n        \u003e\n          \u003cText\n            style={{\n              fontSize: 60,\n              color: 'black',\n              fontWeight: 'bold',\n            }}\n          \u003e\n            Basic Mask\n          \u003c/Text\u003e\n        \u003c/View\u003e\n      }\n    \u003e\n      {/* Shows behind the mask, you can put anything here, such as an image */}\n      \u003cView style={{ flex: 1, height: '100%', backgroundColor: '#324376' }} /\u003e\n      \u003cView style={{ flex: 1, height: '100%', backgroundColor: '#F5DD90' }} /\u003e\n      \u003cView style={{ flex: 1, height: '100%', backgroundColor: '#F76C5E' }} /\u003e\n      \u003cView style={{ flex: 1, height: '100%', backgroundColor: '#e1e1e1' }} /\u003e\n    \u003c/MaskedView\u003e\n  );\n}\n\nexport default App\n```\n\nThe following image demonstrates that you can put almost anything behind the mask. The three examples shown are masked `\u003cView\u003e`, `\u003cText\u003e`, and `\u003cImage\u003e`.\n\n\u003cdiv align=\"center\"\u003e\u003cimg src=\"img/example.png\" width=\"200\"\u003e\u003c/img\u003e\u003c/div\u003e\n\n### Web Usage\n\nyou need to install moden-screenshot package for web usage:\n```sh\nyarn add modern-screenshot\n```\n\n### Props\n\n- [View props...](https://github.com/facebook/react-native-website/blob/master/docs/view.md#props)\n\n- [`maskElement`](#maskelement)\n\n- [`androidRenderingMode`](#androidrenderingmode)\n\n### Reference\n\n### `maskElement`\n\n| Type    | Required |\n| ------- | -------- |\n| element | Yes      |\n\n### `androidRenderingMode`\n\nBy default `hardware` rendering mode will be used for best performance, however if you need to animate your `maskElement` then you’ll need to switch to `software` to get your mask to update. This prop only affects Android.\n\n| Type                   | Required | Default    |\n| ---------------------- | -------- | ---------- |\n| `software`, `hardware` | No       | `hardware` |\n\n\u003c!-- badges --\u003e\n\n[build-badge]: https://github.com/react-native-masked-view/masked-view/workflows/Build/badge.svg\n[build]: https://github.com/react-native-masked-view/masked-view/actions\n[version-badge]: https://img.shields.io/npm/v/@react-native-masked-view/masked-view.svg?style=flat-square\n[package]: https://www.npmjs.com/package/@react-native-masked-view/masked-view\n[license-badge]: https://img.shields.io/npm/l/@react-native-masked-view/masked-view.svg?style=flat-square\n[license]: https://opensource.org/licenses/MIT\n[lean-core-badge]: https://img.shields.io/badge/Lean%20Core-Extracted-brightgreen.svg?style=flat-square\n[lean-core-issue]: https://github.com/facebook/react-native/issues/23313\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcallstack%2Fmasked-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcallstack%2Fmasked-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcallstack%2Fmasked-view/lists"}