react-native-masked-view

A <MaskedView> element for react-native

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-native-masked-view
5650.2.07 years ago8 years agoMinified + gzip package size for react-native-masked-view in KB

Readme

react-native-masked-view
Masked View Component for React. Just like a <View /> with a mask.
<MaskedView maskImage="mask.png">...</MaskedView>
screen shot

compatibility

The latest version is compatible with react-native@0.7.1

installation

  • npm install react-native-masked-view
  • var MaskedView = require('react-native-masked-view');

... then have a look at these instructions and adjust accordingly.

options

  • maskImage: File name of image asset added to Images.xcassets.
See React Docs for instructions on adding images.
note: since react@0.6.0-rc the MaskedView element cannot have it's own backgroundColor, but it's children can.

demo

Just clone this repo, cd into react-native-masked-view and npm install. Then open MaskedViewDemo.xcodeproj and click run.

todo

  • add more sizing options
  • add various mask sources: shape, svg, other layers
  • replace maskImage prop with maskSource prop that works just like <Image />'s source prop.
(the internal react-native image-related code really should be refactored so it's more easily re-usable outside of <Image />)