Collapsible & expandable reorderable list feature in V1

[iCodePup]

Hello everyone,

I’m currently experimenting with the new V1 version, which looks very promising. thanks a lot for the great work :)

I’m trying to implement a reorderable list with collapsible and expandable items.
The goal is:

• When the user starts dragging an item, all other items should collapse and gather together.
• When the drag ends (after sorting), the items should expand again.

Additionally, each row can have a dynamic height (not fixed), which makes the behavior a bit more complex.
Unfortunately, I haven’t been able to get this working so far
Below is the example code I used, along with a video showing the result.
Thanks in advance for your help!

video that demonstrates the expected behavior I’m trying to achieve :

460819458-81418873-5cf1-41a8-8847-7b769401881f.mp4

current result

Edited_20260322_114216.mp4

import { useCallback, useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import Animated, { LinearTransition } from 'react-native-reanimated';
import { DraxProvider, DraxList } from 'react-native-drax';

interface Recipe {
  id: string;
  title: string;
  ingredients: { name: string; quantity: string }[];
}

const MOCK_RECIPES: Recipe[] = [
  { id: '1', title: 'Pasta Carbonara', ingredients: [{ name: 'Spaghetti', quantity: '200g' }, { name: 'Bacon', quantity: '150g' }, { name: 'Eggs', quantity: '3' }] },
  { id: '2', title: 'Caesar Salad', ingredients: [{ name: 'Romaine', quantity: '1 head' }, { name: 'Croutons', quantity: '100g' }, { name: 'Parmesan', quantity: '50g' }] },
  { id: '3', title: 'Chicken Curry', ingredients: [{ name: 'Chicken', quantity: '500g' }, { name: 'Curry paste', quantity: '3 tbsp' }] },
  { id: '4', title: 'Margherita Pizza', ingredients: [{ name: 'Dough', quantity: '300g' }, { name: 'Mozzarella', quantity: '200g' }, { name: 'Tomato sauce', quantity: '100ml' }] },
  { id: '5', title: 'Beef Tacos', ingredients: [{ name: 'Ground beef', quantity: '400g' }, { name: 'Tortillas', quantity: '6' }] },
];

const COLLAPSED_HEIGHT = 48;

export default function App() {
  const [recipes, setRecipes] = useState<Recipe[]>(MOCK_RECIPES);
  const [collapsed, setCollapsed] = useState(false);

  const renderItem = useCallback(
    ({ item }: { item: Recipe }) => {
      const layoutTransition = LinearTransition.delay(collapsed ? 0 : 50);

      return (
        <Animated.View
          layout={layoutTransition}
          style={[
            styles.card,
            collapsed && { height: COLLAPSED_HEIGHT },
          ]}
        >
          <View style={styles.titleRow}>
            <Animated.Text layout={layoutTransition} style={styles.title}>
              {item.title}
            </Animated.Text>
          </View>
          {!collapsed && (
            <View style={styles.setsContainer}>
              <View style={styles.headerRow}>
                <Text style={styles.headerText}>Ingredient</Text>
                <Text style={styles.headerText}>Quantity</Text>
              </View>
              {item.ingredients.map((ing, i) => (
                <View key={i} style={styles.setRow}>
                  <Text style={styles.setText}>{ing.name}</Text>
                  <Text style={styles.setText}>{ing.quantity}</Text>
                </View>
              ))}
              <TouchableOpacity
                style={styles.addButton}
                onPress={() => {
                  setRecipes((prev) =>
                    prev.map((r) =>
                      r.id === item.id
                        ? { ...r, ingredients: [...r.ingredients, { name: 'New ingredient', quantity: '0g' }] }
                        : r,
                    ),
                  );
                }}
              >
                <Text style={styles.addButtonText}>+ Add Ingredient</Text>
              </TouchableOpacity>
            </View>
          )}
        </Animated.View>
      );
    },
    [collapsed, recipes],
  );

  return (
    <DraxProvider>
      <DraxList
        data={recipes}
        keyExtractor={(item) => item.id}
        onReorder={({ data }) => setRecipes(data)}
        animationConfig="spring"
        renderItem={renderItem}
        itemDraxViewProps={{
          hoverDraggingStyle: { height: COLLAPSED_HEIGHT, overflow: 'hidden' },
        }}
        onDragStart={() => setCollapsed(true)}
        onDragEnd={() => setCollapsed(false)}
      />
    </DraxProvider>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#f5f5f5',
    marginHorizontal: 8,
    marginVertical: 4,
    borderRadius: 8,
    overflow: 'hidden',
  },
  titleRow: {
    padding: 12,
    backgroundColor: '#e0e0e0',
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
  },
  setsContainer: {
    padding: 12,
  },
  headerRow: {
    flexDirection: 'row',
    marginBottom: 4,
  },
  headerText: {
    flex: 1,
    fontWeight: '500',
    color: '#666',
  },
  setRow: {
    flexDirection: 'row',
    paddingVertical: 4,
  },
  setText: {
    flex: 1,
  },
  addButton: {
    marginTop: 8,
    paddingVertical: 6,
    alignItems: 'center',
    backgroundColor: '#e0e0e0',
    borderRadius: 6,
  },
  addButtonText: {
    fontSize: 14,
    fontWeight: '500',
    color: '#36877F',
  },
});

[LunatiqueCoder]

Hey. Thank you for the early feedback! It means a lot!

Your example is going to be tough. Not sure if we can support it with Drax right now, but I'd like to add it on our roadmap.

Will turn this discussion into an issue as a feature enhancement.

[LunatiqueCoder]

Hey @iCodePup . Is this important to you to work with FlatList/LegendList/FlashList? or would a scrollview do the job?

[iCodePup]

Hey @LunatiqueCoder , thanks for the interest in the question
I don’t really mind as long as performance stays acceptable, any of those options work for me .
Thanks

[iCodePup]

Hi @LunatiqueCoder , I was wondering if there’s been any progress on this feature. Let me know if there’s anything I can do to help move it forward

[devtm1123]

Any news? @LunatiqueCoder