Added extra onPress is always invoked

[thomasdittmar]

trafficstars

First of all everything works as expected. Hence, this is not really a bug report.

In my instance I use react-native-swipeable-item together with react-native-draggable-flatlist but the Row would have an additional TouchableOpacity something like that

<SwipeableItem
  key={item.key}
   ...
  snapPointsLeft={[150]}
  snapPointsRight={[175]}>
  <View
    style={[styles.row, { backgroundColor: item.backgroundColor, height: item.height }]}>
    {/* this is the drag handler for reordering */}
    <TouchableOpacity onLongPress={drag}>
      <Text style={styles.text}>...</Text>
    </TouchableOpacity>
    {/* this is the clickable main row that will open an edit modal to edit the row data*/}
    <TouchableOpacity onPress={() => {
      console.log('row pressed')
      openModal()
    }>
      <Text style={styles.text}>The main row</Text>
    </TouchableOpacity>
  </View>
</SwipeableItem>

The setup is like the Google mail app, only that one can't reorder the items. In the Google mail app one can swipe left or right or click on the row to see the content of the mail.

I would like the same outcome but once I begin to swipe the onPress of the main row gets invoked before the onChange event. It would look like that if I log out the value of the onChange event.

LOG      row pressed
LOG      left
LOG      left
LOG      right
LOG      0

Is there a way to accomplish this? SwipeableItem would need an extra event that get's invoked as soon as the swipe starts so the onPress of 2nd TouchableOpacity can be disabled, right?

[thomasdittmar]

I created a PR but I don't have permission to push. Let me know if you are interested.

[computerjazz]

I'm not sure I fully understand your useCase, you get a percentOpen animated value that you should be use to roll your own event that triggers on swipe start: https://github.com/computerjazz/react-native-swipeable-item#props

something like:

const MyComponent = ({ percentOpen }) => {
  const hasBegun = useMemo(() => greaterThan(percentOpen, 0), [])
 
 useCode(() => {
  onChange(hasBegun, cond(hasBegun, call([hasBegun], () => {
    console.log("swipe started!!" )
}) ))
}, [hasBegun])

}

[Brune04]

@thomasdittmar I've got the same issue. I have a touchable item that you can swipe right to click delete but no matter what when you swipe right it invokes the onPress for the touchable.

What was your fix for this?

[timqha]

@Brune04 I used TouchableOpacity from react-native-gesture-handler that resolved this problem