RefreshControl in ListView does not work for some unknown reason

Question

I get an error when I pull down to refresh.

The code is something like this-

loadData: function(){

    var _this = this;
    this.API();

    //check if data is loaded
    setTimeout(function(){
        if(_this.isMounted()){
            if(_this.state.loaded===false){
                _this.setState({
                    isReloadRequired: true
                })
            }
        }
    }, 10000);
},
API: function(){

    var _this = this;
    this.setState({ rawData: [], isReloadRequired: false, loaded: false, isRefreshing: true });

    Parse.Cloud.run('fetchBookingListForUserCloudFunction', {
        user_id: Parse.User.current().getUsername()
    }).then(

        function(result){
            var cleanData = [];
            for(var i=0;i<result.length;i++){
                cleanData.push(result[i].toJSON());
            }

            _this.setState({
                rawData: _this.state.rawData.concat(cleanData),
                dataSource: _this.state.dataSource.cloneWithRows(cleanData),
                loaded: true,
                isReloadRequired: false,
                isRefreshing: false,
            });
        },
        function(error){
            _this.setState({ isReloadRequired: true, loaded: false, isRefreshing: false })
            console.log("[HOME API] Error: "+ JSON.stringify(error, null, 2));
        }
    );
},
render: function(){
    return(
        {this.state.loaded ? this.renderListView() : this.renderLoadingView()}
    )
},

renderListView: function(){
    if(this.state.rawData.length === 0){
        return(
            <View style={styles.container}>
                <Text>Tap to book.</Text>
            </View>
        );
    }
    return(
        <ListView 
            dataSource={this.state.dataSource}
            renderRow={this.renderReservation}
            style={styles.listView}
            refreshControl={
                <RefreshControl 
                    refreshing={this.state.isRefreshing}
                    onRefresh={this.loadData}
                />
            }
        />
    );          
},

renderLoadingView: function(){
    return(
        <View style={styles.container}>
            <LoadingView />
        </View>
    )
},

What is going wrong? I'm not able to find anything on github either. What is going wrong? I'm not able to find anything on github either.

UPDATED

Hi. Thanks for creating a sample on rnplay. But I have narrowed down the cause of the problem to this- Whenever I use RefreshControl and ListView inside render() it works as expected. But when I return ListView with RefreshControl from some other function like renderlistView(), it throws the aforementioned error. I even tried this.loadData().bind(this) but that does not help either.

This got fixed 3 days ago. See this git commit: https://github.com/facebook/react-native/commit/eac617d6ee74fb20cd69fdbc78a77ee07f5e6ba3 — Evan Easton, Apr 14 '16 at 20:49

Frederick Motte · Answer 1 · 2016-04-07T13:29:09.940

0

Did you forget to bind your loadData function? onRefresh={this.loadData.bind(this)} I can't judge without seeing the loadData function itself, but that could be the reason.

Updated

I've made a working example more or less adhering to your code above (simplified some stuff since I don't have the full code): https://rnplay.org/apps/h-rK5g

Similar to your example, it's fetching data from a server (here a mock json endpoint) and using the result to update the listview.

Could you check that your cleanData is loaded fully (after the for loop and the toJSON() calls) before you set state?

edited Apr 07 '16 at 13:29

answered Apr 07 '16 at 11:56

Frederick Motte

1,164
9
15

Ok. I'll edit my answer in some time with loadData. However, binding loadData with `this` shows a warning saying binding is not required. – Mihir Apr 07 '16 at 12:01

RefreshControl in ListView does not work for some unknown reason

1 Answers1

Linked