Gathering detailed insights and metrics for @react-native-masked-view/masked-view
Gathering detailed insights and metrics for @react-native-masked-view/masked-view
React Native Masked View Library
Installations
npm install @react-native-masked-view/masked-viewDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
20.8.1
NPM Version
10.1.0
Releases
14
Languages
4
JavaScript
Java
Objective-C
Ruby
JavaScript (55.92%)
Java (28.88%)
Objective-C (10.75%)
Ruby (4.45%)
Developer
react-native-masked-view
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
1,071 Stars
176 Commits
128 Forks
10 Watchers
9 Branches
33 Contributors
Updated on Jul 12, 2025
Maintainers
2
Package Meta Information
Latest Version
0.3.2
Package Id
@react-native-masked-view/masked-view@0.3.2
Unpacked Size
57.62 kB
Size
36.01 kB
File Count
20
NPM Version
10.1.0
Node Version
20.8.1
Published on
Nov 04, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
React Native MaskedView
Provides a React component that renders a masked view.
Platforms Supported
- iOS
- Android
- Web
Getting Started
1yarn add @react-native-masked-view/masked-viewor
1npm install --save @react-native-masked-view/masked-view
Using React Native >= 0.60
Linking the package manually is not required anymore with Autolinking.
Remember to install the pod with:
1npx pod-install
Using React Native < 0.60
You 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:
1react-native link @react-native-masked-view/masked-view
Usage
Import the MaskedView component from @react-native-masked-view/masked-view and use it like so:
1import React from 'react'; 2import { Text, View } from 'react-native'; 3import MaskedView from '@react-native-masked-view/masked-view'; 4 5const App = () => { 6 return ( 7 <MaskedView 8 style={{ flex: 1, flexDirection: 'row', height: '100%' }} 9 maskElement={ 10 <View 11 style={{ 12 // Transparent background because mask is based off alpha channel. 13 backgroundColor: 'transparent', 14 flex: 1, 15 justifyContent: 'center', 16 alignItems: 'center', 17 }} 18 > 19 <Text 20 style={{ 21 fontSize: 60, 22 color: 'black', 23 fontWeight: 'bold', 24 }} 25 > 26 Basic Mask 27 </Text> 28 </View> 29 } 30 > 31 {/* Shows behind the mask, you can put anything here, such as an image */} 32 <View style={{ flex: 1, height: '100%', backgroundColor: '#324376' }} /> 33 <View style={{ flex: 1, height: '100%', backgroundColor: '#F5DD90' }} /> 34 <View style={{ flex: 1, height: '100%', backgroundColor: '#F76C5E' }} /> 35 <View style={{ flex: 1, height: '100%', backgroundColor: '#e1e1e1' }} /> 36 </MaskedView> 37 ); 38} 39 40export default App
The following image demonstrates that you can put almost anything behind the mask. The three examples shown are masked <View>, <Text>, and <Image>.
Props
Reference
maskElement
| Type | Required |
|---|---|
| element | Yes |
androidRenderingMode
By 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.
| Type | Required | Default |
|---|---|---|
software, hardware | No | hardware |
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
binaries present in source code
Details
- Warn: binary detected: example/android/gradle/wrapper/gradle-wrapper.jar:1
Reason
Found 10/19 approved changesets -- score normalized to 5
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 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
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
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
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
Reason
15 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-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
Score
3.2
/10
Last Scanned on 2025-06-30
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