React Native onBeforeSnapToItem combined with onPress

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})
  }