How can I get horizontal list view with section header in flat list

Question

I am developing a sample application in react-native. I have one issue in FlatList Component, I am not able to get Horizontal list view with Section Header.

How can I show the Horizontal Grid/ List with Section header.

Here this is my code :

import React, { Component } from "react";
import { FlatList, Text, View, Platform, Image } from "react-native";
import { Card } from "react-native-elements";
var sectionListData = [
{
 data : [
  {
    name: 'Adjustible Spanners',
    description: 'Lorem ipsum dolor sit amet'
  },
  {
    name: 'Screw Drivers',
    description: 'Lorem ipsum dolor sit amet'
  },
  {
    name: 'Hammers',
    description: 'Lorem ipsum dolor sit amet'
  },
  {
    name: 'Allen Keys',
    description: 'Lorem ipsum dolor sit amet'
  },
  {
    name: 'Chisels',
    description: 'Lorem ipsum dolor sit amet'
  },

],
title: "Hand Tools"
},
{
 data : [
  {
    name: 'Angle Grinders',
    description: 'Lorem ipsum dolor sit amet'
  },
  {
    name: 'Diamond Core Cuttters',
    description: 'Lorem ipsum dolor sit amet'
  },
  {
    name: 'Drills',
    description: 'Lorem ipsum dolor sit amet'
  },
  {
    name: 'Wrenches',
    description: 'Lorem ipsum dolor sit amet'
  }
],
title: "Power Tools"
},
{
 data : [
  {
    name: 'Angle Grinders',
    description: 'Lorem ipsum dolor sit amet'
  },
  {
    name: 'Diamond Core Cuttters',
    description: 'Lorem ipsum dolor sit amet'
  },
  {
    name: 'Drills',
    description: 'Lorem ipsum dolor sit amet'
  },
  {
    name: 'Wrenches',
    description: 'Lorem ipsum dolor sit amet'
  }
],
title: "Depoto"
}
]
export default class SubCategory2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data:sectionListData, //{inData:ListObj[0].dataObj, title:ListObj[0].dataTitle},
      iscomesData:false
    };
  }
  componentWillMount(){
    let displayData = [];
    alert("data :"+ JSON.stringify(this.state.data))
    //alert("data: "+JSON.stringify(this.state.data.title))
  }

  _keyExtractor(item, index) {
    return index;
  }

  renderItem(data) {
    let { item, index } = data;
    alert(JSON.stringify(data.item.data))
    return (
      <View style={{padding:5,flex:1}}>
      <View style={{height:30,width:150,flex:0.5,backgroundColor:"transparent",
      borderColor:"black",
      borderWidth:2,
      borderRadius:2,}}>
      <Text style={{fontSize:15,color:"red"}}>
      {item.title}
      </Text>
      </View>
      <Card
        title={null}
        image={{ uri: "https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" }}
        containerStyle={{ padding: 0, width: 160 }}
      >
        <Text style={{ marginBottom: 10 }}>
        {item.data[0].name}
        </Text>
        <Text style={{ marginBottom: 10 }}>
        {item.data[0].description}
        </Text>
      </Card>)
      </View>
    )
}
  render() {
    return (
      <View style={{flex:1,marginTop:20}}>
      <FlatList
        data={this.state.data}
          keyExtractor={(item, index) => String(index) }
          renderItem={this.renderItem.bind(this)}
        />
      </View>
    );
  }
}

How can I get flat list as shown in below image. enter image description here

Please give me suggestion.

Answer 1

Try with various flatlists

<Text>Adjustible Spanners</text>
<FlatList horizontal
 data={this.state.data}
 keyExtractor={(item, index) => String(index) }
 renderItem={this.renderItem.bind(this)}
/>

renderItem = (itemData) => {  
 return(   
  {    
   itemData.item.name == 'Adjustible Spanners' && 
    <View>
       . . .
    </View>   
  }  
 ) 
}

Answer 2

Please try flexDirection: 'row' on your view.. for more info this may help you..https://reactnativecode.com/flexdirection-row-column-tutorial/