{"action":"created","comment":{"url":"https://api.github.com/repos/bamlab/dev-standards/pulls/comments/175260580","pull_request_review_id":104768761,"id":175260580,"diff_hunk":"@@ -0,0 +1,81 @@\n+# [MO] Get element size or position dynamically with onLayout\n+\n+## Owner: [Julien Nassar](https://github.com/juliennassar)\n+\n+## Control Points\n+\n+- Hide your dynamically sized (or positioned) component width a `style={{ opacity: 0 }}` during the first rendering of your component to avoid glitches.\n+\n+## Motivation\n+\n+If you need :\n+- to create a custom loading bar display\n+- a list of views without previous knowlegde of their size but want them to be all the same\n+- just need to know the size or position of an element on your screen dynamically (whithout explicitly describing it the object's style)\n+\n+You must have access those variables during the runtime of your application.\n+\n+To do this, React offers a onLayout props in which you can pass a callback that will be executed after the rendering of a component.\n+\n+## Prerequisites\n+\n+A react/react-native app with components. We will take here the example of a loading bar like this one :","path":"react-native/react/get-element-size-or-position-with-onLayout.mo.md","position":22,"original_position":22,"commit_id":"1011ddcb97b946859b1be8a32be864d11b1c113a","original_commit_id":"1011ddcb97b946859b1be8a32be864d11b1c113a","user":{"login":"louiszawadzki","id":8973379,"avatar_url":"https://avatars2.githubusercontent.com/u/8973379?v=4","gravatar_id":"","url":"https://api.github.com/users/louiszawadzki","html_url":"https://github.com/louiszawadzki","followers_url":"https://api.github.com/users/louiszawadzki/followers","following_url":"https://api.github.com/users/louiszawadzki/following{/other_user}","gists_url":"https://api.github.com/users/louiszawadzki/gists{/gist_id}","starred_url":"https://api.github.com/users/louiszawadzki/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/louiszawadzki/subscriptions","organizations_url":"https://api.github.com/users/louiszawadzki/orgs","repos_url":"https://api.github.com/users/louiszawadzki/repos","events_url":"https://api.github.com/users/louiszawadzki/events{/privacy}","received_events_url":"https://api.github.com/users/louiszawadzki/received_events","type":"User","site_admin":false},"body":"A React Native app (the use of components is implicit).\r\n\r\nThis does not work on React as `onLayout` only exists in React Native components.","created_at":"2018-03-17T15:05:14Z","updated_at":"2018-03-17T15:05:14Z","html_url":"https://github.com/bamlab/dev-standards/pull/110#discussion_r175260580","pull_request_url":"https://api.github.com/repos/bamlab/dev-standards/pulls/110","author_association":"CONTRIBUTOR","_links":{"self":{"href":"https://api.github.com/repos/bamlab/dev-standards/pulls/comments/175260580"},"html":{"href":"https://github.com/bamlab/dev-standards/pull/110#discussion_r175260580"},"pull_request":{"href":"https://api.github.com/repos/bamlab/dev-standards/pulls/110"}}},"pull_request":{"url":"https://api.github.com/repos/bamlab/dev-standards/pulls/110","id":174435206,"html_url":"https://github.com/bamlab/dev-standards/pull/110","diff_url":"https://github.com/bamlab/dev-standards/pull/110.diff","patch_url":"https://github.com/bamlab/dev-standards/pull/110.patch","issue_url":"https://api.github.com/repos/bamlab/dev-standards/issues/110","number":110,"state":"open","locked":false,"title":"Add onLayout dev standard","user":{"login":"juliennassar","id":13121639,"avatar_url":"https://avatars1.githubusercontent.com/u/13121639?v=4","gravatar_id":"","url":"https://api.github.com/users/juliennassar","html_url":"https://github.com/juliennassar","followers_url":"https://api.github.com/users/juliennassar/followers","following_url":"https://api.github.com/users/juliennassar/following{/other_user}","gists_url":"https://api.github.com/users/juliennassar/gists{/gist_id}","starred_url":"https://api.github.com/users/juliennassar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/juliennassar/subscriptions","organizations_url":"https://api.github.com/users/juliennassar/orgs","repos_url":"https://api.github.com/users/juliennassar/repos","events_url":"https://api.github.com/users/juliennassar/events{/privacy}","received_events_url":"https://api.github.com/users/juliennassar/received_events","type":"User","site_admin":false},"body":"","created_at":"2018-03-12T17:09:10Z","updated_at":"2018-03-17T15:05:14Z","closed_at":null,"merged_at":null,"merge_commit_sha":"2224891f61884e17ffbabbc9e5de3b4fbda43e5d","assignee":null,"assignees":[],"requested_reviewers":[{"login":"Almouro","id":4534323,"avatar_url":"https://avatars0.githubusercontent.com/u/4534323?v=4","gravatar_id":"","url":"https://api.github.com/users/Almouro","html_url":"https://github.com/Almouro","followers_url":"https://api.github.com/users/Almouro/followers","following_url":"https://api.github.com/users/Almouro/following{/other_user}","gists_url":"https://api.github.com/users/Almouro/gists{/gist_id}","starred_url":"https://api.github.com/users/Almouro/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Almouro/subscriptions","organizations_url":"https://api.github.com/users/Almouro/orgs","repos_url":"https://api.github.com/users/Almouro/repos","events_url":"https://api.github.com/users/Almouro/events{/privacy}","received_events_url":"https://api.github.com/users/Almouro/received_events","type":"User","site_admin":false}],"requested_teams":[],"labels":[],"milestone":null,"commits_url":"https://api.github.com/repos/bamlab/dev-standards/pulls/110/commits","review_comments_url":"https://api.github.com/repos/bamlab/dev-standards/pulls/110/comments","review_comment_url":"https://api.github.com/repos/bamlab/dev-standards/pulls/comments{/number}","comments_url":"https://api.github.com/repos/bamlab/dev-standards/issues/110/comments","statuses_url":"https://api.github.com/repos/bamlab/dev-standards/statuses/1011ddcb97b946859b1be8a32be864d11b1c113a","head":{"label":"bamlab:juliennassar-get-element-size-or-position-with-onLayout","ref":"juliennassar-get-element-size-or-position-with-onLayout","sha":"1011ddcb97b946859b1be8a32be864d11b1c113a","user":{"login":"bamlab","id":9597329,"avatar_url":"https://avatars3.githubusercontent.com/u/9597329?v=4","gravatar_id":"","url":"https://api.github.com/users/bamlab","html_url":"https://github.com/bamlab","followers_url":"https://api.github.com/users/bamlab/followers","following_url":"https://api.github.com/users/bamlab/following{/other_user}","gists_url":"https://api.github.com/users/bamlab/gists{/gist_id}","starred_url":"https://api.github.com/users/bamlab/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bamlab/subscriptions","organizations_url":"https://api.github.com/users/bamlab/orgs","repos_url":"https://api.github.com/users/bamlab/repos","events_url":"https://api.github.com/users/bamlab/events{/privacy}","received_events_url":"https://api.github.com/users/bamlab/received_events","type":"Organization","site_admin":false},"repo":{"id":98423172,"name":"dev-standards","full_name":"bamlab/dev-standards","owner":{"login":"bamlab","id":9597329,"avatar_url":"https://avatars3.githubusercontent.com/u/9597329?v=4","gravatar_id":"","url":"https://api.github.com/users/bamlab","html_url":"https://github.com/bamlab","followers_url":"https://api.github.com/users/bamlab/followers","following_url":"https://api.github.com/users/bamlab/following{/other_user}","gists_url":"https://api.github.com/users/bamlab/gists{/gist_id}","starred_url":"https://api.github.com/users/bamlab/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bamlab/subscriptions","organizations_url":"https://api.github.com/users/bamlab/orgs","repos_url":"https://api.github.com/users/bamlab/repos","events_url":"https://api.github.com/users/bamlab/events{/privacy}","received_events_url":"https://api.github.com/users/bamlab/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/bamlab/dev-standards","description":"The development standards and modes of operation at BAM","fork":false,"url":"https://api.github.com/repos/bamlab/dev-standards","forks_url":"https://api.github.com/repos/bamlab/dev-standards/forks","keys_url":"https://api.github.com/repos/bamlab/dev-standards/keys{/key_id}","collaborators_url":"https://api.github.com/repos/bamlab/dev-standards/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/bamlab/dev-standards/teams","hooks_url":"https://api.github.com/repos/bamlab/dev-standards/hooks","issue_events_url":"https://api.github.com/repos/bamlab/dev-standards/issues/events{/number}","events_url":"https://api.github.com/repos/bamlab/dev-standards/events","assignees_url":"https://api.github.com/repos/bamlab/dev-standards/assignees{/user}","branches_url":"https://api.github.com/repos/bamlab/dev-standards/branches{/branch}","tags_url":"https://api.github.com/repos/bamlab/dev-standards/tags","blobs_url":"https://api.github.com/repos/bamlab/dev-standards/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/bamlab/dev-standards/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/bamlab/dev-standards/git/refs{/sha}","trees_url":"https://api.github.com/repos/bamlab/dev-standards/git/trees{/sha}","statuses_url":"https://api.github.com/repos/bamlab/dev-standards/statuses/{sha}","languages_url":"https://api.github.com/repos/bamlab/dev-standards/languages","stargazers_url":"https://api.github.com/repos/bamlab/dev-standards/stargazers","contributors_url":"https://api.github.com/repos/bamlab/dev-standards/contributors","subscribers_url":"https://api.github.com/repos/bamlab/dev-standards/subscribers","subscription_url":"https://api.github.com/repos/bamlab/dev-standards/subscription","commits_url":"https://api.github.com/repos/bamlab/dev-standards/commits{/sha}","git_commits_url":"https://api.github.com/repos/bamlab/dev-standards/git/commits{/sha}","comments_url":"https://api.github.com/repos/bamlab/dev-standards/comments{/number}","issue_comment_url":"https://api.github.com/repos/bamlab/dev-standards/issues/comments{/number}","contents_url":"https://api.github.com/repos/bamlab/dev-standards/contents/{+path}","compare_url":"https://api.github.com/repos/bamlab/dev-standards/compare/{base}...{head}","merges_url":"https://api.github.com/repos/bamlab/dev-standards/merges","archive_url":"https://api.github.com/repos/bamlab/dev-standards/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/bamlab/dev-standards/downloads","issues_url":"https://api.github.com/repos/bamlab/dev-standards/issues{/number}","pulls_url":"https://api.github.com/repos/bamlab/dev-standards/pulls{/number}","milestones_url":"https://api.github.com/repos/bamlab/dev-standards/milestones{/number}","notifications_url":"https://api.github.com/repos/bamlab/dev-standards/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/bamlab/dev-standards/labels{/name}","releases_url":"https://api.github.com/repos/bamlab/dev-standards/releases{/id}","deployments_url":"https://api.github.com/repos/bamlab/dev-standards/deployments","created_at":"2017-07-26T12:59:48Z","updated_at":"2018-03-15T11:25:10Z","pushed_at":"2018-03-14T08:23:47Z","git_url":"git://github.com/bamlab/dev-standards.git","ssh_url":"git@github.com:bamlab/dev-standards.git","clone_url":"https://github.com/bamlab/dev-standards.git","svn_url":"https://github.com/bamlab/dev-standards","homepage":"https://bamtech.gitbooks.io/dev-standards/","size":1769,"stargazers_count":23,"watchers_count":23,"language":"JavaScript","has_issues":true,"has_projects":false,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":14,"mirror_url":null,"archived":false,"open_issues_count":6,"license":{"key":"other","name":"Other","spdx_id":null,"url":null},"forks":14,"open_issues":6,"watchers":23,"default_branch":"master"}},"base":{"label":"bamlab:master","ref":"master","sha":"8ddd60e2bed07c06c00d430b1026b5e930e37691","user":{"login":"bamlab","id":9597329,"avatar_url":"https://avatars3.githubusercontent.com/u/9597329?v=4","gravatar_id":"","url":"https://api.github.com/users/bamlab","html_url":"https://github.com/bamlab","followers_url":"https://api.github.com/users/bamlab/followers","following_url":"https://api.github.com/users/bamlab/following{/other_user}","gists_url":"https://api.github.com/users/bamlab/gists{/gist_id}","starred_url":"https://api.github.com/users/bamlab/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bamlab/subscriptions","organizations_url":"https://api.github.com/users/bamlab/orgs","repos_url":"https://api.github.com/users/bamlab/repos","events_url":"https://api.github.com/users/bamlab/events{/privacy}","received_events_url":"https://api.github.com/users/bamlab/received_events","type":"Organization","site_admin":false},"repo":{"id":98423172,"name":"dev-standards","full_name":"bamlab/dev-standards","owner":{"login":"bamlab","id":9597329,"avatar_url":"https://avatars3.githubusercontent.com/u/9597329?v=4","gravatar_id":"","url":"https://api.github.com/users/bamlab","html_url":"https://github.com/bamlab","followers_url":"https://api.github.com/users/bamlab/followers","following_url":"https://api.github.com/users/bamlab/following{/other_user}","gists_url":"https://api.github.com/users/bamlab/gists{/gist_id}","starred_url":"https://api.github.com/users/bamlab/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bamlab/subscriptions","organizations_url":"https://api.github.com/users/bamlab/orgs","repos_url":"https://api.github.com/users/bamlab/repos","events_url":"https://api.github.com/users/bamlab/events{/privacy}","received_events_url":"https://api.github.com/users/bamlab/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/bamlab/dev-standards","description":"The development standards and modes of operation at BAM","fork":false,"url":"https://api.github.com/repos/bamlab/dev-standards","forks_url":"https://api.github.com/repos/bamlab/dev-standards/forks","keys_url":"https://api.github.com/repos/bamlab/dev-standards/keys{/key_id}","collaborators_url":"https://api.github.com/repos/bamlab/dev-standards/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/bamlab/dev-standards/teams","hooks_url":"https://api.github.com/repos/bamlab/dev-standards/hooks","issue_events_url":"https://api.github.com/repos/bamlab/dev-standards/issues/events{/number}","events_url":"https://api.github.com/repos/bamlab/dev-standards/events","assignees_url":"https://api.github.com/repos/bamlab/dev-standards/assignees{/user}","branches_url":"https://api.github.com/repos/bamlab/dev-standards/branches{/branch}","tags_url":"https://api.github.com/repos/bamlab/dev-standards/tags","blobs_url":"https://api.github.com/repos/bamlab/dev-standards/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/bamlab/dev-standards/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/bamlab/dev-standards/git/refs{/sha}","trees_url":"https://api.github.com/repos/bamlab/dev-standards/git/trees{/sha}","statuses_url":"https://api.github.com/repos/bamlab/dev-standards/statuses/{sha}","languages_url":"https://api.github.com/repos/bamlab/dev-standards/languages","stargazers_url":"https://api.github.com/repos/bamlab/dev-standards/stargazers","contributors_url":"https://api.github.com/repos/bamlab/dev-standards/contributors","subscribers_url":"https://api.github.com/repos/bamlab/dev-standards/subscribers","subscription_url":"https://api.github.com/repos/bamlab/dev-standards/subscription","commits_url":"https://api.github.com/repos/bamlab/dev-standards/commits{/sha}","git_commits_url":"https://api.github.com/repos/bamlab/dev-standards/git/commits{/sha}","comments_url":"https://api.github.com/repos/bamlab/dev-standards/comments{/number}","issue_comment_url":"https://api.github.com/repos/bamlab/dev-standards/issues/comments{/number}","contents_url":"https://api.github.com/repos/bamlab/dev-standards/contents/{+path}","compare_url":"https://api.github.com/repos/bamlab/dev-standards/compare/{base}...{head}","merges_url":"https://api.github.com/repos/bamlab/dev-standards/merges","archive_url":"https://api.github.com/repos/bamlab/dev-standards/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/bamlab/dev-standards/downloads","issues_url":"https://api.github.com/repos/bamlab/dev-standards/issues{/number}","pulls_url":"https://api.github.com/repos/bamlab/dev-standards/pulls{/number}","milestones_url":"https://api.github.com/repos/bamlab/dev-standards/milestones{/number}","notifications_url":"https://api.github.com/repos/bamlab/dev-standards/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/bamlab/dev-standards/labels{/name}","releases_url":"https://api.github.com/repos/bamlab/dev-standards/releases{/id}","deployments_url":"https://api.github.com/repos/bamlab/dev-standards/deployments","created_at":"2017-07-26T12:59:48Z","updated_at":"2018-03-15T11:25:10Z","pushed_at":"2018-03-14T08:23:47Z","git_url":"git://github.com/bamlab/dev-standards.git","ssh_url":"git@github.com:bamlab/dev-standards.git","clone_url":"https://github.com/bamlab/dev-standards.git","svn_url":"https://github.com/bamlab/dev-standards","homepage":"https://bamtech.gitbooks.io/dev-standards/","size":1769,"stargazers_count":23,"watchers_count":23,"language":"JavaScript","has_issues":true,"has_projects":false,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":14,"mirror_url":null,"archived":false,"open_issues_count":6,"license":{"key":"other","name":"Other","spdx_id":null,"url":null},"forks":14,"open_issues":6,"watchers":23,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/bamlab/dev-standards/pulls/110"},"html":{"href":"https://github.com/bamlab/dev-standards/pull/110"},"issue":{"href":"https://api.github.com/repos/bamlab/dev-standards/issues/110"},"comments":{"href":"https://api.github.com/repos/bamlab/dev-standards/issues/110/comments"},"review_comments":{"href":"https://api.github.com/repos/bamlab/dev-standards/pulls/110/comments"},"review_comment":{"href":"https://api.github.com/repos/bamlab/dev-standards/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/bamlab/dev-standards/pulls/110/commits"},"statuses":{"href":"https://api.github.com/repos/bamlab/dev-standards/statuses/1011ddcb97b946859b1be8a32be864d11b1c113a"}},"author_association":"CONTRIBUTOR"}}
{"actor":{"display_login":"louiszawadzki"}}