I've currently got a SectionList. I'd like to wrap all items within a section in a FlatList. e.g. For the section Queues Near You, The three RestaurantCards of Tonkotsu, Burgerville and Fried Fries should be in a FlatList that is horizontal, Restaraunt A,B,C should be in its own FlatList, etc. How can I achieve this?

const sectionData = [
  {
    title: "Queues Near You",
    data: ["Tonkotsu", "BurgerVille", "Fried Fries"],
  },
  {
    title: "Restaurants Near You",
    data: ["Restaurant A", "Restaurant B", "Resto C"],
  },
  {
    title: "Additional Places Near You",
    data: ["Resto D", "Resto E", "Resto F"],
  },
];

export default function App() {

  const renderItem = ({item}) => {
    const restaurantName = item
    return <RestaurantCard restaurantName={restaurantName} />;
  };

  return (
    <View style={tw`flex-1 bg-black`}>
        <SectionList
          sections={sectionData}
          renderSectionHeader={({ section: { title } }) => {
            return <SubHeader style={tw`flex-grow-0`} name={title} />
          }}
          renderItem={renderItem}
        />
    </View>
  );
}

CodePudding user response：

With the same array, you can use nested FlatList like below.

<FlatList
    data={DATA}
    renderItem={({ item, index }) => {
      return (
          <View>
              <FlatList
               horizontal
               data={item}
               renderItem={({ item, index }) => {
               return (
                   <View>
                       //your UI code
                   </View>)
               }}
              keyExtractor={item => item.id}
              />
        </View>);
    }}
    keyExtractor={item => item.id}
  />

CodePudding user response：

you can add horizontal scroll view as parent of RestaurantCard component export default function App() {

const renderItem = ({ item }) => { const restaurantName = item return ( ); }; return ( <SectionList sections={sectionData} renderSectionHeader={({ section: { title } }) => { return <SubHeader style={twflex-grow-0} name={title} /> }} renderItem={renderItem} /> ); }

CodePudding user response：

Ended up just forcing SectionList to iterate over the sections by having the section be the single object in the data array, and just render a FlatList for every section

const sectionData= [
  {
    title: "Queues Near You",
    data: [{ restaurants: ["Tonkotsu", "BurgerVille", "Fried Fries"] }],
  },
  {
    title: "Restaurants Near You",
    data: [{ restaurants: ["Tonkotsu", "BurgerVille", "Fried Fries"] }],
  },
  {
    title: "Additional Places Near You",
    data: [{ restaurants: ["Tonkotsu", "BurgerVille", "Fried Fries"] }],
  },
];