Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
FonDorn Merge pull request #6 from react-native-community/rn-59
#5  Removed RCTUIManager.h dependency
Latest commit 5273695 Mar 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
img Update README.md Feb 12, 2019
ios
js Add flow config Mar 2, 2019
.flowconfig Add flow config Mar 2, 2019
.gitignore
README.md Add CI Mar 2, 2019
index.js
package.json
yarn.lock Add flow config Mar 2, 2019

README.md

React Native MaskedView

Build Status Version MIT License

React Native MaskedView for iOS.

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

Reference

Props

maskElement

Type Required
element Yes
You can’t perform that action at this time.