Upon tap, Carousel does not execute onPress method for custom parent TouchableOpacity.

[irajwani]

Is this a bug report, a feature request, or a question?

A feature request / question

Hi archriss,
You've probably dealt with this already: Given that we can wrap the carousel in a TouchableOpacity like so:

`<TouchableOpacity onPress={this.props.onPress} style={{width: "100%", backgroundColor: "#fff"}}>
<Carousel

      ref={ (c) => { this._carousel = c; } }
      data={this.props.data}
      renderItem={this._renderItem.bind(this)}
      onSnapToItem={this.handleSnapToItem.bind(this)}
      sliderWidth={300}
      itemWidth={256}
      layout={'default'}
      firstItem={0}
      
    />
    <Text>If you touch this text, the onPress event willl fire but it does not fire when one taps the Carousel above</Text>
    {/* { this.pagination } */}
  </TouchableOpacity>`

the attached onPress method will not execute when I tap the carousel. As expected, children of the opacity and the edges around the carousel if you give margin/padding, will execute onPress method and do our required function. In my case, If the user taps an image in a carousel, the app fires up a full screen modal to show full screen images, so I would really like person to be able to tap on Carousel and execute the onPress method: () => this.setState({showFullScreenPictures: true})

If you need screenshots, please let me know. I didn't provide them as my UI is proprietary and before I make an example app for this, I just wanted to know if this question makes sense. Hope that made sense. Imad

[irajwani]

Oh, and yes I have tried different orders of nesting Views and Opacities in the component hierarchy, but Carousel remains immune to being a child of an Opacity.

[bd-arc]

Hi @irajwani,

Can you please provide a Snack example in which the issue can be reproduced?

[irajwani]

Yes, please give me a little bit of time.

[irajwani]

I apologize for the delay. Here's a working example to highlight the issue.

[kirtishjain9]

I apologize for the delay. Here's a working example to highlight the issue.

I'm facing same issue. Did you get any workaround for this?

Thanks & regards

[irajwani]

I have not yet. hmm but perhaps positioning the carousel absolutely under a touchableopacity view might do the trick, or of course one could make their own image carousel from scratch.

[maxto024]

Hi @irajwani I just look your code
what exactly did you want to achieve?
Your TouchableOpacity

    <TouchableOpacity 
           onPress={ () => { 
                console.log("clicked to index", index)
                this._carousel.snapToItem(index);
              }}
      >

I just add alert to check if touchableOpacity is working onPress and its working as you can see

  <TouchableOpacity 
           onPress={ () => { 
                console.log("clicked to index", index);

                Alert.alert(
  'Carousal Tapped ',
    ` Item , Index ${index}`,
  [
    {text: 'Ok', onPress: () => console.log('Ask me later pressed')},
    {
      text: 'Cancel',
      onPress: () => console.log('Cancel Pressed'),
      style: 'cancel',
    },
    {text: 'OK', onPress: () => console.log('OK Pressed')},
  ],
  {cancelable: false},
);
                this._carousel.snapToItem(index+1, true);
              }}
      >
        <Image source={{uri: item}} style={{width: 200, height: 150}}/>
      </TouchableOpacity>

Example

If you want to snap to the next item just

  this._carousel.snapToItem(index+1, true);

@irajwani I hope this will help you thanks

[oferRounds]

Anyone found a solution to this? Facing this issue as well, seems like something is blocking the touch. My button is nested inside the item

[oferRounds]

My button is nested inside the item (in a parent View). If I make the all item a button, then it works. perhaps the parent touches events are blocking the child touch?
@bd-arc

[LordParsley]

I have several touchable elements inside my card & found that adding

pointerEvents="box-none"

to their parent views allowed touch events to arrive.

Before that, stack and tinder layouts gave different behaviour where the top view was always responsive but views further down the stack gave issues – sometimes over their whole areas or even just blocks of 50% width.

[bd-arc]

@LordParsley Thanks for sharing! Looks like a potential solution to fix both this issue and #262. Do you mind sharing a bit of code so that we can understand your exact setup?

Also, was this tested on both Android and iOS?

[maartenvandillen]

@LordParsley the pointerEvents="box-none" seems to prevent the swipe gesture from working on my Android device, which is kind of important for a carousel.

[whenmoon]

It's not working for me, only on Android

[debotos]

Did anyone found the solution? I am facing the same issue. I can't click the carousel image.

[debotos]

For now, I am doing something like -

import Carousel, { Pagination } from 'react-native-snap-carousel'
import { State, TapGestureHandler } from 'react-native-gesture-handler'

<TapGestureHandler
	  onHandlerStateChange={(event) => {
	    if (event.nativeEvent.state === State.ACTIVE) {
	      openPostView() // Tap/Press action
	    }
	  }}
	  >
	  <View style={styles.slideContainer}>
	    <Carousel
	      data={PostMedia}
	      renderItem={renderSlide}
	      onSnapToItem={(index) => setActiveSlide(index)}
	      sliderWidth={keys.screenWidth - 60}
	      itemWidth={keys.screenWidth - 60}
	    />
	    <Pagination
	      dotsLength={PostMedia.length}
	      activeDotIndex={activeSlide}
	      containerStyle={styles.dotsContainer}
	      dotStyle={styles.slideDot}
	      inactiveDotStyle={styles.inActiveSlideDot}
	      inactiveDotOpacity={0.4}
	      inactiveDotScale={0.6}
	    />
	  </View>
</TapGestureHandler>