{"action":"opened","issue":{"url":"https://api.github.com/repos/brentvatne/react-native-overlay/issues/31","labels_url":"https://api.github.com/repos/brentvatne/react-native-overlay/issues/31/labels{/name}","comments_url":"https://api.github.com/repos/brentvatne/react-native-overlay/issues/31/comments","events_url":"https://api.github.com/repos/brentvatne/react-native-overlay/issues/31/events","html_url":"https://github.com/brentvatne/react-native-overlay/issues/31","id":121648699,"number":31,"title":"Overlay Style Overrides in-code Style, Misaligning Components in View","user":{"login":"robtg4","id":13613075,"avatar_url":"https://avatars.githubusercontent.com/u/13613075?v=3","gravatar_id":"","url":"https://api.github.com/users/robtg4","html_url":"https://github.com/robtg4","followers_url":"https://api.github.com/users/robtg4/followers","following_url":"https://api.github.com/users/robtg4/following{/other_user}","gists_url":"https://api.github.com/users/robtg4/gists{/gist_id}","starred_url":"https://api.github.com/users/robtg4/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/robtg4/subscriptions","organizations_url":"https://api.github.com/users/robtg4/orgs","repos_url":"https://api.github.com/users/robtg4/repos","events_url":"https://api.github.com/users/robtg4/events{/privacy}","received_events_url":"https://api.github.com/users/robtg4/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-12-11T06:38:34Z","updated_at":"2015-12-11T06:38:34Z","closed_at":null,"body":"I noticed that when using overlay, it seems to have a mind of its own when it comes to component positioning on the window. I'm not sure which part of the overlay component is doing this, but I can provide an example of what it does to my components:\r\n\r\nHere is my component code without the overlay component:\r\n\r\n```\r\nmodule.exports = React.createClass({\r\n  //onPress function that triggers when button pressed\r\n  //this.props.text is property that can be dynamically filled within button \r\n  render: function() {\r\n    return (\r\n      <TouchableHighlight \r\n        underlayColor={'transparent'}\r\n        onPress={this.props.onPress} >\r\n          <Image source={this.props.source} resizeMode={this.props.resize} style={[styles.articlePreview, this.border('red')]}>\r\n                  <View style={[styles.container, this.border('organge')]}>\r\n                      <View style={[styles.header, this.border('blue')]}>\r\n                          <Text style={[styles.previewText]}>{this.props.text}</Text>\r\n                      </View>\r\n                      <View style={[styles.footer, this.border('white')]}>\r\n                          <ImageButton\r\n                              style={[styles.heartBtn, , this.border('red')]}\r\n                              resizeMode={'contain'}\r\n                              onPress={this.onHeartPress}\r\n                              source={require('../../img/heart_btn.png')} />\r\n                          <KeywordBox \r\n                              style={[styles.category, this.border('blue')]}\r\n                              key={this.props.key} \r\n                              text={this.props.category} \r\n                              onPress={this.props.categoryPress}\r\n                              selected={this.props.selected} />\r\n                      </View>\r\n                  </View>\r\n          </Image>\r\n      </TouchableHighlight>\r\n    );\r\n  }, \r\n\r\n```\r\nAnd here is what that gives us:\r\n\r\n![screen shot 2015-12-11 at 1 32 55 am](https://cloud.githubusercontent.com/assets/13613075/11737442/480fd39c-9fa7-11e5-9c96-0364f24c3a45.png)\r\n\r\nWith Overlay, however, with this code: \r\n```\r\nmodule.exports = React.createClass({\r\n  //onPress function that triggers when button pressed\r\n  //this.props.text is property that can be dynamically filled within button \r\n  render: function() {\r\n    return (\r\n      <TouchableHighlight \r\n        underlayColor={'transparent'}\r\n        onPress={this.props.onPress} >\r\n          <Image source={this.props.source} resizeMode={this.props.resize} style={[styles.articlePreview, this.border('red')]}>\r\n                <Overlay isVisible={true}>\r\n                  <View style={[styles.container, this.border('organge')]}>\r\n                      <View style={[styles.header, this.border('blue')]}>\r\n                          <Text style={[styles.previewText]}>{this.props.text}</Text>\r\n                      </View>\r\n                      <View style={[styles.footer, this.border('white')]}>\r\n                          <ImageButton\r\n                              style={[styles.heartBtn, , this.border('red')]}\r\n                              resizeMode={'contain'}\r\n                              onPress={this.onHeartPress}\r\n                              source={require('../../img/heart_btn.png')} />\r\n                          <KeywordBox \r\n                              style={[styles.category, this.border('blue')]}\r\n                              key={this.props.key} \r\n                              text={this.props.category} \r\n                              onPress={this.props.categoryPress}\r\n                              selected={this.props.selected} />\r\n                      </View>\r\n                  </View>\r\n                </Overlay>\r\n          </Image>\r\n      </TouchableHighlight>\r\n    );\r\n  }, \r\n```\r\nWe get this:\r\n![screen shot 2015-12-11 at 1 37 25 am](https://cloud.githubusercontent.com/assets/13613075/11737503/c741b9f0-9fa7-11e5-87c1-c7c084ac5ab6.png)\r\n\r\nI'm not sure what's going on but the issue has been targeted to the Overlay component - much appreciate any insight!"}}