react-native-masked-view

Open Beta Documentation Amazon offers this technical documentation as part of a pre-release, open beta. The features described might change as Amazon receives feedback and iterates on the features. For the most current feature information, see the latest Release Notes.

@amazon-devices/react-native-masked-view__masked-view provides a React component that renders a masked view.

Installation
Examples
API reference
- Components
  - MaskedView props
Known issues and limitations
Supported versions
Related topics

Installation

Add the dependency in the package.json file.

Copied to clipboard.

   "dependencies": {
      ...
      "@amazon-devices/react-native-masked-view__masked-view": "~2.0.0"
   }

Reinstall the package-lock.json file using the npm install command.

Examples

Copied to clipboard.

import React from 'react';
import { Text, View } from 'react-native';
import MaskedView from '@amazon-devices/react-native-masked-view__masked-view';

const App = () => {
  return (
    <MaskedView
      style={{ flex: 1, flexDirection: 'row', height: '100%' }}
      maskElement={
        <View
          style={{
            // Transparent background because mask is based off alpha channel.
            backgroundColor: 'transparent',
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Text
            style={{
              fontSize: 60,
              color: 'black',
              fontWeight: 'bold',
            }}
          >
            Basic Mask
          </Text>
        </View>
      }
    >
      {/* Shows behind the mask, you can put anything here, such as an image */}
      <View style={{ flex: 1, height: '100%', backgroundColor: '#324376' }} />
      <View style={{ flex: 1, height: '100%', backgroundColor: '#F5DD90' }} />
      <View style={{ flex: 1, height: '100%', backgroundColor: '#F76C5E' }} />
      <View style={{ flex: 1, height: '100%', backgroundColor: '#e1e1e1' }} />
    </MaskedView>
  );
}

export default App

API reference

@amazon-devices/react-native-masked-view__masked-view library on Vega adds support for the following components.

Components

Component	Description
`MaskedView`	Acts as a stencil, allowing you to use the shape and opacity of `maskElement`.

MaskedView props

Prop	Description
`maskElement`	Specifies a React element that acts as a mask for its child content.

Known issues and limitations

The MaskedView library on Vega supports the MaskedView component and all of its props listed in the official documentation except the Android-specific androidRenderingMode prop.

Supported versions

Package name	Amazon NPM library version	Vega OS build number	Vega SDK version	Release notes
`@amazon-devices/react-native-masked-view__masked-view`	2.0.1+0.3.1	`OS 1.1 (201010438050)`	0.20

Supported Third-Party Libraries and Services.

Last updated: Sep 30, 2025