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
- Add the dependency in package.json file.
"dependencies": { ... "@amazon-devices/react-native-masked-view__masked-view": "~2.0.0" } - Reinstall
package-lock.jsonfile usingnpm installcommand.
Examples
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
