react-native-swiper strange behaviour

Question

In my application, I use the react-native-swiper component. Initially it worked properly, but recently it has a strange behaviour. It has 5 windows and it swipes like this. 5-1-2-3-4-5-1

it swipes 7 times and the items are like this. starts from the first one. I can swipe left once. Swipe right 5 times. Thats all.

How can I solve this issue? I use the version 1.5.6

import React from "react";
import { Dimensions } from "react-native";
import Swiper from "react-native-swiper";
import SwiperWindow from "../SwiperWindow/SwiperWindow";

const height = Dimensions.get("window").height * 0.3;

const swiperContainer = props => (
  <Swiper height={height} 
    showsButtons={true}
    showsPagination={false}>

    {props.featuredWorkouts.map(featuredWorkout => {
      return(
      <SwiperWindow
        key={featuredWorkout.featuredWorkoutId}
        imageSource={featuredWorkout.postImage}
        workoutTitle={featuredWorkout.title}
      />)
    })}
  </Swiper>
);

export default swiperContainer;

Have you verified that your `featuredWorkouts` prop has only 5 elements? — sunw, Jun 14 '18 at 18:09
Also it might help if you add the `loop={false}` prop to your `Swiper` component. — sunw, Jun 14 '18 at 18:09
yes, it has 5 featuredWorkouts. I also tried the loop prop :( — Shashika Virajh, Jun 15 '18 at 05:49
Strange. It might be a bug -- file an issue on the react-native-swiper GitHub repo. — sunw, Jun 15 '18 at 06:00

score 0 · Answer 1 · edited Aug 06 '18 at 09:07

From this thread, https://github.com/leecade/react-native-swiper/issues/569,

It seems this problem could be solved by,

I observed that if call setState in parent component, componentWillReceiveProps of the swiper component gets triggered, and nextProps is exactly as the same as props of current swiper component. And further setState and initState of the swiper component get called, so the swiper state gets messed up.

I temporarily added if (nextProps.index === this.props.index) return; in componentWillReceiveProps to solve this issue.

and this solution is provided by HuiSF in this thread.

score 0 · Answer 2 · edited Mar 15 '21 at 04:36

0

add key={allPins.length}. inside the Swiper as below and it worked for me

<Swiperkey={allPins.length}}>
</Swiper>

allPins.length here is nothing but dynamicArray.length.

edited Mar 15 '21 at 04:36

Suraj Rao

29,388
11
94
103

answered Mar 15 '21 at 04:17

satish

157
1
2

allPins.length here is nothing but dynamicArray.length – satish Mar 15 '21 at 04:19
Please use [edit] link below your post to add changes instead of adding in comments. – Suraj Rao Mar 15 '21 at 04:37

score 0 · Answer 3 · answered Mar 29 '22 at 19:28

0

loop={false} will solve this as i had the same issue

there is a bug in swiper component when setting loop to true ,since there must me a "starting slide" prop

answered Mar 29 '22 at 19:28

Ahmad Dawood

25
5

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 30 '22 at 02:28

react-native-swiper strange behaviour

3 Answers3