{"action":"created","issue":{"url":"https://api.github.com/repos/react-community/react-navigation/issues/2833","repository_url":"https://api.github.com/repos/react-community/react-navigation","labels_url":"https://api.github.com/repos/react-community/react-navigation/issues/2833/labels{/name}","comments_url":"https://api.github.com/repos/react-community/react-navigation/issues/2833/comments","events_url":"https://api.github.com/repos/react-community/react-navigation/issues/2833/events","html_url":"https://github.com/react-community/react-navigation/pull/2833","id":268971623,"number":2833,"title":"Add iPhone X SafeAreaView","user":{"login":"davepack","id":2732635,"avatar_url":"https://avatars3.githubusercontent.com/u/2732635?v=4","gravatar_id":"","url":"https://api.github.com/users/davepack","html_url":"https://github.com/davepack","followers_url":"https://api.github.com/users/davepack/followers","following_url":"https://api.github.com/users/davepack/following{/other_user}","gists_url":"https://api.github.com/users/davepack/gists{/gist_id}","starred_url":"https://api.github.com/users/davepack/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/davepack/subscriptions","organizations_url":"https://api.github.com/users/davepack/orgs","repos_url":"https://api.github.com/users/davepack/repos","events_url":"https://api.github.com/users/davepack/events{/privacy}","received_events_url":"https://api.github.com/users/davepack/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2017-10-27T02:43:41Z","updated_at":"2017-10-27T13:48:57Z","closed_at":null,"author_association":"COLLABORATOR","pull_request":{"url":"https://api.github.com/repos/react-community/react-navigation/pulls/2833","html_url":"https://github.com/react-community/react-navigation/pull/2833","diff_url":"https://github.com/react-community/react-navigation/pull/2833.diff","patch_url":"https://github.com/react-community/react-navigation/pull/2833.patch"},"body":"This adds support for iPhone X to react-navigation via SafeAreaView. \r\n- Uses a JS approach that can be used in RN v0.49 and lower. \r\n- Includes `forceInset` prop, which is not available on the native version that will be released in RN v0.50. \r\n- Adds SafeAreaView to Header, Drawer, and Tab views. \r\n- Updates NavigationPlayground to provide testing and examples of SafeAreaView use.\r\n\r\nThis essentially mimics the native version by adding padding on the side of the view that touches a screen edge. Ideally the API introduced here will eventually be migrated into the native version of SafeAreaView where performance will be much better.\r\n\r\n### Native SafeAreaView shortcomings:\r\n* Only available in RN v0.50, which will be released maybe a day or two before iPhone X is released.\r\n* Inset is added as padding and cannot be customized as margin (e.g. padding on sides, margin on top).\r\n* Inset cannot be overridden to disable inset on any side.\r\n* Fails with react-navigation tab views (tab screens are laid end-to-end off the screen and SafeAreaView did not add inset properly).\r\n\r\n### JS SafeAreaView benefits:\r\n* Works on React Native v0.49 and earlier, devs can start adding iPhone X support now.\r\n* Adds `forceInset` prop to customize the behavior of the inset.\r\n    * Customize the size of the spacing to make it smaller or larger.\r\n    * Disable inset on any side so you can nest SafeAreaViews for a padding + margin effect.\r\n    * Force inset to always show on any side in case there is an unexpected behavior (e.g. animated views will weirdly animate the additional padding when a view hits an edge).\r\n    * Adds the specified padding based on the orientation and disregards whether the view is touching a screen edge or not.\r\n\r\n### Questions\r\n#### Why don't we automatically wrap the screens in SafeAreaView to decrease dev workload?\r\nThis will behave like adding a margin to the screen. If background color matches, it won't be noticeable. If background color is different or any kind of scrolling view is used, the SafeAreaView padding will appear like a margin and cover the scrolling content.\r\n#### What should I do about ScrollView and list views?\r\nScrollView now has `contentInsetAdjustmentBehavior`. See NavigationPlayground App.js for an example of this. https://facebook.github.io/react-native/docs/scrollview.html#contentinsetadjustmentbehavior"},"comment":{"url":"https://api.github.com/repos/react-community/react-navigation/issues/comments/339976560","html_url":"https://github.com/react-community/react-navigation/pull/2833#issuecomment-339976560","issue_url":"https://api.github.com/repos/react-community/react-navigation/issues/2833","id":339976560,"user":{"login":"gaodeng","id":1118249,"avatar_url":"https://avatars1.githubusercontent.com/u/1118249?v=4","gravatar_id":"","url":"https://api.github.com/users/gaodeng","html_url":"https://github.com/gaodeng","followers_url":"https://api.github.com/users/gaodeng/followers","following_url":"https://api.github.com/users/gaodeng/following{/other_user}","gists_url":"https://api.github.com/users/gaodeng/gists{/gist_id}","starred_url":"https://api.github.com/users/gaodeng/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gaodeng/subscriptions","organizations_url":"https://api.github.com/users/gaodeng/orgs","repos_url":"https://api.github.com/users/gaodeng/repos","events_url":"https://api.github.com/users/gaodeng/events{/privacy}","received_events_url":"https://api.github.com/users/gaodeng/received_events","type":"User","site_admin":false},"created_at":"2017-10-27T13:48:57Z","updated_at":"2017-10-27T13:48:57Z","author_association":"NONE","body":"iPhone X support is very urgent. awesome 👍👍👍"}}
{"actor":{"display_login":"gaodeng"}}