npmpackage.info

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

React Native Masked View Library

0.3.2

982

MIT

JavaScript

240.00 B

27,805,453 3.6

Installations

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

Pull Requests

Open

10

Total

120

Closed

16

Merged

94

Issues

Open

45

Total

113

Closed

68

Releases

v0.3.2

Published on 04 Nov 2024

v0.3.1

Published on 11 Dec 2023

v0.3.0

Published on 23 Oct 2023

v0.2.9

Published on 31 Mar 2023

v0.2.8

Published on 08 Oct 2022

v0.2.7

Published on 14 Jul 2022

View all 14 releases

Developer

react-native-masked-view

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

20.8.1

NPM Version

10.1.0 Statistics

982 Stars

176 Commits

124 Forks

11 Watching

9 Branches

33 Contributors

Updated on 21 Nov 2024

Bundle Size

368.00 B

Minified

240.00 B

Minified + Gzipped

Bundlephobia

Languages

JavaScript (55.92%)

Java (28.88%)

Objective-C (10.75%)

Ruby (4.45%)

Total Downloads

Cumulative downloads

Total Downloads

27,805,453

Last day

-10.4%

68,192

Compared to previous day

Last week

-2.8%

359,655

Compared to previous week

Last month

2.1%

1,539,400

Compared to previous month

Last year

70.3%

14,791,750

Compared to previous year

Daily Downloads

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

Versions

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

Web Usage

you need to install moden-screenshot package for web usage:

1yarn add modern-screenshot

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.

4

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

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.6

/10

Last Scanned on 2024-11-18

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

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

Installations

Pull Requests

10

120

16

94

Issues

45

113

68

Releases

Developer

react-native-masked-view

Developer Guide

CommonJS

Yes

20.8.1

10.1.0

Statistics

Bundle Size

368.00 B

240.00 B

Languages

Total Downloads

27,805,453

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

React Native MaskedView

Platforms Supported

Getting Started

Using React Native >= 0.60

Using React Native < 0.60

Usage

Web Usage

Props

Reference

maskElement

androidRenderingMode

10

10

9

5

4

0

0

0

0

0

0

0

3.6

/10

React Native `MaskedView`

`maskElement`

`androidRenderingMode`