'React Native handle touch release

I have a component which when the user long press a card I show a bigger version of this card.

The ideia is that the bigger card will be shown as long as the user keep pressing the touch and then will hide only when the finger is released (something like instagram long press). I tried to archieve this using the onLongPress and the onPressOut props of <TouchableHighlight>, the thing is that the onPressOut props has something that they call "cancel",

/** * Called when the touch is released, * but not if cancelled (e.g. by a scroll that steals the responder lock). */

What is happening is that when the user hold and move the finger the onPressOut prop is called, therefore the bigger card is hidden.

This is the code:

        <View style={styles.container}>
            <View style={styles.separator}>
                <TouchableHighlight
                    underlayColor="rgba(255, 255, 255, 0)"
                    onPress={this.cardClick}
                    onLongPress={this.cardLongPress}
                    onPressOut={this.cardPressOut}
                >
                 {this.content}
                </TouchableHighlight>
          </View>
        </View>

Here is a GIF to show what is happening:

GIF

What I want is something that is only triggered when the user acctually releases his finger, regardless of whether or not he is moving the finger arround. Thanks in advance for the help.

react-native

Solution 1:^[1]

Try setting an offset https://facebook.github.io/react-native/docs/touchablewithoutfeedback#pressretentionoffset , or convert your root view in a touchablewithoutfeedback, and call onPressOut there

Solution 2:^[2]

So you want an Instagram style preview modal. I got you.

As mentioned in previous comments, you should use the pressRetentionOffset prop that will let you "extend" the pressable area. https://facebook.github.io/react-native/docs/touchablewithoutfeedback#pressretentionoffset

But! this prop will only work if the ScrollView is disabled. so you will need to disable the scrolling when the preview modal is shown.

You can do that with the scrollEnabled prop on ScrollView and make it falsy when the preview modal is shown.

Of course, this works with onLongPress and onPressOut props.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	ValdaXD
Solution 2	Nir Ben-Yair

'React Native handle touch release

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]