react-native-masked-view

@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

1. Add the dependency in package.json file. Select the tab for your React Native version.

   • React Native 0.72
   • React Native 0.83
   
   

   Copy code Copied to clipboard.

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

   
   

   Copy code Copied to clipboard.

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

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

Examples

Copy code 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

MaskedView props

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

Additional resources

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

Last updated: Jul 28, 2026