react-nativereact-native-swiper

I am using react-native-swiper-flatlist , but I cannot figure it out how to use scrollToIndex on button press


I am using react-native-swiper-flatlist , I want to scroll forward to some index by tapping button but no clue how to do it. Although I am very beginner to react native development.

I have searched alot but nothing helps, I get an error of undefined is not an object this2.swiper.scrollToIndex'

render() {
return (
  <View style={styles.container}>
    <SwiperFlatList
      ref={swiper => {
        this.swiper = swiper;
      }}
      data={[
        { key: "a" },
        { key: "b" },
        { key: "c" },
        { key: "d" },
        { key: "e" }
      ]}
      index={0}
      renderItem={({ item, index }) => (
        <View>
          <Image
            style={styles.child}
            source={require("../../assets/advertisementtwo.png")}
          />
          <Image
            style={styles.child}
            source={require("../../assets/advertisementtwo.png")}
          />
          <Image
            style={styles.child}
            source={require("../../assets/advertisementtwo.png")}
          />
          <Image
            style={styles.child}
            source={require("../../assets/advertisementtwo.png")}
          />
          <Button
            title={"Next"}
            onPress={this.swiper.scrollToIndex(1, true)}
            style={{ backgroundColor: "white" }}
          />
        </View>
      )}
    />
  </View>
);

}

Should swipe on button click

Here is the screenshot of the error I am getting


Solution

  • Try adding ref='swiper' as a SwiperFlatList prop,

    Example

    <SwiperFlatList ref='swiper'/>
    

    this.refs.swiper._scrollToIndex(2)