npmpackage.info

Gathering detailed insights and metrics for @react-native-masked-view/masked-view

Other packages similar to @react-native-masked-view/masked-view

@react-native-community/masked-view

0.1.11

React Native MaskedView component

react-native-masked-view

0.2.0

A <MaskedView> element for react-native

@react-native-oh-tpl/masked-view

0.2.9-0.2.2

React Native MaskedView component

react-native-masked-animated-view

1.1.1

A React Native component for creating masked animations

Gathering detailed insights and metrics for @react-native-masked-view/masked-view

@react-native-masked-view/masked-view - 0.3.2 | npmpackage.info

@react-native-masked-view/masked-view

React Native Masked View Library

0.3.2

1,071

MIT

JavaScript

57.62 kB

3.2

Installations

npm install @react-native-masked-view/masked-view

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

20.8.1

NPM Version

10.1.0 Pull Requests

Open

9

Total

120

Closed

17

Merged

94

Issues

Open

49

Total

119

Closed

70

Releases

v0.3.2

Updated on Nov 04, 2024

v0.3.1

Updated on Dec 11, 2023

v0.3.0

Updated on Oct 23, 2023

v0.2.9

Updated on Mar 31, 2023

v0.2.8

Updated on Oct 08, 2022

v0.2.7

Updated on Jul 14, 2022

View All 14 releases

Languages

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

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

1,071 Stars

176 Commits

128 Forks

10 Watchers

9 Branches

33 Contributors

Updated on Jul 12, 2025

Maintainers

View All 33 Contributors

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

NPM Version

10.1.0

Node Version

20.8.1

Published on

Nov 04, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react react-native

Dev Dependencies

@react-native/eslint-config @types/react-native eslint eslint-plugin-ft-flow flow-bin prettier react-native react-native-test-app typescript

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-view

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

View props...
maskElement
androidRenderingMode

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.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

9

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

5

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

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

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

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