Fixed items in flex layout

[GNUGradyn]

Hi. I'm trying to make a UI like this

They can be drag-sorted and the add button can be used to add a new entry when in this mode. The widths are variable and it is a wrapped list so im using flex layout. However when trying to wrap all the items (including add) in handles and enabling customHandle on the sortable component, I get this error for the add button when the add button is set to fixed

ReanimatedError: [react-native-sortables] Fixed items are not yet supported in flex layout, js engine: reanimated

Sounds like it is not implemented yet. Just creating this to let you know it is wanted and track progress

[MatiPl01]

Hey @GNUGradyn!

I haven't implemented this functionality for the sortable flex component yet. I was quite busy recently and didn't have time to finish this up.

I hope I will find some time in the next days and figure out a proper implementation for this feature.

[GNUGradyn]

I manually merged these changes into the latest version (with a couple fixes along the way) and it works as well as I think it logically can with this layout. The issue is it is impossible for any element to be truly "fixed" in this layout unless there are no draggable elements between it and the beginning or the end. This is because the layout does not expect elements to be the same size so the layout must shift. It works for what I'm doing which is keeping a non draggable item at the end.

Perhaps it could only allow fixed layout for flex if all fixed items are either at the beginning or the end, or in other words there are no movable items between a draggable and either the beginning or the end of the flex list? This is the only way I can think of that does not feel super confusing to interact with. Or alternatively it could be left as-is and when there are fixed components that are not tethered to the front or end of the list it could give a warning that this configuration is likely to cause unexpected behavior?

[MatiPl01]

I think that fixed items shouldn't be limited to just flex layout that have all items of equal size because flex layout is meant to be used with items with different sizes in most cases. For equal-size items, the preferable solution is the Sortable.Grid.

I understand that the name might be confusing but the fixed layout means that the item has fixed order in the data array (not fixed position on the screen). Maybe I should make it more explicit and instead of naming it fixed, change the name to fixed-order or describe it somewhere that fixed doesn't mean that the item won't move at all.

[GNUGradyn]

By this definition this code seems to work as is if you merge it into the latest code

[MatiPl01]

I have finally released a new version that adds support for fixed items in the flex component. Sorry for the long delay.

[GNUGradyn]

Legend, thanks!