I'm having a RefreshControl attached to a ScrollView. It all works as expected but initially (when I didn't start scrolling), there's always showing a RefreshControl on the top right. When I start scrolling, it disappears.

Any idea how to get rid of that?

Code is nothing special, if you want, i'll give it here:

// ...
export default class SomeList extends React.Component
{
    // ...
    render() {
        return <View style={{flex: 1}}>
            <CustomNavbar />
            <ScrollView 
                style={{marginTop: 35}}
                refreshControl={
                    <RefreshControl
                        tintColor={$.config.colors.style}
                        onRefresh={() => this._refreshList()}
                        refreshing={this.state.listRefreshing}
                    />
                }
            >
                {this._renderItems()}
            </ScrollView>
        </View>
    }
}

I'm having a RefreshControl attached to a ScrollView. It all works as expected but initially (when I didn't start scrolling), there's always showing a RefreshControl on the top right. When I start scrolling, it disappears.

Any idea how to get rid of that?

Code is nothing special, if you want, i'll give it here:

// ...
export default class SomeList extends React.Component
{
    // ...
    render() {
        return <View style={{flex: 1}}>
            <CustomNavbar />
            <ScrollView 
                style={{marginTop: 35}}
                refreshControl={
                    <RefreshControl
                        tintColor={$.config.colors.style}
                        onRefresh={() => this._refreshList()}
                        refreshing={this.state.listRefreshing}
                    />
                }
            >
                {this._renderItems()}
            </ScrollView>
        </View>
    }
}

• javascript
• ios
• react-native
• scrollview
• pull-to-refresh

1 Answer 1

This is a bug in react-native which was introduced in version 0.31 or so. It was fixed in version 0.34.1 (see this mit), so I guess you're using a previous version.

If you do not wish to upgrade, you can temporarily solve it by settings the background color of the refresh control to transparent: <RefreshControl style={{backgroundColor: 'transparent'}}/>