Drag and Auto Scroll Not Working with Sortable.flex and absolute Positioning in flexDirection: "row"

[scrapecoder]

I'm using Sortable.flex with flexDirection: "row", but I’m facing the following issues when the child components are positioned using position: "absolute":

Drag and Auto Scroll Not Working:
When the child is set to absolute position, the drag and auto scroll are not working as expected.

Incorrect Position Adjustment on Drag:
When I use the left value with absolute positioning, after a long press to start dragging, the view shifts further to the left, even though it's already positioned at the left value.

<Sortable.Flex
  flexDirection="row"
  height={VideoUtils.FRAME_WIDTH}
  gap={0}
  autoScrollEnabled
  autoScrollDirection="horizontal"
  width={'fill'}>
  {DATA.map((item, index) => (
    <View
      style={{
        position: 'absolute',
        left: index * 100, // Initial left position
        width: 100,
      }}
      key={item}>
      <Text>{item}</Text>
    </View>
  ))}
</Sortable.Flex>

[MatiPl01]

Hey @scrapecoder!
Thanks for reporting the issue. I can see that you are missing a few important things here.

1. To use auto scroll feature, you have to wrap the sortable component within a scrollable component. The library itself renders just a Sortable.Flex without any ScrollViews, etc. for better flexibility. To use the auto scroll feature, please add this:

import { useAnimatedRef } from 'react-native-reanimated';

...

const scrollViewRef = useAnimatedRef<ScrollView>();

// Remember to set the ScrollView direction to `horizontal` as well
<Animated.ScrollView ref={scrollViewRef} horizontal>
  <Sortable.Flex
    ...
    scrollableRef={scrollViewRef} // And pass this ref to the sortable component
  >
   ...
  <Sortable.Flex />
</Animated.ScrollView>

2. You cannot set position: absolute on items because it will prevent the library from measuring their dimensions. All Sortable.Flex items are wrapped in another component that maintains their position and measurement. If you set position to absolute, these containers collapse to 0x0 dimensions, thus you aren't able to drag anything. Please remove this absolute position property, as well as, left: index * 100.

If you, for some reason, have to use the absolute position of items, please let me know why and what is the use case. I will try to figure out a solution in this case.

[scrapecoder]

Hi @MatiPl01 ,

Thanks for your response and suggestions.
However, I need to use position: "absolute" because we are creating a timeline, and each segment needs to be positioned at a specific starting point on the timeline. Removing absolute positioning would make it difficult to accurately place segments at their designated start positions.

Is there any workaround or alternative approach to handle this use case while maintaining drag with aboslute position.

Thanks!

[MatiPl01]

Are these timeline offsets constant or will they change when you change the order of items? I wonder what should happen when you drag an item and drop it at a different position - will it just change the width of this item so that the all remaining ones stay at the same timeline offset or will it push all other elements and adjust their offsets respectively?

---

If it does the second thing, I think that you can just set proper widths of items. And, as far as I understand, if you have an item, let's say at offset 150, that means that the total width of all items before it should be 150 like this:

0 ..... 50 ........ 150
|-----|----------|------...

This is a case in which there are no gaps allowed between the items and the next offset is always the previous offset + the width of the previous item.

---

If you need something else, when you are able to place the item at any position, I think that you would have to implement a solution yourself. This library was meant to provide sorting of components rendered in a grid/flexbox layout but I think that you need to create a custom layout with absolute positions of items where you have a full control over their placement.

You can also describe your requirements in detail so that I may add a different sortable component with more flexibility in the future but I would have to know what is the desired behavior, how to position items (based on which condition), what should change when you change their order, etc.

[scrapecoder]

A segment can be created at any offset, and gaps may appear when the user trims any segment.
The feature details should work similarly to how a video editor handles segmentation, allowing easy drag and drop of any segment to any point on the timeline. like VN editor or banuba app does

[MatiPl01]

Ok, I can understand now. Thank you very much for the explanation.

Unfortunately, you wouldn't be able to implement the timeline with such requirements by using this library. Mybe I will add something like this in the future, but I can't promise because I have other things already planned.

[scrapecoder]

Thank you for the clarification and time.
It would be great if this feature could be supported in the future, but I completely understand that you have other priorities.

Thanks again for your help!