{"action":"created","comment":{"url":"https://api.github.com/repos/Skyscanner/backpack/pulls/comments/200575241","pull_request_review_id":134917916,"id":200575241,"node_id":"MDI0OlB1bGxSZXF1ZXN0UmV2aWV3Q29tbWVudDIwMDU3NTI0MQ==","diff_hunk":"@@ -0,0 +1,178 @@\n+/*\n+ * Backpack - Skyscanner's Design System\n+ *\n+ * Copyright 2018 Skyscanner Ltd\n+ *\n+ * Licensed under the Apache License, Version 2.0 (the \"License\");\n+ * you may not use this file except in compliance with the License.\n+ * You may obtain a copy of the License at\n+ *\n+ *   http://www.apache.org/licenses/LICENSE-2.0\n+ *\n+ * Unless required by applicable law or agreed to in writing, software\n+ * distributed under the License is distributed on an \"AS IS\" BASIS,\n+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n+ * See the License for the specific language governing permissions and\n+ * limitations under the License.\n+ */\n+\n+/* @flow */\n+\n+import React, { Component } from 'react';\n+import PropTypes from 'prop-types';\n+import {\n+  Animated,\n+  StyleSheet,\n+  View,\n+  ViewPropTypes,\n+  type ImageSourcePropType,\n+  type StyleObj,\n+} from 'react-native';\n+import BpkSpinner from 'react-native-bpk-component-spinner';\n+\n+import {\n+  animationDurationBase,\n+  borderRadiusSm,\n+  colorGray300,\n+} from 'bpk-tokens/tokens/base.react.native';\n+\n+const styles = StyleSheet.create({\n+  outer: {\n+    width: '100%',\n+    height: '100%',\n+  },\n+  outerWithBorderRadius: {\n+    borderRadius: borderRadiusSm,\n+    overflow: 'hidden',\n+  },\n+  image: {\n+    width: '100%',\n+    height: '100%',\n+    position: 'absolute',\n+  },\n+  loadingIndicatorView: {\n+    width: '100%',\n+    height: '100%',\n+    backgroundColor: colorGray300,\n+    justifyContent: 'center',\n+    alignItems: 'center',\n+    position: 'absolute',\n+  },\n+});\n+\n+export type Props = {\n+  onLoad: ?() => mixed,\n+  style: ?StyleObj,\n+  alt: string,\n+  borderRadius: boolean,\n+  inView: boolean,\n+  loaded: boolean,\n+  source: ImageSourcePropType,\n+};\n+\n+type State = {\n+  imageOpacity: number,\n+  loadingIndicatorOpacity: number,\n+  showLoadingIndicator: boolean,\n+};\n+\n+class BpkImage extends Component<Props, State> {\n+  static propTypes = {\n+    alt: PropTypes.string.isRequired,\n+    source: PropTypes.oneOfType([PropTypes.string, PropTypes.object])\n+      .isRequired,\n+    borderRadius: PropTypes.bool,\n+    inView: PropTypes.bool,\n+    loaded: PropTypes.bool,\n+    onLoad: PropTypes.func,\n+    style: ViewPropTypes.style,\n+  };\n+\n+  static defaultProps = {\n+    borderRadius: true,\n+    inView: true,\n+    loaded: true,\n+    onLoad: null,\n+    style: null,\n+  };\n+\n+  constructor(props: Props) {\n+    super(props);\n+    this.state = {\n+      showLoadingIndicator: !props.loaded,\n+      imageOpacity: new Animated.Value(props.loaded ? 1 : 0),\n+      loadingIndicatorOpacity: new Animated.Value(props.loaded ? 0 : 1),\n+    };\n+  }\n+\n+  componentWillReceiveProps = newProps => {\n+    if (!this.props.loaded && newProps.loaded) {\n+      Animated.timing(this.state.imageOpacity, {\n+        toValue: 1,\n+        duration: animationDurationBase,\n+      }).start();\n+      // once the image has finished fading in, we can stop\n+      // rendering the spinner and background\n+      setTimeout(() => {\n+        Animated.timing(this.state.loadingIndicatorOpacity, {\n+          toValue: 0,\n+          duration: animationDurationBase,\n+        }).start();\n+      }, animationDurationBase);\n+      setTimeout(() => {\n+        this.setState({ showLoadingIndicator: false });\n+      }, 2 * animationDurationBase);\n+    }\n+  };\n+\n+  onImageLoad = () => {\n+    if (this.props.onLoad) {\n+      this.props.onLoad();\n+    }\n+  };\n+\n+  render() {\n+    const {\n+      style: userStyle,\n+      source,\n+      alt,\n+      inView,\n+      borderRadius,\n+      loaded,\n+      ...rest\n+    } = this.props;\n+\n+    const outerStyle = [styles.outer];\n+    if (borderRadius) {\n+      outerStyle.push(styles.outerWithBorderRadius);\n+    }\n+    if (userStyle) {\n+      outerStyle.push(userStyle);\n+    }\n+\n+    return (\n+      <View style={outerStyle} {...rest}>\n+        {this.state.showLoadingIndicator && (\n+          <Animated.View\n+            style={[\n+              styles.loadingIndicatorView,\n+              { opacity: this.state.loadingIndicatorOpacity },\n+            ]}\n+          >\n+            {inView && <BpkSpinner small type=\"dark\" />}\n+          </Animated.View>\n+        )}\n+        {inView && (\n+          <Animated.Image\n+            onLoad={this.onImageLoad}\n+            style={[styles.image, { opacity: this.state.imageOpacity }]}\n+            source={source}\n+            alt={alt}","path":"native/packages/react-native-bpk-component-image/src/BpkImage.js","position":170,"original_position":170,"commit_id":"8e6276e852be20586ec3e0fa278cc3be51030fd5","original_commit_id":"8e6276e852be20586ec3e0fa278cc3be51030fd5","user":{"login":"shaundon","id":73652,"node_id":"MDQ6VXNlcjczNjUy","avatar_url":"https://avatars1.githubusercontent.com/u/73652?v=4","gravatar_id":"","url":"https://api.github.com/users/shaundon","html_url":"https://github.com/shaundon","followers_url":"https://api.github.com/users/shaundon/followers","following_url":"https://api.github.com/users/shaundon/following{/other_user}","gists_url":"https://api.github.com/users/shaundon/gists{/gist_id}","starred_url":"https://api.github.com/users/shaundon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shaundon/subscriptions","organizations_url":"https://api.github.com/users/shaundon/orgs","repos_url":"https://api.github.com/users/shaundon/repos","events_url":"https://api.github.com/users/shaundon/events{/privacy}","received_events_url":"https://api.github.com/users/shaundon/received_events","type":"User","site_admin":false},"body":"Because we're putting `...rest` on here now, you can remove source={source} and alt={alt} because `...rest` will encapsulate those.","created_at":"2018-07-06T07:51:58Z","updated_at":"2018-07-06T07:51:58Z","html_url":"https://github.com/Skyscanner/backpack/pull/896#discussion_r200575241","pull_request_url":"https://api.github.com/repos/Skyscanner/backpack/pulls/896","author_association":"CONTRIBUTOR","_links":{"self":{"href":"https://api.github.com/repos/Skyscanner/backpack/pulls/comments/200575241"},"html":{"href":"https://github.com/Skyscanner/backpack/pull/896#discussion_r200575241"},"pull_request":{"href":"https://api.github.com/repos/Skyscanner/backpack/pulls/896"}}},"pull_request":{"url":"https://api.github.com/repos/Skyscanner/backpack/pulls/896","id":199166845,"node_id":"MDExOlB1bGxSZXF1ZXN0MTk5MTY2ODQ1","html_url":"https://github.com/Skyscanner/backpack/pull/896","diff_url":"https://github.com/Skyscanner/backpack/pull/896.diff","patch_url":"https://github.com/Skyscanner/backpack/pull/896.patch","issue_url":"https://api.github.com/repos/Skyscanner/backpack/issues/896","number":896,"state":"open","locked":false,"title":"[BPK-1489] Add RN Image component","user":{"login":"georgegillams","id":30267516,"node_id":"MDQ6VXNlcjMwMjY3NTE2","avatar_url":"https://avatars0.githubusercontent.com/u/30267516?v=4","gravatar_id":"","url":"https://api.github.com/users/georgegillams","html_url":"https://github.com/georgegillams","followers_url":"https://api.github.com/users/georgegillams/followers","following_url":"https://api.github.com/users/georgegillams/following{/other_user}","gists_url":"https://api.github.com/users/georgegillams/gists{/gist_id}","starred_url":"https://api.github.com/users/georgegillams/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/georgegillams/subscriptions","organizations_url":"https://api.github.com/users/georgegillams/orgs","repos_url":"https://api.github.com/users/georgegillams/repos","events_url":"https://api.github.com/users/georgegillams/events{/privacy}","received_events_url":"https://api.github.com/users/georgegillams/received_events","type":"User","site_admin":false},"body":"TODO:\r\n - [ ] Readme\r\n - [x] Tests\r\n - [ ] Unreleased.md\r\n - [ ] Performance Story","created_at":"2018-07-04T07:56:10Z","updated_at":"2018-07-06T07:51:58Z","closed_at":null,"merged_at":null,"merge_commit_sha":"4f9009bb53ef0d1ad6d567686c3f76f9eb820da1","assignee":null,"assignees":[],"requested_reviewers":[],"requested_teams":[],"labels":[],"milestone":null,"commits_url":"https://api.github.com/repos/Skyscanner/backpack/pulls/896/commits","review_comments_url":"https://api.github.com/repos/Skyscanner/backpack/pulls/896/comments","review_comment_url":"https://api.github.com/repos/Skyscanner/backpack/pulls/comments{/number}","comments_url":"https://api.github.com/repos/Skyscanner/backpack/issues/896/comments","statuses_url":"https://api.github.com/repos/Skyscanner/backpack/statuses/8e6276e852be20586ec3e0fa278cc3be51030fd5","head":{"label":"Skyscanner:bpk-1489-add-rn-image-component","ref":"bpk-1489-add-rn-image-component","sha":"8e6276e852be20586ec3e0fa278cc3be51030fd5","user":{"login":"Skyscanner","id":522811,"node_id":"MDEyOk9yZ2FuaXphdGlvbjUyMjgxMQ==","avatar_url":"https://avatars2.githubusercontent.com/u/522811?v=4","gravatar_id":"","url":"https://api.github.com/users/Skyscanner","html_url":"https://github.com/Skyscanner","followers_url":"https://api.github.com/users/Skyscanner/followers","following_url":"https://api.github.com/users/Skyscanner/following{/other_user}","gists_url":"https://api.github.com/users/Skyscanner/gists{/gist_id}","starred_url":"https://api.github.com/users/Skyscanner/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Skyscanner/subscriptions","organizations_url":"https://api.github.com/users/Skyscanner/orgs","repos_url":"https://api.github.com/users/Skyscanner/repos","events_url":"https://api.github.com/users/Skyscanner/events{/privacy}","received_events_url":"https://api.github.com/users/Skyscanner/received_events","type":"Organization","site_admin":false},"repo":{"id":85820377,"node_id":"MDEwOlJlcG9zaXRvcnk4NTgyMDM3Nw==","name":"backpack","full_name":"Skyscanner/backpack","owner":{"login":"Skyscanner","id":522811,"node_id":"MDEyOk9yZ2FuaXphdGlvbjUyMjgxMQ==","avatar_url":"https://avatars2.githubusercontent.com/u/522811?v=4","gravatar_id":"","url":"https://api.github.com/users/Skyscanner","html_url":"https://github.com/Skyscanner","followers_url":"https://api.github.com/users/Skyscanner/followers","following_url":"https://api.github.com/users/Skyscanner/following{/other_user}","gists_url":"https://api.github.com/users/Skyscanner/gists{/gist_id}","starred_url":"https://api.github.com/users/Skyscanner/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Skyscanner/subscriptions","organizations_url":"https://api.github.com/users/Skyscanner/orgs","repos_url":"https://api.github.com/users/Skyscanner/repos","events_url":"https://api.github.com/users/Skyscanner/events{/privacy}","received_events_url":"https://api.github.com/users/Skyscanner/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/Skyscanner/backpack","description":"Backpack Design System","fork":false,"url":"https://api.github.com/repos/Skyscanner/backpack","forks_url":"https://api.github.com/repos/Skyscanner/backpack/forks","keys_url":"https://api.github.com/repos/Skyscanner/backpack/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Skyscanner/backpack/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Skyscanner/backpack/teams","hooks_url":"https://api.github.com/repos/Skyscanner/backpack/hooks","issue_events_url":"https://api.github.com/repos/Skyscanner/backpack/issues/events{/number}","events_url":"https://api.github.com/repos/Skyscanner/backpack/events","assignees_url":"https://api.github.com/repos/Skyscanner/backpack/assignees{/user}","branches_url":"https://api.github.com/repos/Skyscanner/backpack/branches{/branch}","tags_url":"https://api.github.com/repos/Skyscanner/backpack/tags","blobs_url":"https://api.github.com/repos/Skyscanner/backpack/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Skyscanner/backpack/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Skyscanner/backpack/git/refs{/sha}","trees_url":"https://api.github.com/repos/Skyscanner/backpack/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Skyscanner/backpack/statuses/{sha}","languages_url":"https://api.github.com/repos/Skyscanner/backpack/languages","stargazers_url":"https://api.github.com/repos/Skyscanner/backpack/stargazers","contributors_url":"https://api.github.com/repos/Skyscanner/backpack/contributors","subscribers_url":"https://api.github.com/repos/Skyscanner/backpack/subscribers","subscription_url":"https://api.github.com/repos/Skyscanner/backpack/subscription","commits_url":"https://api.github.com/repos/Skyscanner/backpack/commits{/sha}","git_commits_url":"https://api.github.com/repos/Skyscanner/backpack/git/commits{/sha}","comments_url":"https://api.github.com/repos/Skyscanner/backpack/comments{/number}","issue_comment_url":"https://api.github.com/repos/Skyscanner/backpack/issues/comments{/number}","contents_url":"https://api.github.com/repos/Skyscanner/backpack/contents/{+path}","compare_url":"https://api.github.com/repos/Skyscanner/backpack/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Skyscanner/backpack/merges","archive_url":"https://api.github.com/repos/Skyscanner/backpack/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Skyscanner/backpack/downloads","issues_url":"https://api.github.com/repos/Skyscanner/backpack/issues{/number}","pulls_url":"https://api.github.com/repos/Skyscanner/backpack/pulls{/number}","milestones_url":"https://api.github.com/repos/Skyscanner/backpack/milestones{/number}","notifications_url":"https://api.github.com/repos/Skyscanner/backpack/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Skyscanner/backpack/labels{/name}","releases_url":"https://api.github.com/repos/Skyscanner/backpack/releases{/id}","deployments_url":"https://api.github.com/repos/Skyscanner/backpack/deployments","created_at":"2017-03-22T11:34:41Z","updated_at":"2018-07-05T13:50:12Z","pushed_at":"2018-07-06T07:34:52Z","git_url":"git://github.com/Skyscanner/backpack.git","ssh_url":"git@github.com:Skyscanner/backpack.git","clone_url":"https://github.com/Skyscanner/backpack.git","svn_url":"https://github.com/Skyscanner/backpack","homepage":"https://backpack.github.io","size":74717,"stargazers_count":167,"watchers_count":167,"language":"JavaScript","has_issues":true,"has_projects":false,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":57,"mirror_url":null,"archived":false,"open_issues_count":11,"license":{"key":"apache-2.0","name":"Apache License 2.0","spdx_id":"Apache-2.0","url":"https://api.github.com/licenses/apache-2.0","node_id":"MDc6TGljZW5zZTI="},"forks":57,"open_issues":11,"watchers":167,"default_branch":"master"}},"base":{"label":"Skyscanner:master","ref":"master","sha":"1395e345e5c3ecb871ad1646c7c741a977edc62f","user":{"login":"Skyscanner","id":522811,"node_id":"MDEyOk9yZ2FuaXphdGlvbjUyMjgxMQ==","avatar_url":"https://avatars2.githubusercontent.com/u/522811?v=4","gravatar_id":"","url":"https://api.github.com/users/Skyscanner","html_url":"https://github.com/Skyscanner","followers_url":"https://api.github.com/users/Skyscanner/followers","following_url":"https://api.github.com/users/Skyscanner/following{/other_user}","gists_url":"https://api.github.com/users/Skyscanner/gists{/gist_id}","starred_url":"https://api.github.com/users/Skyscanner/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Skyscanner/subscriptions","organizations_url":"https://api.github.com/users/Skyscanner/orgs","repos_url":"https://api.github.com/users/Skyscanner/repos","events_url":"https://api.github.com/users/Skyscanner/events{/privacy}","received_events_url":"https://api.github.com/users/Skyscanner/received_events","type":"Organization","site_admin":false},"repo":{"id":85820377,"node_id":"MDEwOlJlcG9zaXRvcnk4NTgyMDM3Nw==","name":"backpack","full_name":"Skyscanner/backpack","owner":{"login":"Skyscanner","id":522811,"node_id":"MDEyOk9yZ2FuaXphdGlvbjUyMjgxMQ==","avatar_url":"https://avatars2.githubusercontent.com/u/522811?v=4","gravatar_id":"","url":"https://api.github.com/users/Skyscanner","html_url":"https://github.com/Skyscanner","followers_url":"https://api.github.com/users/Skyscanner/followers","following_url":"https://api.github.com/users/Skyscanner/following{/other_user}","gists_url":"https://api.github.com/users/Skyscanner/gists{/gist_id}","starred_url":"https://api.github.com/users/Skyscanner/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Skyscanner/subscriptions","organizations_url":"https://api.github.com/users/Skyscanner/orgs","repos_url":"https://api.github.com/users/Skyscanner/repos","events_url":"https://api.github.com/users/Skyscanner/events{/privacy}","received_events_url":"https://api.github.com/users/Skyscanner/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/Skyscanner/backpack","description":"Backpack Design System","fork":false,"url":"https://api.github.com/repos/Skyscanner/backpack","forks_url":"https://api.github.com/repos/Skyscanner/backpack/forks","keys_url":"https://api.github.com/repos/Skyscanner/backpack/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Skyscanner/backpack/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Skyscanner/backpack/teams","hooks_url":"https://api.github.com/repos/Skyscanner/backpack/hooks","issue_events_url":"https://api.github.com/repos/Skyscanner/backpack/issues/events{/number}","events_url":"https://api.github.com/repos/Skyscanner/backpack/events","assignees_url":"https://api.github.com/repos/Skyscanner/backpack/assignees{/user}","branches_url":"https://api.github.com/repos/Skyscanner/backpack/branches{/branch}","tags_url":"https://api.github.com/repos/Skyscanner/backpack/tags","blobs_url":"https://api.github.com/repos/Skyscanner/backpack/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Skyscanner/backpack/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Skyscanner/backpack/git/refs{/sha}","trees_url":"https://api.github.com/repos/Skyscanner/backpack/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Skyscanner/backpack/statuses/{sha}","languages_url":"https://api.github.com/repos/Skyscanner/backpack/languages","stargazers_url":"https://api.github.com/repos/Skyscanner/backpack/stargazers","contributors_url":"https://api.github.com/repos/Skyscanner/backpack/contributors","subscribers_url":"https://api.github.com/repos/Skyscanner/backpack/subscribers","subscription_url":"https://api.github.com/repos/Skyscanner/backpack/subscription","commits_url":"https://api.github.com/repos/Skyscanner/backpack/commits{/sha}","git_commits_url":"https://api.github.com/repos/Skyscanner/backpack/git/commits{/sha}","comments_url":"https://api.github.com/repos/Skyscanner/backpack/comments{/number}","issue_comment_url":"https://api.github.com/repos/Skyscanner/backpack/issues/comments{/number}","contents_url":"https://api.github.com/repos/Skyscanner/backpack/contents/{+path}","compare_url":"https://api.github.com/repos/Skyscanner/backpack/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Skyscanner/backpack/merges","archive_url":"https://api.github.com/repos/Skyscanner/backpack/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Skyscanner/backpack/downloads","issues_url":"https://api.github.com/repos/Skyscanner/backpack/issues{/number}","pulls_url":"https://api.github.com/repos/Skyscanner/backpack/pulls{/number}","milestones_url":"https://api.github.com/repos/Skyscanner/backpack/milestones{/number}","notifications_url":"https://api.github.com/repos/Skyscanner/backpack/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Skyscanner/backpack/labels{/name}","releases_url":"https://api.github.com/repos/Skyscanner/backpack/releases{/id}","deployments_url":"https://api.github.com/repos/Skyscanner/backpack/deployments","created_at":"2017-03-22T11:34:41Z","updated_at":"2018-07-05T13:50:12Z","pushed_at":"2018-07-06T07:34:52Z","git_url":"git://github.com/Skyscanner/backpack.git","ssh_url":"git@github.com:Skyscanner/backpack.git","clone_url":"https://github.com/Skyscanner/backpack.git","svn_url":"https://github.com/Skyscanner/backpack","homepage":"https://backpack.github.io","size":74717,"stargazers_count":167,"watchers_count":167,"language":"JavaScript","has_issues":true,"has_projects":false,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":57,"mirror_url":null,"archived":false,"open_issues_count":11,"license":{"key":"apache-2.0","name":"Apache License 2.0","spdx_id":"Apache-2.0","url":"https://api.github.com/licenses/apache-2.0","node_id":"MDc6TGljZW5zZTI="},"forks":57,"open_issues":11,"watchers":167,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/Skyscanner/backpack/pulls/896"},"html":{"href":"https://github.com/Skyscanner/backpack/pull/896"},"issue":{"href":"https://api.github.com/repos/Skyscanner/backpack/issues/896"},"comments":{"href":"https://api.github.com/repos/Skyscanner/backpack/issues/896/comments"},"review_comments":{"href":"https://api.github.com/repos/Skyscanner/backpack/pulls/896/comments"},"review_comment":{"href":"https://api.github.com/repos/Skyscanner/backpack/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/Skyscanner/backpack/pulls/896/commits"},"statuses":{"href":"https://api.github.com/repos/Skyscanner/backpack/statuses/8e6276e852be20586ec3e0fa278cc3be51030fd5"}},"author_association":"CONTRIBUTOR"}}
{"actor":{"display_login":"shaundon"}}