RefreshControl showing issue on RN 0.27

[Bhullnatik]

I have an issue with RefreshControl with React Native 0.27.x on iOS. The RefreshControl is creeping up on the top right side of my view until I use it the first time:

The weird thing is that if I don't pass the tintColor prop, it works great.

Here is my RefreshControl:

<RefreshControl
  refreshing={isRefreshing}
  onRefresh={this.handleRefresh.bind(this)}
  tintColor={Colors.RED1}
  colors={[Colors.BLUE1, Colors.RED1, Colors.ORANGE1]}
  progressBackgroundColor={Colors.WHITE1} />

cc @janicduplessis

[dozoisch]

I'm getting the exact same thing in iOS simulator.

Using:

              <RefreshControl
                refreshing={this.state.refreshing}
                onRefresh={this.handleRefresh}
                title="Refresh"
              />

It disappears once the view gets touched.

[agat]

Temporary fix — remove title property from RefreshControl.

[marcosinigaglia]

Same issue, I fix removing tintColor prop.

[janicduplessis]

Do you know if this issue only happens since 0.27?

[Bhullnatik]

@janicduplessis I'm not sure, we skipped 0.26.x versions due to various bugs. 0.25.x was working fine.

[dozoisch]

@janicduplessis I was on 0.26.3 before it was fine! Without the title attribute it doesn't happen anymore.

[nickeliah1]

Same issue here with tintColor

[zerko]

@janicduplessis it is 0.27 only issue.

[lisong]

0.28.0 happens too!

[vanBrunneren]

I'm facing this issue with RN 28.0 even if I remove tintColor and title:

<ListView
    renderSectionHeader={this._renderSectionHeader.bind(this)}
    refreshControl={
        <RefreshControl
            refreshing={this.state.isRefreshing}
            onRefresh={this._onRefresh.bind(this)}                          
            />
    }
    onEndReached={ () => this._onEndReached() } 
    dataSource={this.state.dsHomeViewList}
    renderHeader={this._renderHeader.bind(this)}
    renderRow={this._renderHomeList.bind(this)}
    renderFooter={this._renderFooter.bind(this)} />

does anyone has a working temporary (or better a stable) fix for this?

[magrinj]

As a temporary fix I just set the background color of my row, or header or whatever you have at the top of the list view on your app. I take a look in the RefreshControl class and in native component and I can't see anything different since the 0.27, maybe something change in the style engine.

[plrthink]

same issue here with just passing refreshing and onRefresh props to RefreshControl on react-native@0.28.0.

[plrthink]

my app has two tab bar at the bottom and each one will render its own listview. what's interesting is that this problem only occurs when I switch the listview and then switch back. It looks like the upper two screenshots also have this kind of layout.

[tofrookie]

how to fix it

[yanfeng42]

@tofrookie @plrthink Test iOS With 0.29.0 , solve this by backgroundColor,

<RefreshControl
           style={{
             backgroundColor:'#0000',
           }}
          refreshing={this.state.refreshing}
           />

[TanTan-TT]

<RefreshControl
           style={{
             backgroundColor:'transparent',
           }}
          refreshing={this.state.refreshing}
           />

Setting backgroundColor to transparent is worked for me

[rclai]

I'm on 0.29.1 and it's happening to me.

Setting style={{ backgroundColor: 'transparent' }} fixed it for me.

[messense]

Same issue on 0.30.0

[ghuh]

Same issue on 0.31.0-rc.0 while only passing in refreshing and onRefresh. Setting backgroundColor to transparent seems to have fixed the issue.

[janicduplessis]

It would be great if someone has time to investigate why this is happening as I don't have much time to look at this at the moment, seems like a really weird bug. We could always set the background color to transparent as a workaround but this doesn't seem ideal.

There is also iOS 10 that bring first class support for UIRefreshControl in any UIScrollView so we might also want to try implementing RefreshControl with this technique and fallback on what we are doing now on iOS 9-. Hopefully that will fix most of the weird RefreshControl bugs and avoid having a bunch of hacky code to try to patch it.

[GantMan]

This bug has persisted for a very long time and is actually part of several apps for us now. So I submitted a PR in the hopes of assuaging our pain until @janicduplessis et. al. find a better way.

[GantMan]

@Bhullnatik - you can close this, my PR was accepted, this will be fixed.

[uc-asa]

I'm using 0.30
<RefreshControl
refreshing={ this.state.isRefreshing }
onRefresh={() => this._onRefresh()}
style={{
backgroundColor : 'transparent',
}}
tintColor="#ccc"
title="Loading..."
titleColor="#5a6d7d"
colors={['#ff0000', '#00ff00', '#0000ff']}
progressBackgroundColor="#ffff00"
/>

It works for me