{"action":"created","comment":{"url":"https://api.github.com/repos/facebook/react-native/pulls/comments/126752079","pull_request_review_id":49266272,"id":126752079,"diff_hunk":"@@ -0,0 +1,110 @@\n+/**\n+ * Copyright (c) 2015-present, Facebook, Inc.\n+ * All rights reserved.\n+ *\n+ * This source code is licensed under the BSD-style license found in the\n+ * LICENSE file in the root directory of this source tree. An additional grant\n+ * of patent rights can be found in the PATENTS file in the same directory.\n+ *\n+ * @providesModule MaskedViewIOS\n+ * @flow\n+ */\n+\n+const React = require('React');\n+const StyleSheet = require('StyleSheet');\n+const View = require('View');\n+const ViewPropTypes = require('ViewPropTypes');\n+const requireNativeComponent = require('requireNativeComponent');\n+const ReactPropTypes = React.PropTypes;\n+\n+import type { ViewProps } from 'ViewPropTypes';\n+\n+type Props = ViewProps & {\n+  children: any,\n+  /**\n+   * Should be a React element to be rendered and applied as the\n+   * mask for the child element.\n+   */\n+  maskElement: React.Element<*>,\n+};\n+\n+/**\n+ * Renders the child view with a mask specified in the `maskElement` prop.\n+ *\n+ * ```\n+ * import React from 'react';\n+ * import { MaskedView, Text, View } from 'react-native';\n+ *\n+ * class MyMaskedView extends React.Component {\n+ *   render() {\n+ *     return (\n+ *       <MaskedView\n+ *         style={{ flex: 1 }}\n+ *         maskElement={\n+ *           <View style={styles.maskContainerStyle}>\n+ *             <Text style={styles.maskTextStyle}>\n+ *               Basic Mask\n+ *             </Text>\n+ *           </View>\n+ *         }\n+ *       >\n+ *         <View style={{ flex: 1, backgroundColor: 'blue' }} />\n+ *       </MaskedView>\n+ *     );\n+ *   }\n+ * }\n+ * ```\n+ *\n+ * The above example will render a view with a blue background that fills its\n+ * parent, and then mask that view with text that says \"Basic Mask\".\n+ *\n+ * The alpha channel of the view rendered by the `maskElement` prop determines how\n+ * much of the view’s content and background shows through. Fully or partially\n+ * opaque pixels allow the underlying content to show through but fully\n+ * transparent pixels block that content.\n+ *\n+ */\n+class MaskedViewIOS extends React.Component {\n+  props: Props;\n+\n+  static propTypes = {\n+    ...ViewPropTypes,\n+    maskElement: ReactPropTypes.element.isRequired,\n+  };\n+\n+  _hasWarnedInvalidRenderMask = false;\n+\n+  render() {\n+    const { maskElement, children, ...otherViewProps } = this.props;\n+\n+    if (!React.isValidElement(maskElement)) {\n+      if (!this._hasWarnedInvalidRenderMask) {\n+        console.warn(\n+          'MaskedView: Invalid `maskElement` prop was passed to MaskedView. ' +\n+            'Expected a React Element. No mask will render.'\n+        );\n+        this._hasWarnedInvalidRenderMask = true;\n+      }\n+      return <View {...otherViewProps}>{children}</View>;\n+    }\n+\n+    return (\n+      <RCTMaskedView {...otherViewProps}>\n+        <View pointerEvents=\"none\" style={[StyleSheet.absoluteFill]}>","path":"Libraries/Components/MaskedView/MaskedViewIOS.ios.js","position":93,"original_position":93,"commit_id":"2052f33812cf5a54fe19fc25a83f90ba53a3cccf","original_commit_id":"2052f33812cf5a54fe19fc25a83f90ba53a3cccf","user":{"login":"skevy","id":131916,"avatar_url":"https://avatars3.githubusercontent.com/u/131916?v=3","gravatar_id":"","url":"https://api.github.com/users/skevy","html_url":"https://github.com/skevy","followers_url":"https://api.github.com/users/skevy/followers","following_url":"https://api.github.com/users/skevy/following{/other_user}","gists_url":"https://api.github.com/users/skevy/gists{/gist_id}","starred_url":"https://api.github.com/users/skevy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/skevy/subscriptions","organizations_url":"https://api.github.com/users/skevy/orgs","repos_url":"https://api.github.com/users/skevy/repos","events_url":"https://api.github.com/users/skevy/events{/privacy}","received_events_url":"https://api.github.com/users/skevy/received_events","type":"User","site_admin":false},"body":"Whoops! 👍 ","created_at":"2017-07-11T17:13:10Z","updated_at":"2017-07-11T17:13:10Z","html_url":"https://github.com/facebook/react-native/pull/14898#discussion_r126752079","pull_request_url":"https://api.github.com/repos/facebook/react-native/pulls/14898","_links":{"self":{"href":"https://api.github.com/repos/facebook/react-native/pulls/comments/126752079"},"html":{"href":"https://github.com/facebook/react-native/pull/14898#discussion_r126752079"},"pull_request":{"href":"https://api.github.com/repos/facebook/react-native/pulls/14898"}}},"pull_request":{"url":"https://api.github.com/repos/facebook/react-native/pulls/14898","id":129500920,"html_url":"https://github.com/facebook/react-native/pull/14898","diff_url":"https://github.com/facebook/react-native/pull/14898.diff","patch_url":"https://github.com/facebook/react-native/pull/14898.patch","issue_url":"https://api.github.com/repos/facebook/react-native/issues/14898","number":14898,"state":"open","locked":false,"title":"MaskedViewIOS -- A way to apply alpha masks to views on iOS","user":{"login":"skevy","id":131916,"avatar_url":"https://avatars3.githubusercontent.com/u/131916?v=3","gravatar_id":"","url":"https://api.github.com/users/skevy","html_url":"https://github.com/skevy","followers_url":"https://api.github.com/users/skevy/followers","following_url":"https://api.github.com/users/skevy/following{/other_user}","gists_url":"https://api.github.com/users/skevy/gists{/gist_id}","starred_url":"https://api.github.com/users/skevy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/skevy/subscriptions","organizations_url":"https://api.github.com/users/skevy/orgs","repos_url":"https://api.github.com/users/skevy/repos","events_url":"https://api.github.com/users/skevy/events{/privacy}","received_events_url":"https://api.github.com/users/skevy/received_events","type":"User","site_admin":false},"body":"## Description\r\n\r\nIt's very important in complex UIs to be able to apply alpha channel-based masks to arbitrary content. Common use cases include adding gradient masks at the top or bottom of scroll views, creating masked text effects, feathering images, and generally just masking views while still allowing transparency of those views.\r\n\r\nThe original motivation for creating this component stemmed from work on `react-navigation`. As I tried to mimic behavior in the native iOS header, I needed to be able to achieve the effect pictured here (this is a screenshot from a native iOS application):\r\n\r\n![iOS native navbar animation](https://slack-imgs.com/?c=1&url=https%3A%2F%2Fd3vv6lp55qjaqc.cloudfront.net%2Fitems%2F0N3g1Q3H423P3m1c1z3E%2FScreen%2520Shot%25202017-07-06%2520at%252011.57.29%2520AM.png)\r\n\r\nIn this image, there are two masks:\r\n\r\n- A mask on the back button chevron\r\n- A gradient mask on the right button\r\n\r\nIn addition, the underlying view in the navigation bar is intended to be a UIBlurView. Thus, alpha masking is the only way to achieve this effect.\r\n\r\nBehind the scenes, the `maskView` property on `UIView` is used. This is a shortcut to setting the mask on the CALayer directly.\r\n\r\nThis gives us the ability to mask any view with any other view. While building this component (and testing in the context of an Expo app), I was able to use a `GLView` (a view that renders an OpenGL context) to mask a `Video` component!\r\n\r\nI chose to implement this only on iOS right now, as the Android implementation is a) significantly more complicated and b) will most likely not be as performant (especially when trying to mask more complex views).\r\n\r\n## Test Plan (required)\r\n\r\nReview the `<MaskedViewIOS>` section in the RNTester app, observe that views are masked appropriately.\r\n\r\n![example](https://d3vv6lp55qjaqc.cloudfront.net/items/250X092v2k3f212f3O16/Screen%20Recording%202017-07-07%20at%2012.18%20PM.gif?X-CloudApp-Visitor-Id=abb33b3e3769bbe2f7b26d13dc5d1442&v=5f9e2d4c)","created_at":"2017-07-07T22:44:27Z","updated_at":"2017-07-11T17:13:10Z","closed_at":null,"merged_at":null,"merge_commit_sha":"3bc8eef82e695a214a2fef82aec7550c3e4c320b","assignee":null,"assignees":[],"requested_reviewers":[{"login":"shergin","id":22032,"avatar_url":"https://avatars0.githubusercontent.com/u/22032?v=3","gravatar_id":"","url":"https://api.github.com/users/shergin","html_url":"https://github.com/shergin","followers_url":"https://api.github.com/users/shergin/followers","following_url":"https://api.github.com/users/shergin/following{/other_user}","gists_url":"https://api.github.com/users/shergin/gists{/gist_id}","starred_url":"https://api.github.com/users/shergin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shergin/subscriptions","organizations_url":"https://api.github.com/users/shergin/orgs","repos_url":"https://api.github.com/users/shergin/repos","events_url":"https://api.github.com/users/shergin/events{/privacy}","received_events_url":"https://api.github.com/users/shergin/received_events","type":"User","site_admin":false},{"login":"majak","id":713625,"avatar_url":"https://avatars0.githubusercontent.com/u/713625?v=3","gravatar_id":"","url":"https://api.github.com/users/majak","html_url":"https://github.com/majak","followers_url":"https://api.github.com/users/majak/followers","following_url":"https://api.github.com/users/majak/following{/other_user}","gists_url":"https://api.github.com/users/majak/gists{/gist_id}","starred_url":"https://api.github.com/users/majak/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/majak/subscriptions","organizations_url":"https://api.github.com/users/majak/orgs","repos_url":"https://api.github.com/users/majak/repos","events_url":"https://api.github.com/users/majak/events{/privacy}","received_events_url":"https://api.github.com/users/majak/received_events","type":"User","site_admin":false}],"milestone":null,"commits_url":"https://api.github.com/repos/facebook/react-native/pulls/14898/commits","review_comments_url":"https://api.github.com/repos/facebook/react-native/pulls/14898/comments","review_comment_url":"https://api.github.com/repos/facebook/react-native/pulls/comments{/number}","comments_url":"https://api.github.com/repos/facebook/react-native/issues/14898/comments","statuses_url":"https://api.github.com/repos/facebook/react-native/statuses/2052f33812cf5a54fe19fc25a83f90ba53a3cccf","head":{"label":"expo:@skevy/MaskedView-fb","ref":"@skevy/MaskedView-fb","sha":"2052f33812cf5a54fe19fc25a83f90ba53a3cccf","user":{"login":"expo","id":12504344,"avatar_url":"https://avatars0.githubusercontent.com/u/12504344?v=3","gravatar_id":"","url":"https://api.github.com/users/expo","html_url":"https://github.com/expo","followers_url":"https://api.github.com/users/expo/followers","following_url":"https://api.github.com/users/expo/following{/other_user}","gists_url":"https://api.github.com/users/expo/gists{/gist_id}","starred_url":"https://api.github.com/users/expo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/expo/subscriptions","organizations_url":"https://api.github.com/users/expo/orgs","repos_url":"https://api.github.com/users/expo/repos","events_url":"https://api.github.com/users/expo/events{/privacy}","received_events_url":"https://api.github.com/users/expo/received_events","type":"Organization","site_admin":false},"repo":{"id":41723342,"name":"react-native","full_name":"expo/react-native","owner":{"login":"expo","id":12504344,"avatar_url":"https://avatars0.githubusercontent.com/u/12504344?v=3","gravatar_id":"","url":"https://api.github.com/users/expo","html_url":"https://github.com/expo","followers_url":"https://api.github.com/users/expo/followers","following_url":"https://api.github.com/users/expo/following{/other_user}","gists_url":"https://api.github.com/users/expo/gists{/gist_id}","starred_url":"https://api.github.com/users/expo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/expo/subscriptions","organizations_url":"https://api.github.com/users/expo/orgs","repos_url":"https://api.github.com/users/expo/repos","events_url":"https://api.github.com/users/expo/events{/privacy}","received_events_url":"https://api.github.com/users/expo/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/expo/react-native","description":"A framework for building native apps with React.","fork":true,"url":"https://api.github.com/repos/expo/react-native","forks_url":"https://api.github.com/repos/expo/react-native/forks","keys_url":"https://api.github.com/repos/expo/react-native/keys{/key_id}","collaborators_url":"https://api.github.com/repos/expo/react-native/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/expo/react-native/teams","hooks_url":"https://api.github.com/repos/expo/react-native/hooks","issue_events_url":"https://api.github.com/repos/expo/react-native/issues/events{/number}","events_url":"https://api.github.com/repos/expo/react-native/events","assignees_url":"https://api.github.com/repos/expo/react-native/assignees{/user}","branches_url":"https://api.github.com/repos/expo/react-native/branches{/branch}","tags_url":"https://api.github.com/repos/expo/react-native/tags","blobs_url":"https://api.github.com/repos/expo/react-native/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/expo/react-native/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/expo/react-native/git/refs{/sha}","trees_url":"https://api.github.com/repos/expo/react-native/git/trees{/sha}","statuses_url":"https://api.github.com/repos/expo/react-native/statuses/{sha}","languages_url":"https://api.github.com/repos/expo/react-native/languages","stargazers_url":"https://api.github.com/repos/expo/react-native/stargazers","contributors_url":"https://api.github.com/repos/expo/react-native/contributors","subscribers_url":"https://api.github.com/repos/expo/react-native/subscribers","subscription_url":"https://api.github.com/repos/expo/react-native/subscription","commits_url":"https://api.github.com/repos/expo/react-native/commits{/sha}","git_commits_url":"https://api.github.com/repos/expo/react-native/git/commits{/sha}","comments_url":"https://api.github.com/repos/expo/react-native/comments{/number}","issue_comment_url":"https://api.github.com/repos/expo/react-native/issues/comments{/number}","contents_url":"https://api.github.com/repos/expo/react-native/contents/{+path}","compare_url":"https://api.github.com/repos/expo/react-native/compare/{base}...{head}","merges_url":"https://api.github.com/repos/expo/react-native/merges","archive_url":"https://api.github.com/repos/expo/react-native/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/expo/react-native/downloads","issues_url":"https://api.github.com/repos/expo/react-native/issues{/number}","pulls_url":"https://api.github.com/repos/expo/react-native/pulls{/number}","milestones_url":"https://api.github.com/repos/expo/react-native/milestones{/number}","notifications_url":"https://api.github.com/repos/expo/react-native/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/expo/react-native/labels{/name}","releases_url":"https://api.github.com/repos/expo/react-native/releases{/id}","deployments_url":"https://api.github.com/repos/expo/react-native/deployments","created_at":"2015-09-01T07:20:36Z","updated_at":"2017-07-10T11:12:03Z","pushed_at":"2017-07-11T11:04:31Z","git_url":"git://github.com/expo/react-native.git","ssh_url":"git@github.com:expo/react-native.git","clone_url":"https://github.com/expo/react-native.git","svn_url":"https://github.com/expo/react-native","homepage":"http://facebook.github.io/react-native/","size":100162,"stargazers_count":54,"watchers_count":54,"language":"JavaScript","has_issues":false,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":13,"mirror_url":null,"open_issues_count":0,"forks":13,"open_issues":0,"watchers":54,"default_branch":"exp-latest"}},"base":{"label":"facebook:master","ref":"master","sha":"40fdd6d91c578934b9e1035a167888032fb85d28","user":{"login":"facebook","id":69631,"avatar_url":"https://avatars0.githubusercontent.com/u/69631?v=3","gravatar_id":"","url":"https://api.github.com/users/facebook","html_url":"https://github.com/facebook","followers_url":"https://api.github.com/users/facebook/followers","following_url":"https://api.github.com/users/facebook/following{/other_user}","gists_url":"https://api.github.com/users/facebook/gists{/gist_id}","starred_url":"https://api.github.com/users/facebook/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/facebook/subscriptions","organizations_url":"https://api.github.com/users/facebook/orgs","repos_url":"https://api.github.com/users/facebook/repos","events_url":"https://api.github.com/users/facebook/events{/privacy}","received_events_url":"https://api.github.com/users/facebook/received_events","type":"Organization","site_admin":false},"repo":{"id":29028775,"name":"react-native","full_name":"facebook/react-native","owner":{"login":"facebook","id":69631,"avatar_url":"https://avatars0.githubusercontent.com/u/69631?v=3","gravatar_id":"","url":"https://api.github.com/users/facebook","html_url":"https://github.com/facebook","followers_url":"https://api.github.com/users/facebook/followers","following_url":"https://api.github.com/users/facebook/following{/other_user}","gists_url":"https://api.github.com/users/facebook/gists{/gist_id}","starred_url":"https://api.github.com/users/facebook/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/facebook/subscriptions","organizations_url":"https://api.github.com/users/facebook/orgs","repos_url":"https://api.github.com/users/facebook/repos","events_url":"https://api.github.com/users/facebook/events{/privacy}","received_events_url":"https://api.github.com/users/facebook/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/facebook/react-native","description":"A framework for building native apps with React.","fork":false,"url":"https://api.github.com/repos/facebook/react-native","forks_url":"https://api.github.com/repos/facebook/react-native/forks","keys_url":"https://api.github.com/repos/facebook/react-native/keys{/key_id}","collaborators_url":"https://api.github.com/repos/facebook/react-native/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/facebook/react-native/teams","hooks_url":"https://api.github.com/repos/facebook/react-native/hooks","issue_events_url":"https://api.github.com/repos/facebook/react-native/issues/events{/number}","events_url":"https://api.github.com/repos/facebook/react-native/events","assignees_url":"https://api.github.com/repos/facebook/react-native/assignees{/user}","branches_url":"https://api.github.com/repos/facebook/react-native/branches{/branch}","tags_url":"https://api.github.com/repos/facebook/react-native/tags","blobs_url":"https://api.github.com/repos/facebook/react-native/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/facebook/react-native/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/facebook/react-native/git/refs{/sha}","trees_url":"https://api.github.com/repos/facebook/react-native/git/trees{/sha}","statuses_url":"https://api.github.com/repos/facebook/react-native/statuses/{sha}","languages_url":"https://api.github.com/repos/facebook/react-native/languages","stargazers_url":"https://api.github.com/repos/facebook/react-native/stargazers","contributors_url":"https://api.github.com/repos/facebook/react-native/contributors","subscribers_url":"https://api.github.com/repos/facebook/react-native/subscribers","subscription_url":"https://api.github.com/repos/facebook/react-native/subscription","commits_url":"https://api.github.com/repos/facebook/react-native/commits{/sha}","git_commits_url":"https://api.github.com/repos/facebook/react-native/git/commits{/sha}","comments_url":"https://api.github.com/repos/facebook/react-native/comments{/number}","issue_comment_url":"https://api.github.com/repos/facebook/react-native/issues/comments{/number}","contents_url":"https://api.github.com/repos/facebook/react-native/contents/{+path}","compare_url":"https://api.github.com/repos/facebook/react-native/compare/{base}...{head}","merges_url":"https://api.github.com/repos/facebook/react-native/merges","archive_url":"https://api.github.com/repos/facebook/react-native/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/facebook/react-native/downloads","issues_url":"https://api.github.com/repos/facebook/react-native/issues{/number}","pulls_url":"https://api.github.com/repos/facebook/react-native/pulls{/number}","milestones_url":"https://api.github.com/repos/facebook/react-native/milestones{/number}","notifications_url":"https://api.github.com/repos/facebook/react-native/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/facebook/react-native/labels{/name}","releases_url":"https://api.github.com/repos/facebook/react-native/releases{/id}","deployments_url":"https://api.github.com/repos/facebook/react-native/deployments","created_at":"2015-01-09T18:10:16Z","updated_at":"2017-07-11T16:38:43Z","pushed_at":"2017-07-11T16:24:54Z","git_url":"git://github.com/facebook/react-native.git","ssh_url":"git@github.com:facebook/react-native.git","clone_url":"https://github.com/facebook/react-native.git","svn_url":"https://github.com/facebook/react-native","homepage":"http://facebook.github.io/react-native/","size":136427,"stargazers_count":50762,"watchers_count":50762,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":11877,"mirror_url":null,"open_issues_count":1375,"forks":11877,"open_issues":1375,"watchers":50762,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/facebook/react-native/pulls/14898"},"html":{"href":"https://github.com/facebook/react-native/pull/14898"},"issue":{"href":"https://api.github.com/repos/facebook/react-native/issues/14898"},"comments":{"href":"https://api.github.com/repos/facebook/react-native/issues/14898/comments"},"review_comments":{"href":"https://api.github.com/repos/facebook/react-native/pulls/14898/comments"},"review_comment":{"href":"https://api.github.com/repos/facebook/react-native/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/facebook/react-native/pulls/14898/commits"},"statuses":{"href":"https://api.github.com/repos/facebook/react-native/statuses/2052f33812cf5a54fe19fc25a83f90ba53a3cccf"}}}}
{"actor":{"display_login":"skevy"}}