ListHeaderComponent receives object, expected a string or class/function - reactjs

Question

I am trying to render a FlatList component with a ListHeaderComponent prop, The FlatList renders fine without that prop, but when I add ListHeaderComponent I get the following error.
Here's the render() function of the Discover class:
render() {
renderFlatListItem = (event) => {
return (
<Event
description={event.Description}
startTime={event.StartTimeToString}
Location={event.Location ? event.Location : 'TBD' }
key={event.ID}
/>
)
}
ListHeaderCreate = () => {
return (
<DiscoverSearch
resultDescription={this.state.popularEvents ? 'Popular Events':
'Search Results'}
categories={this.state.categories}
passCategory={this.handleSelectedCategory}
passInitialPosition={this.handleInitialPosition}
passLastPosition={this.handleLastPosition}
passSearch={this.handleSearch}
/>
);
}
return (
<View>
<FlatList
ListHeaderComponent={ListHeaderCreate()}
data={this.state.events}
renderItem={({ item }) => (
renderFlatListItem(item)
)}
/>
</View>
);
}
Here is the render() function of the DiscoverSearch class:
render () {
const pickerItems = this.props.categories.map((category) => {
<Picker.Item key={category.ID} label={category.Name} value={category.ID}/>
});
return (
<View>
<View>
<TextInput
style={{height: 40}}
placeholder="Search Events"
onChangeText={(text) => this.setState({searchText: text})}
/>
<TextInput
style={{height: 40}}
placeholder="Location"
onChangeText={(text) => this.setState({LocationText: text})}
/>
</View>
<View>
<Picker
onValueChange={(category) => this.props.passCategory}
>
{pickerItems}
</Picker>
<Button
title='Search'
onPress={console.log(this.state)}
/>
</View>
</View>
)
}
I assume that the VirtualizedList must be a child of the flatList that I am importing from react-native, Should I be directing this question to the react-native repo on github? I can't find where my mistake is. Any help here would be greatly appreciated.

Answer 1

So the issue here was with a mismatch in React Prop-Types. React Docs
The VirtualizedList component is expecting a class or a function, so passing it a function that evaluates a React Class will give it an object, and this throws an error.
The solution is to pass in the function itself like so:
ListHeaderComponent={ ListHeaderCreate }