{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react-native/issues/2918","labels_url":"https://api.github.com/repos/facebook/react-native/issues/2918/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react-native/issues/2918/comments","events_url":"https://api.github.com/repos/facebook/react-native/issues/2918/events","html_url":"https://github.com/facebook/react-native/issues/2918","id":107601613,"number":2918,"title":"NavigatorIOS component view too tall","user":{"login":"Jpoliachik","id":5148640,"avatar_url":"https://avatars.githubusercontent.com/u/5148640?v=3","gravatar_id":"","url":"https://api.github.com/users/Jpoliachik","html_url":"https://github.com/Jpoliachik","followers_url":"https://api.github.com/users/Jpoliachik/followers","following_url":"https://api.github.com/users/Jpoliachik/following{/other_user}","gists_url":"https://api.github.com/users/Jpoliachik/gists{/gist_id}","starred_url":"https://api.github.com/users/Jpoliachik/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Jpoliachik/subscriptions","organizations_url":"https://api.github.com/users/Jpoliachik/orgs","repos_url":"https://api.github.com/users/Jpoliachik/repos","events_url":"https://api.github.com/users/Jpoliachik/events{/privacy}","received_events_url":"https://api.github.com/users/Jpoliachik/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-09-21T21:25:56Z","updated_at":"2015-09-22T07:48:38Z","closed_at":null,"body":"The component view for a NavigatorIOS view is exactly 64 points too tall. This is exactly the height of the iOS status bar plus UINagivationBar. Is it not accounting for this in the height calculation?\r\n\r\nA bottom margin of 64 on the container view is a temporary solution. \r\n\r\nSample code and screenshots included below:\r\n\r\nNavigatorIOS Layout\r\n```\r\n var TestApp = React.createClass({\r\n   render: function() {\r\n     StatusBarIOS.setStyle('light-content', false);\r\n     return (\r\n       <NavigatorIOS\r\n         style={styles.nav}\r\n         initialRoute={{\r\n           title: 'Test',\r\n           component: TestView,\r\n         }}\r\n         titleTextColor='white'\r\n         tintColor='white'\r\n         barTintColor='red'\r\n         translucent={false}\r\n         itemWrapperStyle={styles.wrappedView}\r\n       />\r\n     );\r\n   }\r\n });\r\n\r\n var styles = StyleSheet.create({\r\n   nav: {\r\n     flex: 1,\r\n   },\r\n   wrappedView: {\r\n     backgroundColor: Colors.GreyBackground,\r\n     // NavigationIOS container height workaround\r\n    //  marginBottom: 64,\r\n   }\r\n });\r\n```\r\n\r\nChild View layout: \r\n```\r\nvar TestView = React.createClass({\r\n   render: function() {\r\n     return (\r\n       <View style={styles.container}>\r\n       <View style={styles.emptyView}>\r\n       </View>\r\n         <View style={styles.bottomBar}>\r\n         </View>\r\n       </View>\r\n     );\r\n   },\r\n });\r\n\r\n var styles = StyleSheet.create({\r\n   container: {\r\n     flex: 1,\r\n     flexDirection: 'column',\r\n   },\r\n   emptyView: {\r\n     flex: 1,\r\n     backgroundColor: 'yellow',\r\n   },\r\n    bottomBar: {\r\n      backgroundColor: 'red',\r\n      height: 64,\r\n    }\r\n });\r\n```\r\n\r\nWith bottom view height 80:\r\n![screen shot 2015-09-21 at 5 16 17 pm](https://cloud.githubusercontent.com/assets/5148640/10005323/94743668-6084-11e5-8ce9-5f6542fff469.png)\r\n\r\nWith bottom view height 64:\r\n![screen shot 2015-09-21 at 5 16 47 pm](https://cloud.githubusercontent.com/assets/5148640/10005327/a1b9dc42-6084-11e5-9def-c496adadd552.png)\r\n"},"comment":{"url":"https://api.github.com/repos/facebook/react-native/issues/comments/142205045","html_url":"https://github.com/facebook/react-native/issues/2918#issuecomment-142205045","issue_url":"https://api.github.com/repos/facebook/react-native/issues/2918","id":142205045,"user":{"login":"deanmcpherson","id":2773950,"avatar_url":"https://avatars.githubusercontent.com/u/2773950?v=3","gravatar_id":"","url":"https://api.github.com/users/deanmcpherson","html_url":"https://github.com/deanmcpherson","followers_url":"https://api.github.com/users/deanmcpherson/followers","following_url":"https://api.github.com/users/deanmcpherson/following{/other_user}","gists_url":"https://api.github.com/users/deanmcpherson/gists{/gist_id}","starred_url":"https://api.github.com/users/deanmcpherson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/deanmcpherson/subscriptions","organizations_url":"https://api.github.com/users/deanmcpherson/orgs","repos_url":"https://api.github.com/users/deanmcpherson/repos","events_url":"https://api.github.com/users/deanmcpherson/events{/privacy}","received_events_url":"https://api.github.com/users/deanmcpherson/received_events","type":"User","site_admin":false},"created_at":"2015-09-22T07:48:38Z","updated_at":"2015-09-22T07:48:38Z","body":"I can reproduce, it happens when you disable transparency transparency={false}, set to true and it works correctly."}}