Portal for moving items

[fax1ty]

In containers that don't support overflow, we can see cropped items.

Ex. ScrollView
[redacted]

Same code with View
[redacted]

My suggestion is to add the ability to pass a Portal component, where the item would be positioned on the topmost layer of the screen.

[MatiPl01]

Thanks for moving this topic here.

The problem with portal is that it requires rendering the item outside of the grid component and sometimes, when renders happen during animations, it may result in flickering or other unexpected behavior, which I wanted to avoid. Even though, I think that there is no other way to implement this than using a Portal component but I will try to experiment with that during the weekend and let you know then.

[MatiPl01]

Hey @fax1ty!

I know I said that I will work on your feature requests during the weekend but I am still struggling with the implementation of Portal component to teleport the active item above all other items.
I opened the #299 draft which I've been working on for a few days. It mostly works but still has some issues, so please wait a bit more time until this is ready. I hope I will be able to get it done in the near future.

[fax1ty]

I'm very grateful for your help and I can't ask for anything more from an open-source developer.
Thank you for your hard work.

[fax1ty]

I will try my best to help in any way possible

[MatiPl01]

Thanks for offering your help. I think that I would finish this feature myself as it is quite complex. I will let you know once it is ready and you may help me to test it out if you wish.

[MatiPl01]

Hey @fax1ty!

I finally merged a PR that adds portal support. I was struggling with making it work on the expo example app but it seems that I spent too much time unnecessarily as my problems are caused by this Reanimated issue with onLayout not being called. It is resolved in Reanimated 3.17.0, but which expo go doesn't support yet, so I eventually decided to merge these changes knowing that this feature won't work in expo go apps.

You can test it out by cloning this repo and wrapping the components within the Sortable.PortalProvider (e.g. wrapping the entire navigator to see changes in all examples in the example app).

I will release a new version of the library in the next week, when I come back from holiday and add support for fixed items in the grid.

[fax1ty]

Sortable.Handle disappeared when I tried to drag it.

I'm not sure where the collapsable prop should go... Neither Sortable.Handle nor Sortable.TouchableOpacity have it.
After adding collapsable to the highest view in the screen hierarchy, the Handle appeared, but the Portal isn't working. Warnings still remain.

I'm using Reanimated 3.15.1.
Do I understand correctly that PortalProvider requires 4.0 or higher or 3.17 or higher to use it?

[fax1ty]

It works pretty well on 1.5.2. ❤️