0

I am implementing an image gallery. There's a list of squared images, if user longPress an image component it will re-render to a selected image component which show a blur background and a tick on top of the image.

Here's the normal image component:

<TouchableOpacity
    key={index}
    onPress={this.normalModeImgClick(img, index)}
    onLongPress={this.startSelectMode(index)}
>
    <Image style={styles.img} source={{uri: img.resized_xs_url}}/>
</TouchableOpacity>

Here's the component at select mode:

<TouchableOpacity
    key={itemIndex}
    style={styles.selectedImgWrapper}
    onPress={this.selectModeImgClick(imgItem, itemIndex)}
>
    <Image style={styles.img} source={{uri: imgItem.img.resized_xs_url}}/>
        {imgItem.selected &&
          <View style={styles.selectedImgCover}>
            <Image style={styles.selectedIcon} source={require('../../assets/icon_tick.png')}/>
          </View>
        }
</TouchableOpacity>

As you can see, if you longPress a normal image component startSelectMode will trigger, and that image will re-render and turned to a select mode component. However, selectModeImgClick will also be triggered which it is not supposed to (as the user is still doing the longPress action).

How to prevent this happening?

Andus
  • 1,713
  • 13
  • 30

1 Answers1

0

Accidentally discovered an alternative right after I posted the question, solved by adding an empty onLongPress function props to the selected mode component like this:

<TouchableOpacity
    key={itemIndex}
    style={styles.selectedImgWrapper}
    onPress={this.selectModeImgClick(imgItem, itemIndex)}
    // Override 'onLongPress' with an empty function
    onLongPress={() => {}}
>
    <Image style={styles.img} source={{uri: imgItem.img.resized_xs_url}}/>
    {imgItem.selected &&
        <View style={styles.selectedImgCover}>
            <Image style={styles.selectedIcon} source={require('../../assets/icon_tick.png')}/>
        </View>
    }
</TouchableOpacity>

Since the component is not designed to have a longPress action, I'm looking forward to better solutions:

Kendall
  • 1,992
  • 7
  • 28
  • 46
Andus
  • 1,713
  • 13
  • 30