setState inside onMomentumScrollEnd about react-native-swiper HOT 12 OPEN

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.

from react-native-swiper.

show me some code thanks

from react-native-swiper.

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}),
  });
}

from react-native-swiper.

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.

from react-native-swiper.

@leijing7 yes man, I EDIT my message.

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

from react-native-swiper.

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)

from react-native-swiper.

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.

from react-native-swiper.

@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.

from react-native-swiper.

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.

from react-native-swiper.

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

@leecade Can you comment if #55 (comment) is the right way to fix this? If so could this be fixed in master?

from react-native-swiper.

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

from react-native-swiper.

@TofunmiKupoluyi
Perfect!!!!!!!!

from react-native-swiper.