Search code examples
react-nativereact-native-flatlist

Aligning ListHeaderComponent vertically above Horizontal Flatlist

I have a horizontal Flatlist and right above it i want to add a custom header. I have an option to wrap the Flatlist & custom header in a ScrollView - which isn't good practice according to RN 0.61

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation

Another option is to use:

ListHeaderComponent

 <FlatList
    horizontal
    ListHeaderComponent = {<CustomHeader>What can we help you find?</CustomHeader> }
    keyExtractor = {(item) => item.unique_id }
    data = {this.props.categories}
    contentContainerStyle={{ flexGrow: 1}}
    renderItem={ ({item}) => (
    <TouchableOpacity>
       <View>
        <Image
            style={{
                height:80, 
                width:100}}
            source={{uri:'some_url'}}
        />
        <Title>{item.category}</Title>
      </View>
   </TouchableOpacity>)} 
/>

Whilst the above works with a vertical Flatlist, it completely fails with a horizontal flatlist with my use case.

Expected:

enter image description here

Actual Output:

enter image description here

What are the possible fixes?

Solution

  • You can use Conditional Rendering like this, just a workaround

    {this.props.category.length ? <CustomHeader>What can we help you find?</CustomHeader> : null}

<FlatList
    horizontal
    keyExtractor = {(item) => item.unique_id }
    data = {this.props.categories}
    contentContainerStyle={{ flexGrow: 1}}
    renderItem={ ({item}) => (
    <TouchableOpacity>
       <View>
        <Image
            style={{
                height:80, 
                width:100}}
            source={{uri:'some_url'}}
        />
        <Title>{item.category}</Title>
      </View>
   </TouchableOpacity>)} 
/>