Search code examples
react-nativereact-native-listview

null is not an object (evaluating 'internalInstance.getHostNode') in React Native component

My React Native application has a component that is supposed to show a scrollable list. I'm also using React Native Elements, although leaving that out doesn't seem to make a big difference.

My component looks like this:

export class MyComponent extends React.Component {
    constructor(props) {
        super(props);

        const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
        this.state = { ds: ds.cloneWithRows(this.props.myItems) };
    }

    render() {
        return (
            <View>
                <Text>Some text here</Text>
                <List>
                    <ListView dataSource={ this.state.ds } renderRow={ renderRow } />
                </List>
            </View>
        );
    }
};

Where renderRow is declared outside the class, since it doesn't need its state, as:

const renderRow = (rowData, sectionId) => {
    return (
        <ListItem
            key={ sectionId }
            title={ rowData.myProp }
            subtitle={ rowData.myOtherProp }
        />
    );
};

Besides, removing the <List> with its children doesn't seem to make a difference, either.

From the logging (not included in the code, for brevity) I can see that the component constructor runs without problems. The render method isn't invoked, though. In adb logcat output (I'm using the Android simulator) I see the following:

10-16 14:02:34.507 10161 10205 W ReactNativeJS: Possible Unhandled Promise Rejection (id: 0):
10-16 14:02:34.507 10161 10205 W ReactNativeJS: null is not an object (evaluating 'internalInstance.getHostNode')
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16594:24
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18320:35
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16594:36
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18320:35
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16594:36
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18320:35
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16594:36
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18320:35
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16594:36
10-16 14:02:34.507 10161 10205 W ReactNativeJS: updateChildren@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17792:47
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _reconcilerUpdateChildren@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17341:36
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _updateChildren@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17445:48
10-16 14:02:34.507 10161 10205 W ReactNativeJS: updateChildren@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17432:21
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:14715:20
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16656:34
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _updateRenderedComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18688:33
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _performComponentUpdate@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18658:30
10-16 14:02:34.507 10161 10205 W ReactNativeJS: updateComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18579:29
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18481:21
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16656:34
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _updateRenderedComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18688:33
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _performComponentUpdate@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18658:30
10-16 14:02:34.507 10161 10205 W ReactNativeJS: updateComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18579:29
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18481:21
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16656:34
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _updateRenderedComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18688:33
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _performComponentUpdate@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18658:30
10-16 14:02:34.507 10161 10205 W ReactNativeJS: updateComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18579:29
10-16 14:02:34.507 10161 10205 W ReactNativeJS: performUpdateIfNecessary@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18495:21
10-16 14:02:34.507 10161 10205 W ReactNativeJS: performUpdateIfNecessary@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16688:42
10-16 14:02:34.507 10161 10205 W ReactNativeJS: runBatchedUpdates@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16299:41
10-16 14:02:34.507 10161 10205 W ReactNativeJS: perform@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17035:16
10-16 14:02:34.507 10161 10205 W ReactNativeJS: perform@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17035:16
10-16 14:02:34.507 10161 10205 W ReactNativeJS: perform@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&m
10-16 14:02:34.527 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 17, pending 15)
10-16 14:02:34.800 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 21, pending 15)
10-16 14:02:34.801 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 22, pending 20)
10-16 14:02:34.905 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 26, pending 15)
10-16 14:02:34.908 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 27, pending 20)
10-16 14:02:35.191 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 31, pending 15)
10-16 14:02:35.191 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 32, pending 20)
10-16 14:02:35.192 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 33, pending 30)

I'm using

  • react 15.3.2
  • react-native 0.35.0
  • react-native-elements 0.6.2

My question is two-fold: how can I troubleshoot what's going on (why is my render() method not invoked, for instance) and what am I doing wrong here?

Solution

  • Turned out that the actual solution was not in the use of ListView or List. Some of the logging statements inside render() caused the render() method to fail - silently. RN then attempted to re-render the component, which caused the log message as shown in the question to continuously re-appear until the app was killed.