React-Native RefreshControl displaces Sticky Header iOS

Question

Having an issue inside a ListView that uses sticky headers. When I scroll down while the refresh is still occurring, my sticky header is shifted down roughly equal to the height of the refresh control. Any idea what's causing this?

Here is the code for my ListView and the refreshControl:

<View style={{backgroundColor: Colors.stickyHeaderGray, height: SCREEN_HEIGHT-20}}>
      <ListView
        ref='list'
        style={this.container}
        dataSource={this.state.ds}
        initialListSize={12}
        scrollRenderAheadDistance={0}
        onEndReached={() => this.setState({ hideLoadingFooter: true })}
        onEndReachedThreshold={10}
        pageSize={10}
        renderRow={(data) => <FeedItem {...data} navigator={this.props.navigator} />}
        renderSeparator={this._renderSeparator}
        renderSectionHeader={(sectionData, sectionID) =>
          <View style={{backgroundColor: Colors.stickyHeaderGray, opacity: 0.96}}>
            <TouchableHighlight
              onPress={() => this.refs.list.scrollTo({x:0,y:0,animated:true})}
              underlayColor={Colors.stickyHeaderGray}>
              <View>
                <Heading1 style={styles.headers}>{sectionID}
                </Heading1>
              </View>
            </TouchableHighlight>
          </View>
        }
        renderFooter={() =>
          this.state.hideLoadingFooter ? null : <View style={styles.footer}><Heading1>Loading </Heading1><Spinner type={'ThreeBounce'} size={40} color={Colors.wabashRed} isVisible={true} /></View>
      }
      refreshControl={
        <RefreshControl
          refreshing={this.state.refreshing}
          onRefresh={this._onRefresh}
          tintColor={Colors.charcoal}
          />
      }
      />
  </View>