In React native for drag and drop individual list item, TouchableWithoutHighlight not working inside animated view with {...panResponder.panHandlers}

I have a list of items, i can select any list item with long press and drag it over an icon for delete. I am using PanResponder for this. now in this part the first crucial step that is long press triggering a function is not happening in some devices while in some its working. I think the issue is touchbales don't seem to work properly in animated view when passed {...panResponder.panHandlers}

<Animated.View      style={        item.uuid === val &&        (item.type === 'MESSAGE' || item.type === 'ATTACHMENT') &&        (userDetails.uuid === item.actionedByUuid) &&        !openChatBox &&        moment(new Date(item.createdAt), 'ddd MMM DD YYYY HH:mm:ss GMT Z').diff(Date.now(), 'minutes') <= 0 &&        moment(new Date(item.createdAt), 'ddd MMM DD YYYY HH:mm:ss GMT Z').diff(Date.now(), 'minutes') >= -15          ? {              transform: [{ translateX: pan.x }, { translateY: pan.y }],              // transform:[{scale:scale}],              flex: 1,              zIndex: 1000            }          : { flex: 1 }      }      {...panResponder.panHandlers}><TouchableWithoutFeedback        onLongPress={() => {          (item.type === 'MESSAGE' || item.type === 'ATTACHMENT') && indexer(item)        }}>         {element}<SizedBox height={24} /></TouchableWithoutFeedback></Animated.View>

This particular code is mapping over an array of data and val is state that i have used and is being set in indexer function where val contain item index number which helps in selecting individual list item for furhur drag and drop.

Now the issue i am facing is this Touchable without feedback is triggering indexer function in some android devices and it simply don't do that in some devices.

The Touchable without feedback starts working when {...panResponder.panHandler} is removed from animated.view.Below is my pan handler:

const panResponder = PanResponder.create({onMoveShouldSetPanResponder: () => true,onPanResponderGrant: () => {  pan.setOffset({    x: pan.x._value,    y: pan.y._value  })  pan.setValue({ x: 0, y: 0 })  setProceed('unactive')},   onPanResponderMove: Animated.event([null, { dx: pan.x, dy:      pan.y }], { useNativeDriver: false }),       onPanResponderRelease: (e, gesture) => {      setGesture(gesture)  if (isDropZone(gesture)) {    setOpenConfirmation(true)  } else if (proceed === 'unactive') {    pan.flattenOffset()    pan.setValue({ x: 0, y: 0 })    Animated.spring(pan, {      //This will make the draggable card back to its original position      toValue: 0    }).start(() => {      console.log('Not dropped Animation spring back')    }),      setStatus(false)    setVal(-1)    setScrollHandler(true)  }}

})