Carlos Manotas | GRIDLAYOUT IN SECTIONLIST

Warning!!! this is a hack and you could do the same with a map if you know your list isn't very big.

For example we want to have a result similar to the one offered by a simple Flatlist.

But if we want the same result with their respective sections, the SectionList does not give us that possibility 😔.

This is where the hack comes into play, to do this you have to change the way we receive the data which normally has this form:

export const DATA = [
 {
   title: "Main dishes",
   data: ["Pizza", "Burger", "Risotto"]
 },
 {
   title: "Sides",
   data: ["Fries", "Onion Rings", "Fried Shrimps"]
 },
 {
   title: "Drinks",
   data: ["Water", "Coke", "Beer"]
 },
 {
   title: "Desserts",
   data: ["Cake", "Ice"]
 }
];

What we will do is place a single array with our data in this way:

 export const DATA = [
  {
    title: "Main dishes",
    data: [["Pizza", "Burger", "Risotto"]] // First part of the hack
  },
  ...

This allows us to add a single Flatlist inside each Section of the Sectionlist and inside the Flatlist we can easily have our 3-column grid and it would look like this:

If you know a better approach for this hack just let me know in my twitter account 🚀.

GRIDLAYOUT IN SECTIONLIST (REACT NATIVE).