{"action":"opened","issue":{"url":"https://api.github.com/repos/Bit-Nation/BITNATION-Pangea-mobile/issues/190","repository_url":"https://api.github.com/repos/Bit-Nation/BITNATION-Pangea-mobile","labels_url":"https://api.github.com/repos/Bit-Nation/BITNATION-Pangea-mobile/issues/190/labels{/name}","comments_url":"https://api.github.com/repos/Bit-Nation/BITNATION-Pangea-mobile/issues/190/comments","events_url":"https://api.github.com/repos/Bit-Nation/BITNATION-Pangea-mobile/issues/190/events","html_url":"https://github.com/Bit-Nation/BITNATION-Pangea-mobile/issues/190","id":296481847,"number":190,"title":"[UI] iPhone X","user":{"login":"mimetic","id":30195,"avatar_url":"https://avatars3.githubusercontent.com/u/30195?v=4","gravatar_id":"","url":"https://api.github.com/users/mimetic","html_url":"https://github.com/mimetic","followers_url":"https://api.github.com/users/mimetic/followers","following_url":"https://api.github.com/users/mimetic/following{/other_user}","gists_url":"https://api.github.com/users/mimetic/gists{/gist_id}","starred_url":"https://api.github.com/users/mimetic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mimetic/subscriptions","organizations_url":"https://api.github.com/users/mimetic/orgs","repos_url":"https://api.github.com/users/mimetic/repos","events_url":"https://api.github.com/users/mimetic/events{/privacy}","received_events_url":"https://api.github.com/users/mimetic/received_events","type":"User","site_admin":false},"labels":[{"id":785882950,"url":"https://api.github.com/repos/Bit-Nation/BITNATION-Pangea-mobile/labels/Development","name":"Development","color":"54bad1","default":false}],"state":"open","locked":false,"assignee":{"login":"albertoestarrona","id":33098363,"avatar_url":"https://avatars3.githubusercontent.com/u/33098363?v=4","gravatar_id":"","url":"https://api.github.com/users/albertoestarrona","html_url":"https://github.com/albertoestarrona","followers_url":"https://api.github.com/users/albertoestarrona/followers","following_url":"https://api.github.com/users/albertoestarrona/following{/other_user}","gists_url":"https://api.github.com/users/albertoestarrona/gists{/gist_id}","starred_url":"https://api.github.com/users/albertoestarrona/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/albertoestarrona/subscriptions","organizations_url":"https://api.github.com/users/albertoestarrona/orgs","repos_url":"https://api.github.com/users/albertoestarrona/repos","events_url":"https://api.github.com/users/albertoestarrona/events{/privacy}","received_events_url":"https://api.github.com/users/albertoestarrona/received_events","type":"User","site_admin":false},"assignees":[{"login":"albertoestarrona","id":33098363,"avatar_url":"https://avatars3.githubusercontent.com/u/33098363?v=4","gravatar_id":"","url":"https://api.github.com/users/albertoestarrona","html_url":"https://github.com/albertoestarrona","followers_url":"https://api.github.com/users/albertoestarrona/followers","following_url":"https://api.github.com/users/albertoestarrona/following{/other_user}","gists_url":"https://api.github.com/users/albertoestarrona/gists{/gist_id}","starred_url":"https://api.github.com/users/albertoestarrona/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/albertoestarrona/subscriptions","organizations_url":"https://api.github.com/users/albertoestarrona/orgs","repos_url":"https://api.github.com/users/albertoestarrona/repos","events_url":"https://api.github.com/users/albertoestarrona/events{/privacy}","received_events_url":"https://api.github.com/users/albertoestarrona/received_events","type":"User","site_admin":false}],"milestone":null,"comments":0,"created_at":"2018-02-12T18:41:12Z","updated_at":"2018-02-12T18:41:12Z","closed_at":null,"author_association":"COLLABORATOR","body":"## Feature / Issue\r\n> Layout fails with iPhone X\r\n> There is an API to solve this:  https://medium.com/react-native-training/react-native-iphonex-92ff511282af\r\n\r\n## Acceptance criteria\r\n- [ ] Layout looks OK with iPhone X\r\n\r\n## Additional information\r\nhttps://medium.com/react-native-training/react-native-iphonex-92ff511282af\r\n\r\n## From the website (above):\r\nIn version 0.50.1, the React Native team introduced a new API for easily dealing with the new iPhone X layout. This API is the SafeAreaView.\r\nWith SafeAreaView, you can easily update your existing codebase to be integrated with the iPhone X without a lot of headache.\r\nHere’s how you can use it:\r\n```\r\nimport {\r\n  ...\r\n  SafeAreaView\r\n} from 'react-native';\r\nclass Main extends React.Component {\r\n  render() {\r\n    return (\r\n      <SafeAreaView style={styles.safeArea}>\r\n        <App />\r\n      </SafeAreaView>\r\n    )\r\n  }\r\n}\r\nconst styles = StyleSheet.create({\r\n  ...,\r\n  safeArea: {\r\n    flex: 1,\r\n    backgroundColor: '#ddd'\r\n  }\r\n})\r\n```\r\nWhat has worked for me for existing apps is to just set some background color that works well with your existing app design, in the above example that is a light gray, and flex: 1. We then just wrap the top level UI component of our app in the SafeAreaView and we’re good to go.\r\n"}}
{"actor":{"display_login":"mimetic"}}