Overlay Style Overrides in-code Style, Misaligning Components in View

[robtg4]

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:

Here is my component code without the overlay component:

module.exports = React.createClass({
  //onPress function that triggers when button pressed
  //this.props.text is property that can be dynamically filled within button 
  render: function() {
    return (
      <TouchableHighlight 
        underlayColor={'transparent'}
        onPress={this.props.onPress} >
          <Image source={this.props.source} resizeMode={this.props.resize} style={[styles.articlePreview, this.border('red')]}>
                  <View style={[styles.container, this.border('organge')]}>
                      <View style={[styles.header, this.border('blue')]}>
                          <Text style={[styles.previewText]}>{this.props.text}</Text>
                      </View>
                      <View style={[styles.footer, this.border('white')]}>
                          <ImageButton
                              style={[styles.heartBtn, , this.border('red')]}
                              resizeMode={'contain'}
                              onPress={this.onHeartPress}
                              source={require('../../img/heart_btn.png')} />
                          <KeywordBox 
                              style={[styles.category, this.border('blue')]}
                              key={this.props.key} 
                              text={this.props.category} 
                              onPress={this.props.categoryPress}
                              selected={this.props.selected} />
                      </View>
                  </View>
          </Image>
      </TouchableHighlight>
    );
  }, 

And here is what that gives us:

With Overlay, however, with this code:

module.exports = React.createClass({
  //onPress function that triggers when button pressed
  //this.props.text is property that can be dynamically filled within button 
  render: function() {
    return (
      <TouchableHighlight 
        underlayColor={'transparent'}
        onPress={this.props.onPress} >
          <Image source={this.props.source} resizeMode={this.props.resize} style={[styles.articlePreview, this.border('red')]}>
                <Overlay isVisible={true}>
                  <View style={[styles.container, this.border('organge')]}>
                      <View style={[styles.header, this.border('blue')]}>
                          <Text style={[styles.previewText]}>{this.props.text}</Text>
                      </View>
                      <View style={[styles.footer, this.border('white')]}>
                          <ImageButton
                              style={[styles.heartBtn, , this.border('red')]}
                              resizeMode={'contain'}
                              onPress={this.onHeartPress}
                              source={require('../../img/heart_btn.png')} />
                          <KeywordBox 
                              style={[styles.category, this.border('blue')]}
                              key={this.props.key} 
                              text={this.props.category} 
                              onPress={this.props.categoryPress}
                              selected={this.props.selected} />
                      </View>
                  </View>
                </Overlay>
          </Image>
      </TouchableHighlight>
    );
  }, 

We get this:

I'm not sure what's going on but the issue has been targeted to the Overlay component - much appreciate any insight!

[niftylettuce]

@robtg4 Do you still have this issue?

[niftylettuce]

See #36 - we will be refactoring this soon to support Android/iOS and not have any issues here, there will no longer be the XCode integration needed