React-native-swiper: jump to a slide by number. what must i do?

[ngoctruy87]

jump to a slide by number. what must i do?
thank

[leaky]

I ran into this problem and discovered that the best way to do this is to add a ref to your Swiper component and then pass a function as props to your child components inside Swiper and then use the value from the props function to navigate the slider like so:

jumpToSlide (value) {
    this.refs.swiper.scrollBy(value) // n is the number of places to move the swipe, eg: 2, -1, etc.
}

render () {
    return (
        <Swiper ref="swiper">
            <Child swipe={(value) => this.jumpToSlide(value)} />
        </Swiper>
    )
}

Then inside Child:
<Text onPress={() => this.props.swipe(1)}>Swipe!</Text>

[shkfnly]

@leaky Did you find an easy way to update the animation speed, it seems that mine moves really slowly using your method.

[leaky]

@shkfnly if it's moving really slowly check that:

1. You don't have slow animations enabled by pressing Cmd+T.
2. If using Chrome, you don't have other tabs open in the same window that the React Native Debugger is open - I don't know why but this does cause the simulator to run slowly/laggy.

[xvaldetaro]

When doing this scrollBy hack, the pagination doesn't update, you have to also call updateIndex.
I want to just reset the slide to the first one which makes it even hackier because I have to find what is the current slide.

[michaelknoch]

"Currently, two ways are supported by React to refer to components. The first one, providing a string identifier is considered legacy in the official documentation. Referring to components by setting a property on the this object in the reference callback is preferred."
https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md

jumpToSlide(value) {
    this.swiper.scrollBy(value);
}

render () {
    return (
        <Swiper ref={(component) => { this.swiper = component; }}>
            <Child swipe={slide => this.jumpToSlide(slide)} />
        </Swiper>
    )
}

<Text onPress={() => this.props.swipe(1)}>Swipe!</Text>

[VienLeVan]

I ran into this problem and discovered that the best way to do this is to add a ref to your Swiper component and then pass a function as props to your child components inside Swiper and then use the value from the props function to navigate the slider like so:

jumpToSlide (value) {
    this.refs.swiper.scrollBy(value) // n is the number of places to move the swipe, eg: 2, -1, etc.
}

render () {
    return (
        <Swiper ref="swiper">
            <Child swipe={(value) => this.jumpToSlide(value)} />
        </Swiper>
    )
}

Then inside Child:
<Text onPress={() => this.props.swipe(1)}>Swipe!</Text>