https://github.com/gilbox/react-native-masked-view

Masked View Component for React
https://github.com/gilbox/react-native-masked-view

Last synced: about 1 month ago
JSON representation

Masked View Component for React

• Host: GitHub
• URL: https://github.com/gilbox/react-native-masked-view
• Owner: gilbox
• Created: 2015-06-03T06:34:20.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-06-05T08:17:41.000Z (over 7 years ago)
• Last Synced: 2024-09-14T01:09:28.424Z (3 months ago)
• Language: Objective-C
• Size: 866 KB
• Stars: 59
• Watchers: 3
• Forks: 10
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-native - react-native-masked-view ★50 - A element for react-native (Components / UI)
• awesome-reactnative-ui - react-native-masked-view - native-masked-view/raw/master/masked-view-screenshot.png)| (Others)
• awesome-react-native - react-native-masked-view ★50 - A element for react-native (Components / UI)
• awesome-reactnative-ui - react-native-masked-view - native-masked-view/raw/master/masked-view-screenshot.png)| (Others)
• awesome-react-native - react-native-masked-view ★50 - A element for react-native (Components / UI)
• awesome-react-native-ui - react-native-masked-view ★33 - A element for react-native (Components / UI)
• awesome-react-native - react-native-masked-view ★50 - A element for react-native (Components / UI)

README

        
# react-native-masked-view

Masked View Component for React. Just like a `` with a mask.

    ...

![screen shot](https://github.com/gilbox/react-native-masked-view/raw/master/masked-view-screenshot.png)

## compatibility

- `0.2.0` is compatible with [email protected]

- `0.1.0` is compatible with [email protected]

## installation

- `npm install react-native-masked-view`

- `var MaskedView = require('react-native-masked-view');`

... then have a look at [these instructions](https://github.com/chirag04/react-native-dashed-border)

and adjust accordingly.

## options

- `maskImage`: File name of image asset added to Images.xcassets.

[See React Docs for instructions on adding images.](https://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-app-using-images-xcassets)

**note**: since [email protected] 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 ``'s `source` prop.

  (the internal react-native image-related code really should be refactored so it's more easily

  re-usable outside of ``)