Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Using active item key inside renderItem #361

Answered by MatiPl01
pkfms asked this question in Q&A
Discussion options

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
You must be logged in to vote

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

Comment options

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.

You must be logged in to vote
2 replies
Comment options

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.

Comment options

Great, thanks!

Answer selected by pkfms
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
2 participants

AltStyle によって変換されたページ (->オリジナル) /