Using active item key inside renderItem

[pkfms]

Is there any way of reading the key of the item currently being dragged inside the render item function?
I'm using this to apply styles based on if the item is being dragged or not.

I managed to do this by creating my own context wrapping Sortable.Grid with a SharedValue of the active item key. I then set this value in onDragStart/onDragEnd.

This value can be read inside a component rendered in renderItem.

const RenderItem = (item) => {
    const activeItem = useContext(ActiveItemContext).activeItem; <-- shared value
    const animatedStyle = useAnimatedStyle(() => {
        const isActive = activeItem.value === item.id;
        // return animated styles based on item being dragged or not
    });
}

I think this could be more easily be provided by this library.

Screen_Recording.mp4

[MatiPl01]

Hey @pkfms!

I added the ItemContext some time ago and there is a useItemContext hook that returns an object with isActive SharedValue, but I can see that I forgot to export it from the library and didn't add docs yet.

I will add this missing export and it should be available in the next release that I plan to make in about a week.

[MatiPl01]

If you want to use it now, you can patch the library by adding this line

export { useItemContext } from './providers';

to the src/index.ts file and you should be able to use this hook within the item component.

[pkfms]

Great, thanks!