Skip to content

gilbox/react-native-masked-view

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
iOS
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react-native-masked-view

Masked View Component for React. Just like a <View /> with a mask.

<MaskedView maskImage="mask.png">...</MaskedView>

screen shot

compatibility

  • 0.2.0 is compatible with react-native@0.10.1
  • 0.1.0 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

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 />)

About

Masked View Component for React

Resources

Stars

Watchers

Forks

Packages

No packages published