{"_id":"@alloc/react-native-mask","_rev":"2-751bf2a0530ef231f20ba3ff63057516","name":"@alloc/react-native-mask","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@alloc/react-native-mask","description":"Alpha masking for react-native-macos","types":"./types/index.d.ts","main":"index.js","author":{"name":"Alec Larson"},"license":"MIT","version":"0.1.0","repository":{"type":"git","url":"git+https://github.com/alloc/react-native-mask.git"},"keywords":["react-native","react native","react-native-macos","macos","masked-view","masked view"],"scripts":{"test:flow":"flow check","test:js":"echo 0","test:lint":"eslint ./","test:prettier":"prettier --check './**/*.js'"},"peerDependencies":{"@alloc/react-native-macos":"^0.21","react":"^16.0"},"devDependencies":{"@babel/core":"^7.2.2","babel-eslint":"^10.0.1","eslint":"^5.16.0","eslint-config-prettier":"^4.3.0","eslint-plugin-flowtype":"^3.10.1","eslint-plugin-prettier":"^3.1.0","eslint-plugin-react":"^7.13.0","eslint-plugin-react-native":"^3.7.0","flow-bin":"^0.86.0","prettier":"^1.18.2","react-native":"npm:@alloc/react-native-macos"},"gitHead":"752a91596142e1bddf922dae4de4646cf9541b60","bugs":{"url":"https://github.com/alloc/react-native-mask/issues"},"homepage":"https://github.com/alloc/react-native-mask#readme","_id":"@alloc/react-native-mask@0.1.0","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-+ybxsVupOpKRgqcneviPe47bkeBFkYW4oJUx7Khv/dKs3ehGTfbouvHEYvpq9zcZ+Bk5+ve64KcqZKBai84Kgg==","shasum":"347ce39a4b2b63401e5f3ef5083b20dbee66c441","tarball":"https://registry.npmjs.org/@alloc/react-native-mask/-/react-native-mask-0.1.0.tgz","fileCount":12,"unpackedSize":10769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeyEH/CRA9TVsSAnZWagAApYgP/jdvgj2cPVey/JuYZ2/4\nlSJj9EyxyGDFLALBJ6p2eMbEh1n/loOJkIHLL8UDbnwGkeS6QIDErGyM6bNa\nS5x+m/zwF2G3G7PsEcUsXrLdOVfMn+P3Ltv+/rqh/au1NQSbeoeAqSxClBfz\nlPHzBlFAEv6R+BcRI72BW4C95GKPMqfsWldlY1vgr84zxffAXQ7pWnfDKUS/\nfAVW/9SHwCgfa7C5tFRjEX9Hp/egeTWpAPAvkWZn+eHwp1hKIDutt2AlPCz1\n5qBG7J1latJqHzfem/BEmKQFWmfQn1uhWUJm6S6aX8oui9MZYkQJxbSPGKom\nN4rYbSdwk7r/aB0kUYU6s4Qr3RL9d3tWtvmJyDGICwrMgZXi1USTtv2lM5E2\n6Wx3rFq3H+xh2Kmzh7ydSj27p5zvxoZnwMxob1uq97Xx/w9vWh35N+c2UMoB\nmaOETwILf7NF6rp//HK7lXQww7I9HepA0o4dDr2YjVUnlvoQYkG2Q6wBRtn+\nt2gsjIRWK8cn591a0jXkLpBRB4lW0CkPbHV+01jFRmlL9nnEM9dWdam0vPhv\nAnkDa+CZ+L6LAcXZ916yOc7eT1/0gUmfS3EuIduaK9lnMuBThIQLv9tiGRim\nzVupg7Wj8gbNPKYFk1KSI/6LhZGZulaw18/J0Rbh3OfNCf+Ug3xKmt7QDZvn\nqAGe\r\n=dpEU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG/uvi/CCjIAPA5YI8eDbdcMtp/8zbPn1aRZbbH/BJgzAiEAvw67RMCXX5iw1engsZXPlOtoMgajrHYJMvD3lKbMLHw="}]},"maintainers":[{"name":"aleclarson","email":"aleclarson@protonmail.com"}],"_npmUser":{"name":"aleclarson","email":"aleclarson@protonmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-mask_0.1.0_1590182398825_0.48976862924711795"},"_hasShrinkwrap":false},"0.1.1":{"name":"@alloc/react-native-mask","description":"Alpha masking for react-native-macos","types":"./types/index.d.ts","main":"index.js","author":{"name":"Alec Larson"},"license":"MIT","version":"0.1.1","repository":{"type":"git","url":"git+https://github.com/alloc/react-native-mask.git"},"keywords":["react-native","react native","react-native-macos","macos","masked-view","masked view"],"scripts":{"test:flow":"flow check","test:js":"echo 0","test:lint":"eslint ./","test:prettier":"prettier --check './**/*.js'"},"peerDependencies":{"@alloc/react-native-macos":"^0.21","react":"^16.0"},"devDependencies":{"@babel/core":"^7.2.2","babel-eslint":"^10.0.1","eslint":"^5.16.0","eslint-config-prettier":"^4.3.0","eslint-plugin-flowtype":"^3.10.1","eslint-plugin-prettier":"^3.1.0","eslint-plugin-react":"^7.13.0","eslint-plugin-react-native":"^3.7.0","flow-bin":"^0.86.0","prettier":"^1.18.2","react-native":"npm:@alloc/react-native-macos"},"gitHead":"e8718b5f02b608cb8f6531c7baa4fa514088d8e6","bugs":{"url":"https://github.com/alloc/react-native-mask/issues"},"homepage":"https://github.com/alloc/react-native-mask#readme","_id":"@alloc/react-native-mask@0.1.1","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-/3e9dHOrN4VJkGlGumI/KpvlqE+8Bwynw3SPskywsZ9x5+FG0Yvvti3UgMT7IMo4tgXAv5h8htovksBkEbmbSA==","shasum":"f0bf542f39bf2f3a3bc48c4b3ac51f2c943e7e7b","tarball":"https://registry.npmjs.org/@alloc/react-native-mask/-/react-native-mask-0.1.1.tgz","fileCount":12,"unpackedSize":10638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeyEzPCRA9TVsSAnZWagAAhpIP/2+HIogbt0p2OWMNkzHH\nndZ9qmHRaWBFfEGeF0X/5RhyLLvwltEGWZuGsHuDCE8dWljhyP0bG3CauXbn\nkXuUNzECSad+iAShqrunRPoUVpLDeItA8pYa2ZssKwmV61ds7R4sDrxQf0W6\njBAHFUWX5nsVUs/6u9nfhEqd6EXy/Qeg6g/UQp7lA7VFeqaFIvqkOsV0yBjg\nfvmmSd4tPbxGxWEjHxxf6F2q1Moyq8ZCtIsOdl8VawhVQlTvP1ytUi7uSxAW\ny2zpkHy8fANWjveYyq7q+W9xmr+zRNf8AHNvBzMIZs6HoasGaSkFoe+JNmpi\nz4Y43/PSizL7bcThe0As9HBcKwnLA6MJZ1aA2UI8KpeOKB8e9XAGgsoxpoAG\nbKX1Jw90TjuRn6P2scOEUH+HyEzMr7Fy5fAP24A8LPKzxSm1wJkJP8wp9Eq+\nV51hIbCHu4pi+CNmgyho8OyWVVgO4CtoQvu0ghhJX3wiYfX9u73LugTfJa1b\n41AYBsVVeQWs/IwGn1dvvR6LmSxuQwis5PvAtvb/zGO7c5gpn0h8bRxLNHlu\n5AagqKX4oZZUgu3b/oMky+ECu/CSkuAO++cdow5gUPDXsAnDrqKAosq6Kb5c\nJNk0UAmyY94eMC6ZuJEEIVuZpaRfoDOrnubOnkthVccLKKWJUtiZSfFmgMho\nXcKi\r\n=myyI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCh2VIQ01PtvQJZcoOQxalfd26/+WnukSNnoIVXOE9ESAIgGt1HF9FdbzlET2hUYUYuIEguQUI4yeckfoNbB9Zf0fE="}]},"maintainers":[{"name":"aleclarson","email":"aleclarson@protonmail.com"}],"_npmUser":{"name":"aleclarson","email":"aleclarson@protonmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-mask_0.1.1_1590185167063_0.6265053165690215"},"_hasShrinkwrap":false}},"time":{"created":"2020-05-22T21:19:58.585Z","0.1.0":"2020-05-22T21:19:59.022Z","modified":"2022-04-04T13:33:40.165Z","0.1.1":"2020-05-22T22:06:07.235Z"},"maintainers":[{"name":"aleclarson","email":"aleclarson@protonmail.com"}],"description":"Alpha masking for react-native-macos","homepage":"https://github.com/alloc/react-native-mask#readme","keywords":["react-native","react native","react-native-macos","macos","masked-view","masked view"],"repository":{"type":"git","url":"git+https://github.com/alloc/react-native-mask.git"},"author":{"name":"Alec Larson"},"bugs":{"url":"https://github.com/alloc/react-native-mask/issues"},"license":"MIT","readme":"# React Native MaskedView\n\n[![Build Status][build-badge]][build]\n[![Version][version-badge]][package]\n[![MIT License][license-badge]][license]\n\nReact Native MaskedView for iOS and Android.\n\n## Platforms Supported\n\n- [x] iOS\n- [x] Android\n\n_Note: React Native MaskedView is not currently supported by Expo unless you \"eject\"._\n\n## Getting Started\n\n```\n$ yarn add @react-native-community/masked-view\n$ react-native link @react-native-community/masked-view\n```\n\n## Usage\n\nImport the `MaskedView` component from `@react-native-community/masked-view` and use it like so:\n\n```jsx\nimport React from 'react';\nimport { Text, View } from 'react-native';\nimport MaskedView from '@react-native-community/masked-view';\n\nexport default class App extends React.Component {\n  render() {\n    return (\n      <MaskedView\n        style={{flex: 1, flexDirection: 'row', height: '100%'}}\n        maskElement={\n          <View\n            style={{\n              // Transparent background because mask is based off alpha channel.\n              backgroundColor: 'transparent',\n              flex: 1,\n              justifyContent: 'center',\n              alignItems: 'center',\n            }}>\n            <Text\n              style={{\n                fontSize: 60,\n                color: 'black',\n                fontWeight: 'bold',\n              }}>\n              Basic Mask\n            </Text>\n          </View>\n        }>\n        {/* Shows behind the mask, you can put anything here, such as an image */}\n        <View style={{flex: 1, height: '100%', backgroundColor: '#324376'}} />\n        <View style={{flex: 1, height: '100%', backgroundColor: '#F5DD90'}} />\n        <View style={{flex: 1, height: '100%', backgroundColor: '#F76C5E'}} />\n        <View style={{flex: 1, height: '100%', backgroundColor: '#e1e1e1'}} />\n      </MaskedView>\n    );\n  }\n}\n```\n\nThe following image demonstrates that you can put almost anything behind the mask. The three examples shown are masked `<View>`, `<Text>`, and `<Image>`.\n\n<p align=\"center\"><img src=\"img/example.png\" width=\"200\"></img></p>\n\n### Props\n\n* [View props...](https://github.com/facebook/react-native-website/blob/master/docs/view.md#props)\n\n- [`maskElement`](#maskelement)\n\n# Reference\n\n## Props\n\n### `maskElement`\n\n| Type    | Required |\n| ------- | -------- |\n| element | Yes      |\n\n<!-- badges -->\n[build-badge]: https://img.shields.io/circleci/project/github/react-native-community/react-native-masked-view/master.svg?style=flat-square\n[build]: https://circleci.com/gh/react-native-community/react-native-masked-view\n[version-badge]: https://img.shields.io/npm/v/@react-native-community/masked-view.svg?style=flat-square\n[package]: https://www.npmjs.com/package/@react-native-community/masked-view\n[license-badge]: https://img.shields.io/npm/l/@react-native-community/masked-view.svg?style=flat-square\n[license]: https://opensource.org/licenses/MIT\n","readmeFilename":"README.md"}