Long press and not dragging makes the item stay selected

[pedromartins-tk]

When i long press then item the animation goes on, but if i remove the touch and do not drag it, it does not return to the same place, in other words, it stays selected.

[SHISME]

You need an other way to drag or need keep the item selected after long press?

[pedromartins-tk]

The dragging is amazing. I need the item to return to place if, after a long press, i dont move it.

Those circles are taps on the screen showing that i removed the long press and drag action. It just stays there selected when i remove the finger/click

[SHISME]

ok, i know, could you show me your critical code

[pedromartins-tk]

I just copied the version you have on the README file

[SHISME]

sorry, i can't repeat the problem, could you try to set the onDragRelease, and check to see if it can trigger

[jqn]

@SHISME this issue happens mostly in android and the ios emulator. If you test it in an iOS device is not obvious. I'm thinking we need a way to figure out if the block wasn't dragged then reset back to its original place and position. I just haven't been able to figure that part out

[UI-Animation-Chen]

I really kown your issue, it occurs to me. I solved it by adding onPressOut callback in Block.

file block.tsx

export const Block: FunctionComponent<BlockProps> = ({ style, dragStartAnimationStyle, onPress, onLongPress, onPressOut, children, panHandlers, }) => { return ( <Animated.View style={[styles.blockContainer, style, dragStartAnimationStyle]} {...panHandlers}> <Animated.View> <TouchableWithoutFeedback onPress={onPress} onLongPress={onLongPress} onPressOut={onPressOut}> {children} </TouchableWithoutFeedback> </Animated.View> </Animated.View> ) }

file draggable-grid.tsx

let dragStarted = false;

function onStartDrag(nativeEvent: GestureResponderEvent, gestureState: PanResponderGestureState) { const activeItem = getActiveItem() if (!activeItem) return false dragStarted = true; props.onDragStart && props.onDragStart(activeItem.itemData)

const { x0, y0, moveX, moveY } = gestureState
const activeOrigin = blockPositions[orderMap[activeItem.key].order]
const x = activeOrigin.x - x0
const y = activeOrigin.y - y0
activeItem.currentPosition.setOffset({
  x,
  y,
})
activeBlockOffset = {
  x,
  y,
}
activeItem.currentPosition.setValue({
  x: moveX,
  y: moveY,
})

}

function setActiveBlock(itemIndex: number, item: DataType) { if (item.disabledDrag) return dragStarted = false; setPanResponderCapture(true) props.onDragWillStart && props.onDragWillStart(item); // added this line setActiveItemIndex(itemIndex) }

const itemList = items.map((item, itemIndex) => { return ( <Block onPress={onBlockPress.bind(null, itemIndex)} onLongPress={setActiveBlock.bind(null, itemIndex, item.itemData)} onPressOut={() => { if (!dragStarted) { onHandRelease(); } }} panHandlers={panResponder.panHandlers} style={getBlockStyle(itemIndex)} dragStartAnimationStyle={getDragStartAnimation(itemIndex)} key={item.key}> {props.renderItem(item.itemData, orderMap[item.key].order)} </Block> ) })

[lyseiha]

anything update?

[decpk]

onPressOut={() => { if (!dragStarted) { onHandRelease(); } }}

This really helped me Thanks