Is there a way to nest few of theses lists inside some other list?

[DominikHinc]

I need to create draggable section lis and I wonder if there is a way to nest few of these list inside other list. There is no need for items to travel across different sections. They just have to be recognisable inside their own section.

[amazingmarvin]

Since my app lets you drag from one section to another, I implemented a section list using one big DraggableFlatlist. The renderItem distinguishes between sections and other items, rendering them differently and not calling drag in onLongPress for the sections.

I think there is an issue with a feature request about preventing dragging from one section to another or something similar, but possibly just allowing dragging between sections is the easiest solution to this problem. Otherwise: just try it with a FlatList/SectionList, I guess!

[filippobarcellos]

@amazingmarvin Do you mind sharing some snippets? I have to implemented exactly the way you did and I'm not get closer. Thanks

[SamMakesThings]

@filippobarcellos This is probably no longer relevant to you, but you can just have two types of data in your data array, where one type is section headers. In the renderItem function, you can render the draggable element (passing item, drag function, isActive, etc), and in the other, don't pass the drag function or isActive. End result, you end up with an un-draggable component.

E.g.

// Function that renders a draggable card from a habit object, or a section header
function renderItem({
  item,
  drag,
  isActive,
}: {
  item: DataItem;
  index?: number;
  drag: () => void;
  isActive: boolean;
}) {
  // If it's an experiment item, render it as a DraggableCard
  if ('experiment' in item) {
    return <DraggableCard item={item} drag={drag} isActive={isActive} />;
  } else {
    // Otherwise, render it as a section header
    return <SectionHeader title={item.title} />;
  }
}