React-native-swiper: setState inside onMomentumScrollEnd

[JonathanWi]

Using this.setState inside onMomentumScrollEnd scroll back to the first slide.

Any idea on why this happens?

Cheers

[leecade]

show me some code thanks

[jadsonlourenco]

EDIT: No, this not solve, sorry!

Yes I get same issue. When we use onMomentumScrollEnd to handle a new state on our component the slider back to the first slide.

I solve this using the addons.update from React:

import React, { addons, ... } from 'react-native';

_handleWhenScrollEnd(event, state, context) {
  this.setState({
    myState: addons.update(this.state.myState, {$set: true}),
  });
}

[leijing7]

jadsonlourenco, your way doesn't work.

I think the setState method makes the whole view redrawed, like refreshed the page, so it goes back to the first page.

React supposes to update only the changed part, but somehow it updated the swiper as well.

[jadsonlourenco]

@leijing7 yes man, I EDIT my message.

I don't know the problem, I back to old version for now.

[leijing7]

When you press the text in the second page, the swiper will go back to the first page.

var Swiper = require('react-native-swiper')
// es6
// import Swiper from 'react-native-swiper'

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  TouchableOpacity,
  Text,
  View,
} = React;

var styles = StyleSheet.create({
  wrapper: {
  },
   slide1: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#9DD6EB',
  },
   slide2: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#97CAE5',
  },
   slide3: {
    flex: 1,
    justifyContent: 'center',
   alignItems: 'center',
    backgroundColor: '#92BBD9',
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold',
  }
})

var swiper = React.createClass({
  getInitialState(){
    return {
      i: 1
    }
   },
  _onMomentumScrollEnd(e, state, context){
  },
  _onPressed(){
     this.setState({
      i:3
    })
  },
  render: function() {
     return (
       <Swiper style={styles.wrapper}
    showsButtons={true}
    onMomentumScrollEnd ={this._onMomentumScrollEnd} >
    <View style={styles.slide1}>
      <Text style={styles.text}>Hello Swiper {this.state.i}</Text>
         </View>
         <View style={styles.slide2}>
           <TouchableOpacity onPress={this._onPressed}>
             <Text style={styles.text}>Beautiful {this.state.i}</Text>
          </TouchableOpacity>
          </View>
          <View style={styles.slide3}>
          <Text style={styles.text}>And simple {this.state.i}</Text>
        </View>
      </Swiper>
    )
  }
})

AppRegistry.registerComponent('example', () => swiper)

[leijing7]

I commented out this.setState(this.initState(props)) at line 174 in the componentWillReceiveProps function. Now it is ok.

This is because it inits states again in receive props. So every time any other place got updated, this component would receive default states again, so it updated as well.

[jadsonlourenco]

@leijing7 is right, this line: https://github.com/leecade/react-native-swiper/blob/master/src/index.js#L174 is the problem, Thank you!
I don't know what the function initState does (https://github.com/leecade/react-native-swiper/blob/master/src/index.js#L181) getDefaultProps do not.

[leijing7]

Actually

this.setState(this.initState(props)) 

is very useful.

It's to set the default slide you want when you open the slides. eg:

<Swiper index={7}/> 

This will start the slide from page 7. But the default is 0.
I have closed my pr.

[alizbazar]

I'm facing the same issue: every time updating the state the swiper jumps to the initial view.

@leecade Can you comment if https://github.com/leecade/react-native-swiper/issues/55#issuecomment-168791106 is the right way to fix this? If so could this be fixed in master?

[ChangJoo-Park]

+1,
I use swiper for first app guide,
How do I access component's state in my _onMomentumScrollEnd?

[TofunmiKupoluyi]

Know it's late but to help anyone else having the same issue as @ChangJoo-Park, in your constructor add this._onMomentumScrollEnd = this._onMomentumScrollEnd.bind(this) to your constructor. React does not automatically bind this to user-created functions in ES6.

[cobra0901]

@TofunmiKupoluyi
Perfect!!!!!!!!