React Native onBeforeSnapToItem与onPress结合

Question

So this is a screen where you slide left to go forward and slide right to go back. there is also a button at the bottom, when clicked it skip all the slide and it goes to the main screen. onPress={() => this.props.navigation.navigate('Mainscreen')}

the issue here is that I would like to change this button so instead of skipping all the slide it just takes you to the next side, basically it will act the same as sliding left. and honestly I still didn't grasp how onBeforeSnapToItem works

render() {
    const width = Dimensions.get('window').width * 0.9

    return (
      <View style={loginStyles.containerExpand}>
        <View style={loginStyles.carouselOuter}>
          <ProgressDots current={this.state.currentSlide} total={SLIDE_COUNT} />
          <Carousel
            data={this.slides}
            renderItem={this.renderItem}
            onBeforeSnapToItem={this.handleSlideChange}
            itemWidth={width}
            sliderWidth={width}
          />
        </View>
        <View style={loginStyles.buttonContainer}>
          <TouchableHighlight
            style={loginStyles.button}
            onPress={() => this.props.navigation.navigate('Mainscreen')}
            underlayColor={Colors.buttonSecondaryBkgdActive}
          >
            <Text style={loginStyles.buttonText}>{this.buttonText}</Text>
          </TouchableHighlight>
        </View>
      </View>
    )
  }
}

and this handleSlideChange function

  handleSlideChange = (currentSlide) => {
    this.setState({currentSlide})
  }

Answer 1

The onBeforeSnapToItem property is just a placeholder for a callback function which is called by the component.

What you need is to get a reference to the carousel component and call the snapToNext method of the component in your onPress function. See doc of react-native-snap-carousel

Getting a reference can be done with React.createRef() :

class Example extends Component {
  carousel = React.createRef()

  goToNextSlide = () => {
    this.carousel.current.snapToNext()
  }
  ...

  render() {
    return (
      ...
      <Carousel
         ref={this.carousel}
         data={this.slides}
         renderItem={this.renderItem}
         onBeforeSnapToItem={this.handleSlideChange}
         itemWidth={width}
         sliderWidth={width}
      />
      ...
      <TouchableHighlight
        style={loginStyles.button}
        onPress={this.goToNextSlide}
        underlayColor={Colors.buttonSecondaryBkgdActive}
      >
        <Text style={loginStyles.buttonText}>{this.buttonText}</Text>
      </TouchableHighlight>
      ...
    )
  }
}