1 | /**
|
2 | * Copyright (c) Facebook, Inc. and its affiliates.
|
3 | *
|
4 | * This source code is licensed under the MIT license found in the
|
5 | * LICENSE file in the root directory of this source tree.
|
6 | *
|
7 | * @flow
|
8 | * @format
|
9 | */
|
10 |
|
11 | import React from 'react';
|
12 | import { View, StyleSheet, requireNativeComponent } from 'react-native';
|
13 |
|
14 | const RNCMaskedView = requireNativeComponent('RNCMaskedView');
|
15 |
|
16 | import { type MaskedViewProps } from './MaskedViewTypes';
|
17 |
|
18 | /**
|
19 | * Renders the child view with a mask specified in the `maskElement` prop.
|
20 | *
|
21 | * ```
|
22 | * import React from 'react';
|
23 | * import { Text, View } from 'react-native';
|
24 | * import MaskedView from 'react-native-masked-view';
|
25 | *
|
26 | * class MyMaskedView extends React.Component {
|
27 | * render() {
|
28 | * return (
|
29 | * <MaskedView
|
30 | * style={{ flex: 1 }}
|
31 | * maskElement={
|
32 | * <View style={styles.maskContainerStyle}>
|
33 | * <Text style={styles.maskTextStyle}>
|
34 | * Basic Mask
|
35 | * </Text>
|
36 | * </View>
|
37 | * }
|
38 | * >
|
39 | * <View style={{ flex: 1, backgroundColor: 'blue' }} />
|
40 | * </MaskedView>
|
41 | * );
|
42 | * }
|
43 | * }
|
44 | * ```
|
45 | *
|
46 | * The above example will render a view with a blue background that fills its
|
47 | * parent, and then mask that view with text that says "Basic Mask".
|
48 | *
|
49 | * The alpha channel of the view rendered by the `maskElement` prop determines how
|
50 | * much of the view's content and background shows through. Fully or partially
|
51 | * opaque pixels allow the underlying content to show through but fully
|
52 | * transparent pixels block that content.
|
53 | *
|
54 | */
|
55 | class MaskedViewIOS extends React.Component<MaskedViewProps> {
|
56 | _hasWarnedInvalidRenderMask = false;
|
57 |
|
58 | render() {
|
59 | const { maskElement, children, ...otherViewProps } = this.props;
|
60 |
|
61 | if (!React.isValidElement(maskElement)) {
|
62 | if (!this._hasWarnedInvalidRenderMask) {
|
63 | // eslint-disable-next-line no-console
|
64 | console.warn(
|
65 | 'MaskedView: Invalid `maskElement` prop was passed to MaskedView. ' +
|
66 | 'Expected a React Element. No mask will render.'
|
67 | );
|
68 | this._hasWarnedInvalidRenderMask = true;
|
69 | }
|
70 | // $FlowFixMe
|
71 | return <View {...otherViewProps}>{children}</View>;
|
72 | }
|
73 |
|
74 | return (
|
75 | // eslint-disable-next-line react/jsx-props-no-spreading
|
76 | <RNCMaskedView {...otherViewProps}>
|
77 | <View pointerEvents="none" style={StyleSheet.absoluteFill}>
|
78 | {maskElement}
|
79 | </View>
|
80 | {children}
|
81 | </RNCMaskedView>
|
82 | );
|
83 | }
|
84 | }
|
85 |
|
86 | module.exports = MaskedViewIOS;
|