React-native-snap-carousel: How can we handle on press in items?

[cbilgili]

Thanks for very nice plugin. I am newbie at React Native. I could not handle on press to child item. Is it something that I could figure out or possible issue to be fixed?

   _renderItem (content, index) {
        return (
          <View key={"tours"+index}>
            <TouchableOpacity onPress={this.handlePressSend}>
              <Image source={{uri: 'https://res.cloudinary.com/dhtfjpv7o/image/upload/c_fill,e_art:primavera,g_auto,h_300,w_400/v1479733803/jpfj4ilkpmst3kz697z8.jpg'}} style={styles.tourImage} />
            </TouchableOpacity>
          </View>
        );
    }

On press method;

handlePressSend = () => {
    console.log('pressed')
  }

[Exilz]

Remove the view. It's not doing anything. Put the key prop on the TouchableOpacity.

[cbilgili]

Thanks for advice. But it doesn't work even like this. Can it be related to something like https://github.com/facebook/react-native/issues/7572 ? I think any working example would be very beneficial.

[bd-arc]

@cbilgili I've added a onPress prop to items in the example. See this commit. You can use this as a starting point.

[cbilgili]

I will try it, merci beaucoup!

[ahyong87]

Hi,

i try to simple change view, but is not working

      <TouchableOpacity
                    activeOpacity={0.9}
                    style={styles.slideInnerContainer}
                    onPress={() => this.OpenDetailView() }>

OpenDetailView(){
console.log('OpenDetailView work ?');
}

This is error i get

[error][tid:com.facebook.react.JavaScript] _this2.OpenDetailView is not a function. (In '_this2.OpenDetailView()', '_this2.OpenDetailView' is undefined)

[fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: _this2.OpenDetailView is not a function. (In '_this2.OpenDetailView()', '_this2.OpenDetailView' is undefined)

[bd-arc]

@ahyong87 I will need to see a bit more code to answer you properly, but this apparently has nothing to do with the plugin in itself. I'm pretty confident that this is a classic 'function binding' issue.
Try binding your method in the class constructor, like this : this.OpenDetailView = this.OpenDetailView.bind(this), and call it this way : onPress={this.OpenDetailView}. See this Stack Overflow answer for more details. Hope this helps!

[ahyong87]

@bd-arc thanks~!!!!

[sfatih]

@bd-arc thanks for answer. I change my render function like this:
renderItem={item => this._renderItem(item)}
and component didnt lose its function instance

[brenohq]

thanks @sfatih this solved my problem too

[oferRounds]

@bd-arc I’m facing this issue as well – sometimes the onPress of a button is not called – and I’ve verified that this is not a binding issue (I’m using arrow function in fact). Do you have any idea why this might happen? Something is blocking the press on some cases

This the relevant part of my carousel item class (the relevant part is the BobSolidButton):

export default class TimeOffPolicySlide extends PureComponent<TimeOffPolicySlideProps> {

  render() {
    return (
      <View style = { styles.container } removeClippedSubviews = { true } >
        <View style = {[ styles.subcontainer, { width: this.props.width, height: this.props.height } ]}>
          <Text style = { styles.policyEmojiLabel }>{
            TimeOffPolicyModel.emojiRepresentationOfPolicy(this.props.policy.name, this.props.userGender)
          }</Text>
          <Text style = { styles.policyNameLabel }>{ this.props.policy.name }</Text>
          { this.props.policy.balance > 0 ?
            <Text style = { styles.balanceLabel }>{ this.props.policy.balance }</Text> :
            <Image
              source = { require('../../../images/infinity.png') }
              style = { styles.infinityIcon }
            />
          }
          <Text style = { styles.detailsLabel }>{
            this.props.policy.includingBooked.daysTaken + ' ' +
            LocalizationService.strings.TimeOffPoliciesScreen_slide_daysTakenThisCycleLabel
          }</Text>
          <Text style = { styles.detailsLabel }>{
            this.props.policy.plannedDaysThisPeriod + ' ' +
            LocalizationService.strings.TimeOffPoliciesScreen_slide_daysBookedThisCycleLabel
          }</Text>
          <Text style = {[ styles.detailsLabel, { marginBottom: 30 }]}>{
            this.props.policy.plannedFutureDays + ' ' +
            LocalizationService.strings.TimeOffPoliciesScreen_slide_daysBookedNextCycleLabel
          }</Text>
          <BobSolidButton
            backgroundColor = { BOB_ORANGE }
            onPress = { this.onPressTimeOffRequestButton }
            title = { LocalizationService.strings.TimeOffPoliciesScreen_slide_requestButton }
            width = { this.props.width }
          />
        </View>
      </View>
    )
  }

  private onPressTimeOffRequestButton = () => {
    this.props.onRequestButtonPress(this.props.policy)
  }
}

[oferRounds]

It actually seems the press is not detected at all – the button does not get highlighted. Like something is blocking the touch gesture