Is this compatible with react-native 0.20?

[doddys]

Hi,

I am using react-native 0.20 and I keep getting this error: Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of xxxx.

Has anyone had the same problem?

[tiaozi0912]

I got this error when using the ControlledRefreshableListView. Looks like npm install get 2.0.0-beta2 while ControlledRefreshableListView only exposed in 2.0.0-beta3

[jsdf]

Can you try 2.0.0-beta4 (which is now published)?

[RWOverdijk]

@jsdf I can't see a beta4

[jsdf]

@RWOverdijk npm install react-native-refreshable-listview@2.0.0-beta4 or npm install react-native-refreshable-listview@next

[jforaker]

Using 2.0.0-beta4 and the ControlledRefreshableListView I get the red screen with this:

The list renders fine but as soon as I try and pull it, it breaks.

It seems however that I was able to acheive the proposed benefit of ControlledRefreshableListView using the plain RefreshableListView. It is bound to a redux store and it works fine for me. I read on some other thread, @gearon recommended decoupling the datasource from component state and letting render handle the cloneWithRowsAndSections operation. So far so good :

    constructor(props) {
        super(props);
        let ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2,
            sectionHeaderHasChanged: (s1, s2) => s1 !== s2
        });
        this.dataSource = ds;  //*NOT* this.state.dataSource
    }

    render() {

        const dataSource = this.dataSource.cloneWithRowsAndSections(user.unreads.messages);
        //                     ^ not this.state.dataSource
        // now any time user.unreads.messages changes, the list is automatically updated!
        return (

                    <RefreshableListView
                        dataSource={dataSource}
                        renderRow={this.renderMessageCell}
                        renderSectionHeader={this._renderSectionHeaderView}
                        loadData={() => this.refreshList}
                        refreshDescription="Refreshing messages"
                    />
        )
}

EDIT:

Now if there is no data returned from a pull refresh, I get this warning (even though I do have logic that renders a different component if there is no data):

ExceptionsManager.js:76 Warning: setState(...): Can only update a mounted
 or mounting component. This usually means you called setState() on an 
unmounted component. This is a no-op. Please check the code for the
 RefreshableListView component.

which points to this line:

        .then(() => {
          this.willRefresh = false
          this.setState({isRefreshing: false})
        })