react-native-snap-carousel: Upon tap, Carousel does not execute onPress method for custom parent TouchableOpacity.

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

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 1
Comments: 16 (2 by maintainers)

Most upvoted comments

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 on May 22, 2019

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>

debotos on Oct 1, 2021