React-native-swiper: How to control swipe from out side the swiper.

[gauravsbagul]

IOS and Android?

Version

• "react-native-swiper": "^1.6.0-nightly.5",
• "react-native": "0.60.4",

I want to change the page onPress of a button that is outside of the swiper how can to do it

[kirikirisu]

I saw this issue.

1129

[TannerYork]

You can control the swipe from outside the swiper by using refs. You use this.refs for class-based components and useRef() for function-based components. Here is what it looks like for a class-based component:

import React from 'react'
import Swiper from 'react-native-swiper';
import { View, Button } from 'react-native';

class Parent extends React.Component {
    swipeRight = () => {
        this.refs.swiper.scrollBy(1, true)
    }

    render() {
        return (
            <View>
                <Swiper ref='swiper'>
                    <Text>Not Important Text</Text>
                    <Text>Not Important Text</Text>
                    <Text>Not Important Text</Text>
                </Swiper>
            <Button onPress={this.swipeRight}>Swipe to the right</Button>
            </View>
        );
    }
}

[GuillaumeHemmen]

this.refs is deprecated on the latest version of react. Here is an updated version of the snippet should anyone needs it:

import React from 'react'
import Swiper from 'react-native-swiper';
import { View, Button } from 'react-native';

class Parent extends React.Component {
    swiperRef = React.createRef()

    swipeRight = () => {
        this.swiperRef.scrollBy(1, true)
    }

    render() {
        return (
            <View>
                <Swiper ref={ref => (this.swiperRef = ref)}>
                    <Text>Not Important Text</Text>
                    <Text>Not Important Text</Text>
                    <Text>Not Important Text</Text>
                </Swiper>
            <Button onPress={this.swipeRight}>Swipe to the right</Button>
            </View>
        );
    }
}

[zaptrem]

Calling this.swiperRef.scrollBy(1, true); seems broken for me on RN 0.61.4.

Here's my swiper view in render():

<Swiper 
        ref={ref => (this.swiperRef = ref)}
        style={styles.wrapper} 
        showsButtons={false} 
        bounces={true} 
        loop={false} 
        keyboardShouldPersistTaps={'handled'}>
          <ScrollView 
          nestedScrollEnabled={true} ref={ref => {this.scrollView = ref}}
          onContentSizeChange={() => this.scrollView.scrollToEnd({animated: true})}
          >
            <Text
              selectable={true}
              style={{ alignSelf: "center", paddingTop: 15, color: "white" }}
            >
              {this.renderText()}
            </Text>
          </ScrollView>
          {
            (this.state.chatPath) &&
            <View style={styles.slide2}>
              <ChatScreen chatPath={this.state.chatPath} />
            </View>
          }
        </Swiper>

Any idea what could be wrong/any extra information I could provide?
Thanks!

[rodgomesc]

ms broken for me on
@zaptrem

try:

const swiperRef = useRef(null)
....
....
<Swiper
   ref={swiperRef}
....
....
onPress={() => swiperRef.current.scrollBy(1, true)