-
Notifications
You must be signed in to change notification settings - Fork 21
-
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
Beta Was this translation helpful? Give feedback.
All reactions
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.
Replies: 1 comment 2 replies
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
Great, thanks!
Beta Was this translation helpful? Give feedback.