{"action":"created","issue":{"url":"https://api.github.com/repos/NativeScript/NativeScript/issues/5746","repository_url":"https://api.github.com/repos/NativeScript/NativeScript","labels_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/5746/labels{/name}","comments_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/5746/comments","events_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/5746/events","html_url":"https://github.com/NativeScript/NativeScript/issues/5746","id":317973849,"node_id":"MDU6SXNzdWUzMTc5NzM4NDk=","number":5746,"title":"[iOS] Proper safe area support","user":{"login":"vchimev","id":12251337,"node_id":"MDQ6VXNlcjEyMjUxMzM3","avatar_url":"https://avatars1.githubusercontent.com/u/12251337?v=4","gravatar_id":"","url":"https://api.github.com/users/vchimev","html_url":"https://github.com/vchimev","followers_url":"https://api.github.com/users/vchimev/followers","following_url":"https://api.github.com/users/vchimev/following{/other_user}","gists_url":"https://api.github.com/users/vchimev/gists{/gist_id}","starred_url":"https://api.github.com/users/vchimev/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vchimev/subscriptions","organizations_url":"https://api.github.com/users/vchimev/orgs","repos_url":"https://api.github.com/users/vchimev/repos","events_url":"https://api.github.com/users/vchimev/events{/privacy}","received_events_url":"https://api.github.com/users/vchimev/received_events","type":"User","site_admin":false},"labels":[{"id":203690306,"node_id":"MDU6TGFiZWwyMDM2OTAzMDY=","url":"https://api.github.com/repos/NativeScript/NativeScript/labels/os:%20ios","name":"os: ios","color":"006b75","default":false}],"state":"open","locked":false,"assignee":{"login":"MartoYankov","id":3806145,"node_id":"MDQ6VXNlcjM4MDYxNDU=","avatar_url":"https://avatars3.githubusercontent.com/u/3806145?v=4","gravatar_id":"","url":"https://api.github.com/users/MartoYankov","html_url":"https://github.com/MartoYankov","followers_url":"https://api.github.com/users/MartoYankov/followers","following_url":"https://api.github.com/users/MartoYankov/following{/other_user}","gists_url":"https://api.github.com/users/MartoYankov/gists{/gist_id}","starred_url":"https://api.github.com/users/MartoYankov/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MartoYankov/subscriptions","organizations_url":"https://api.github.com/users/MartoYankov/orgs","repos_url":"https://api.github.com/users/MartoYankov/repos","events_url":"https://api.github.com/users/MartoYankov/events{/privacy}","received_events_url":"https://api.github.com/users/MartoYankov/received_events","type":"User","site_admin":false},"assignees":[{"login":"MartoYankov","id":3806145,"node_id":"MDQ6VXNlcjM4MDYxNDU=","avatar_url":"https://avatars3.githubusercontent.com/u/3806145?v=4","gravatar_id":"","url":"https://api.github.com/users/MartoYankov","html_url":"https://github.com/MartoYankov","followers_url":"https://api.github.com/users/MartoYankov/followers","following_url":"https://api.github.com/users/MartoYankov/following{/other_user}","gists_url":"https://api.github.com/users/MartoYankov/gists{/gist_id}","starred_url":"https://api.github.com/users/MartoYankov/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MartoYankov/subscriptions","organizations_url":"https://api.github.com/users/MartoYankov/orgs","repos_url":"https://api.github.com/users/MartoYankov/repos","events_url":"https://api.github.com/users/MartoYankov/events{/privacy}","received_events_url":"https://api.github.com/users/MartoYankov/received_events","type":"User","site_admin":false},{"login":"vchimev","id":12251337,"node_id":"MDQ6VXNlcjEyMjUxMzM3","avatar_url":"https://avatars1.githubusercontent.com/u/12251337?v=4","gravatar_id":"","url":"https://api.github.com/users/vchimev","html_url":"https://github.com/vchimev","followers_url":"https://api.github.com/users/vchimev/followers","following_url":"https://api.github.com/users/vchimev/following{/other_user}","gists_url":"https://api.github.com/users/vchimev/gists{/gist_id}","starred_url":"https://api.github.com/users/vchimev/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vchimev/subscriptions","organizations_url":"https://api.github.com/users/vchimev/orgs","repos_url":"https://api.github.com/users/vchimev/repos","events_url":"https://api.github.com/users/vchimev/events{/privacy}","received_events_url":"https://api.github.com/users/vchimev/received_events","type":"User","site_admin":false}],"milestone":null,"comments":16,"created_at":"2018-04-26T10:45:30Z","updated_at":"2018-06-28T14:55:06Z","closed_at":null,"author_association":"COLLABORATOR","body":"### Tell us about the problem\r\n\r\nThis aims to serve as an epic issue where to gather and discuss existing safe area problems with NativeScript 4.0, how to resolve them and store beneficial information on the topic.\r\n\r\n### Related resources:\r\n\r\nhttps://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/\r\nhttps://developer.apple.com/videos/play/fall2017/201/\r\nhttps://developer.apple.com/videos/play/fall2017/801/\r\nhttps://medium.com/rosberryapps/ios-safe-area-ca10e919526f\r\n\r\n### Proposed solution:\r\n\r\nThe iOS guidelines state that content should be constraint to the safe area. All the native iOS UIKit components handle these guidelines out of the box. However, {N} has its own layout system that differs from the iOS one and we should handle this ourselves. We can classify {N} components as two types - content components (those that are meaningful by themselves and show content) and container components (those that are used to contain other components and as layouts, are not meaningful just by themselves). The idea is to have all container components stretch outside the iOS safe area and have all content components lay out in the safe area. This basically means the backgrounds of the container components will be seen to the limits of the screen. Here is a list of the container components:\r\n\r\n - ListView (special case*)\r\n - ScrollView (special case*)\r\n - WebView (special case*)\r\n - Repeater\r\n - GridLayout\r\n - StackLayout\r\n - AbsoluteLayout\r\n - DockLayout\r\n - FlexboxLayout\r\n - WrapLayout\r\n\r\nspecial case* - according to guidelines all scrollable containers should scroll their content beyond top/bottom constraint.\r\n\r\n### Related issues:\r\n\r\n- [ ] https://github.com/NativeScript/NativeScript/issues/5765\r\n- [ ] https://github.com/NativeScript/NativeScript/issues/5774\r\n- [ ] https://github.com/NativeScript/NativeScript/issues/5782\r\n- [ ] https://github.com/NativeScript/NativeScript/issues/5672\r\n- [ ] https://github.com/NativeScript/NativeScript/issues/5855\r\n- [ ] https://github.com/NativeScript/nativescript-angular/issues/340\r\n\r\n\r\n### Action Items:\r\n\r\n- [x] @vchimev: Automate [templates](https://github.com/NativeScript?utf8=%E2%9C%93&q=template&type=&language=) verification against iPhone 7/8 and iPhone X.\r\nCurrently, there are builds only against iPhone 7. TODO: Add verifications for iPhone X.\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/NativeScript/NativeScript/issues/comments/401063430","html_url":"https://github.com/NativeScript/NativeScript/issues/5746#issuecomment-401063430","issue_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/5746","id":401063430,"node_id":"MDEyOklzc3VlQ29tbWVudDQwMTA2MzQzMA==","user":{"login":"speigg","id":507127,"node_id":"MDQ6VXNlcjUwNzEyNw==","avatar_url":"https://avatars1.githubusercontent.com/u/507127?v=4","gravatar_id":"","url":"https://api.github.com/users/speigg","html_url":"https://github.com/speigg","followers_url":"https://api.github.com/users/speigg/followers","following_url":"https://api.github.com/users/speigg/following{/other_user}","gists_url":"https://api.github.com/users/speigg/gists{/gist_id}","starred_url":"https://api.github.com/users/speigg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/speigg/subscriptions","organizations_url":"https://api.github.com/users/speigg/orgs","repos_url":"https://api.github.com/users/speigg/repos","events_url":"https://api.github.com/users/speigg/events{/privacy}","received_events_url":"https://api.github.com/users/speigg/received_events","type":"User","site_admin":false},"created_at":"2018-06-28T14:55:06Z","updated_at":"2018-06-28T14:55:06Z","author_association":"CONTRIBUTOR","body":"@MartoYankov ah okay I assumed that @davecoffin had his TabView at the root. \r\n\r\nAnyways, I’m not using TabView or Frame, just a GrIdLayout at the root (like @davecoffin), and yet it is contained within the safe area, which seems wrong. "}}
{"actor":{"display_login":"speigg"}}