itemStyles are somewhat confusing about react-native-drax

[lafiosca]

To be honest, they probably are somewhat confusing. The current extent of the documentation is in the TypeScript definition comments:

react-native-drax/src/types.ts

Lines 644 to 693 in 77ed753

	/** Style-related props for a Drax view */
	export interface DraxViewStyleProps {
	/** Custom style prop to allow animated values */
	style?: AnimatedViewStyleProp;
	/** Additional view style applied while this view is not being dragged or released */
	dragInactiveStyle?: AnimatedViewStyleProp;
	/** Additional view style applied while this view is being dragged */
	draggingStyle?: AnimatedViewStyleProp;
	/** Additional view style applied while this view is being dragged over a receiver */
	draggingWithReceiverStyle?: AnimatedViewStyleProp;
	/** Additional view style applied while this view is being dragged NOT over a receiver */
	draggingWithoutReceiverStyle?: AnimatedViewStyleProp;
	/** Additional view style applied while this view has just been released from a drag */
	dragReleasedStyle?: AnimatedViewStyleProp;
	/** Additional view style applied to the hovering copy of this view during drag/release */
	hoverStyle?: AnimatedViewStyleProp;
	/** Additional view style applied to the hovering copy of this view while dragging */
	hoverDraggingStyle?: AnimatedViewStyleProp;
	/** Additional view style applied to the hovering copy of this view while dragging over a receiver */
	hoverDraggingWithReceiverStyle?: AnimatedViewStyleProp;
	/** Additional view style applied to the hovering copy of this view while dragging NOT over a receiver */
	hoverDraggingWithoutReceiverStyle?: AnimatedViewStyleProp;
	/** Additional view style applied to the hovering copy of this view when just released */
	hoverDragReleasedStyle?: AnimatedViewStyleProp;
	/** Additional view style applied while this view is not receiving a drag */
	receiverInactiveStyle?: AnimatedViewStyleProp;
	/** Additional view style applied while this view is receiving a drag */
	receivingStyle?: AnimatedViewStyleProp;
	/** Additional view style applied to this view while any other view is being dragged */
	otherDraggingStyle?: AnimatedViewStyleProp;
	/** Additional view style applied to this view while any other view is being dragged over a receiver */
	otherDraggingWithReceiverStyle?: AnimatedViewStyleProp;
	/** Additional view style applied to this view while any other view is being dragged NOT over a receiver */
	otherDraggingWithoutReceiverStyle?: AnimatedViewStyleProp;
	}

These can be individually applied directly to a DraxView via its props. When using DraxList however, we need to pass them as an object through the itemStyles prop so that it can pass them on to the individual DraxViews that it renders for the list items.

You can think of them as a series of layers that are added onto the style for an item. The style field is the basic one that is applied no matter what. The drag*Style fields are additional stylings applied for various states of dragging (or not dragging) the item. As you have surmised, these apply to the original item still sitting where it was. The analogous hover*Style fields are applied to the hovering view copy of the item which exists only during a drag. The remaining fields related to receiving/other are also applied to the non-hovering original item in the ways their comments suggest.

This is one of the features of the library that will benefit greatly from deeper documentation, and it is something I am very open to feedback and improvements upon. The goal here was to make the library as powerful and flexible as possible, while providing sensible defaults for the 80-90% use case. These fields do not all need to be specified, and indeed I imagine most folks only using a small number of them to make targeted style changes for their own purposes.

[lafiosca]

I'll look into this tonight and reply more thoroughly.

[lafiosca]

Ran long working on other issues tonight, hope to take a look at this this weekend. Sorry for the delay. (And sorry for repeating myself so much 😹)

[lafiosca]

I think I will leave this issue open until we address it better in documentation and/or change the feature in a future release. Let me know if you have more comments or questions please, @chrisdrackett .