React-native-swiper: onIndexChanged this.setState({}) Loop not work

[jlemoscds]

Which OS

ios 10.3
android 6.0

Version

Which versions are you using:

• react-native-swiper v1.5.12
• react-native v0.47.2

Expected behaviour

Actual behaviour

On Android and IOS I can only swipe 1 to the left from 0 and no more (4/4). And swipe 4 to the right and no more (1/4).
The problems here is for some reason the loop brake in a strange way.
I try different things. And I found the problem is cause by this.setState in the onIndexChanged function which if I don't use it, the loop works.

How to reproduce it>

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react'
import {
  Text,
  View,
  Image,
  Dimensions,
  AppRegistry
} from 'react-native'
import Swiper from 'react-native-swiper'
const { width } = Dimensions.get('window')

const styles = {
  wrapper: {
  },
  slide: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'transparent'
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  },
  image: {
    width,
    flex: 1
  },
  paginationStyle: {
    position: 'absolute',
    bottom: 10,
    right: 10
  },
  paginationText: {
    color: 'white',
    fontSize: 20
  }
}

var imageName = './img/1.jpg';
var originalName = 'Aussie tourist dies at Bali hotel';


const renderPagination = (index, total, context) => {
  return (
    <View style={styles.paginationStyle}>
      <Text style={{ color: 'grey' }}>
        <Text style={styles.paginationText}>{index + 1}</Text>/{total}
      </Text>
    </View>
  )
}

export default class AwesomeProject extends Component {
  constructor(props) {
    super(props);
    this.state = {
      renderArray: [true, false, false, false]
    };
  }


  render() {
    return (
      <Swiper
        style={styles.wrapper}
        onIndexChanged={index => this.indexChanged(index)} 
        renderPagination={renderPagination}
        loop={true}
      >

        <View style={styles.slide} title={<Text numberOfLines={1}>{'Aussie tourist dies at Bali hotel'}</Text>}>
          {this.state.renderArray[0] ?
            <Image style={styles.image} source={require('./img/1.jpg')} />
            : null}
        </View>
        <View style={styles.slide} title={<Text numberOfLines={1}>Big lie behind Nine’s new show</Text>}>
          {this.state.renderArray[1] ?
            <Image style={styles.image} source={require('./img/2.jpg')} />
            : null}
        </View>
        <View style={styles.slide} title={<Text numberOfLines={1}>Why Stone split from Garfield</Text>}>
          {this.state.renderArray[2] ?
            <Image style={styles.image} source={require('./img/3.jpg')} />
            : null}
        </View>
        <View style={styles.slide} title={<Text numberOfLines={1}>Learn from Kim K to land that job</Text>}>
          {this.state.renderArray[3] ?
            this.renderImage4()
            : null}
        </View>
      </Swiper>
    )
  }

  renderImage4(){
    return <Image style={styles.image} source={require('./img/4.jpg')} />;

  }


  indexChanged(index) {
    var tempvar = this.state.renderArray;
    tempvar[index] = true
    this.setState({ renderArray: tempvar}); //<<======== problem with this
  }
}



AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

Steps to reproduce

1. use setState onIndexChanged and loop works weird .

[tquiroga]

Exactly the same problem for me on "react-native-swiper": "^1.5.12"

[HuiSF]

+1 the same problem.
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.

[sourcesoft]

Having the same problem but I'm actually dispatching actions. I think it's almost related to #503

  handleIndexChanged = (e, { index }) => {
    if (index === 0 || index === 2) {
      this.props.dispatch(actions.setHeadShow(false));
    } else {
      this.props.dispatch(actions.setHeadShow(true));
    }
  };

[freiserg]

@arribbar I had so probiems after this commit https://github.com/leecade/react-native-swiper/commit/1fb7ff24cf2adb3bbe2feb487e9ac88c97c603a6

I removed this code and it works.

[SirNeuman]

I'm also having this problem with version "react-native-swiper": "^1.5.13". Using redux to dispatch actions using onIndexChanged. If my component is not listening to the prop which gets updated by this action then the swiper appears to behave normally.

[sizovilya]

When planned new npm version with this fix ?

[roysG]

Still happening in version: 1.5.13
For not i added the temporary solution of @HuiSF
When it will be fixed?

[jeppe-smith]

Also having this issue. I found that using setTimeout solves the issue.

[martabacc]

hi @jeppe-smith , can I see how you implement the setTimeout part?

[EdgarXolop]

@ronayumik

...
loop={false}
onIndexChanged={(swipe_index)=>{
  setTimeout(()=>this.setState({swipe_index}),200)
}}
...

that works for me, the this.setState doesn't work with loop={true}

[martabacc]

@EdgarXolop , do you have any idea why it needs the timeout? is it the rendering part that takes too long?

[fahmidme]

For me, setting loop={false} worked.

[CVRamana]

@ronayumik

...
loop={false}
onIndexChanged={(swipe_index)=>{
  setTimeout(()=>this.setState({swipe_index}),200)
}}
...

that works for me, the this.setState doesn't work with loop={true}
it also removes the warning of componentwillreceive prop

[sebastianupr]

@arribbar I had so probiems after this commit 1fb7ff2

I removed this code and it works.

THANKSS