feat: add masonry based layout

[rennard]

Description

added "masonry" mode which allows for Pinterest style tiling in a similar way to Flashlist's implementation. It can

Example code

import { useCallback, useState } from 'react';
import { Pressable, View, Text } from 'react-native';
import Sortable from 'react-native-sortables';

interface Item {
  id: string;
  title: string;
  height: number;
  backgroundColor: string;
}

const Test = () => {
  const [items, setItems] = useState<Item[]>([
    { id: '1', title: 'Item 1', height: 100, backgroundColor: 'red' },
    { id: '2', title: 'Item 2', height: 200, backgroundColor: 'blue' },
    { id: '3', title: 'Item 3', height: 150, backgroundColor: 'green' },
    { id: '4', title: 'Item 4', height: 50, backgroundColor: 'yellow' },
    { id: '5', title: 'Item 5', height: 70, backgroundColor: 'brown' },
    { id: '6', title: 'Item 6', height: 600, backgroundColor: 'purple' },
    { id: '7', title: 'Item 7', height: 90, backgroundColor: 'orange' },
    { id: '8', title: 'Item 8', height: 100, backgroundColor: 'pink' },
  ]);

  const handleReordered = useCallback(
    (newOrder: {
      fromIndex: number;
      indexToKey: string[];
      key: string;
      keyToIndex: { [key: string]: number };
      toIndex: number;
    }) => {
      const reorderedItems = newOrder.indexToKey
        .map((id) => items?.find((item) => item?.id === id))
        .filter(Boolean);

      setItems(reorderedItems as Item[]);
    },
    [items],
  );
  return (
    <View style={{ flex: 1, marginTop: 45 }}>
      <Sortable.Grid
        columns={2}
        onOrderChange={handleReordered}
        masonry
        rowGap={10}
        data={items}
        showDropIndicator
        hapticsEnabled
        renderItem={({ item, index }: { item: any; index: number }) => (
          <View className="px-1">
            <Pressable>
              <View
                className="overflow-hidden rounded-[20] border border-ivory-600 p-1"
                style={{
                  height: item?.height,
                  backgroundColor: item?.backgroundColor,
                }}
              >
                <View className="overflow-hidden rounded-2xl">
                  <Text>{item.title}</Text>
                </View>
              </View>
            </Pressable>
          </View>
        )}
      />
    </View>
  );
};

export default Test;

Changes showcase

sortables.webm

[vercel]

@rennard is attempting to deploy a commit to the matipl01's projects Team on Vercel.

A member of the Team first needs to authorize it.

[MatiPl01]

Could you please share the example code that you used? Not only the implementation but also the code you used to render the example from the video?

[rennard]

I just updated the first comment with example code and a new recording, let me know if you need anything else

[MatiPl01]

Thanks @rennard! I will try to find some time to look at this in a next few days.

[rennard]

awesome, thank you!