mirror of
https://github.com/status-im/react-native.git
synced 2025-01-29 10:45:04 +00:00
e11d496e9d
Summary: Follow up to 9ec95673909beac7798f589e0e9821b4225f8fa9 Closes https://github.com/facebook/react-native/pull/16759 Differential Revision: D6285219 Pulled By: hramos fbshipit-source-id: 7012d257a5a6cff06cb2d94203a9379e4b7e3c4e
73 lines
1.4 KiB
Markdown
73 lines
1.4 KiB
Markdown
---
|
|
id: maskedviewios
|
|
title: MaskedViewIOS
|
|
layout: docs
|
|
category: components
|
|
permalink: docs/maskedviewios.html
|
|
next: modal
|
|
previous: listview
|
|
---
|
|
Renders the child view with a mask specified in the `maskElement` prop.
|
|
|
|
```
|
|
import React from 'react';
|
|
import { MaskedViewIOS, Text, View } from 'react-native';
|
|
|
|
class MyMaskedView extends React.Component {
|
|
render() {
|
|
return (
|
|
<MaskedViewIOS
|
|
style={{ flex: 1 }}
|
|
maskElement={
|
|
<View style={styles.maskContainerStyle}>
|
|
<Text style={styles.maskTextStyle}>
|
|
Basic Mask
|
|
</Text>
|
|
</View>
|
|
}
|
|
>
|
|
<View style={{ flex: 1, backgroundColor: 'blue' }} />
|
|
</MaskedViewIOS>
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
The above example will render a view with a blue background that fills its
|
|
parent, and then mask that view with text that says "Basic Mask".
|
|
|
|
The alpha channel of the view rendered by the `maskElement` prop determines how
|
|
much of the view's content and background shows through. Fully or partially
|
|
opaque pixels allow the underlying content to show through but fully
|
|
transparent pixels block that content.
|
|
|
|
### Props
|
|
|
|
- [View props...](docs/view-props.html)
|
|
- [`maskElement`](docs/maskedviewios.html#maskelement)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
# Reference
|
|
|
|
## Props
|
|
|
|
### `maskElement`
|
|
|
|
Should be a React element to be rendered and applied as the mask for the child element.
|
|
|
|
| Type | Required |
|
|
| - | - |
|
|
| element | Yes |
|
|
|
|
|
|
|
|
|
|
|
|
|