Package Exports

@react-native-community/masked-view

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@react-native-community/masked-view) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Native MaskedView

React Native MaskedView for iOS and Android.

Platforms Supported

iOS
Android

Note: React Native MaskedView is not currently supported by Expo unless you "eject".

Getting Started

$ yarn add @react-native-community/masked-view
$ react-native link @react-native-community/masked-view

Usage

Import the MaskedView component from @react-native-community/masked-view and use it like so:

import React from 'react';
import { Text, View } from 'react-native';
import MaskedView from '@react-native-community/masked-view';

export default class App extends React.Component {
  render() {
    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>
    );
  }
}

The following image demonstrates that you can put almost anything behind the mask. The three examples shown are masked <View>, <Text>, and <Image>.

Props

View props...

maskElement

Reference

Props

`maskElement`

Type	Required
element	Yes