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 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
Implementation details
Supported versions
Additional resources

Installation

Add the dependency in package.json file.

Copied to clipboard.

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

Reinstall package-lock.json file using 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 components listed below.

Components

component	description
`MaskedView`	A component that renders a masked view

MaskedView props

prop	description
`maskElement`	A mask element

Implementation details

The MaskedView library on Vega supports 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

Additional resources

For information on additional libraries, see Supported Third-Party Libraries and Services.

Last updated: Sep 30, 2025