React-native-swiper: Keep current page index when changing state?

Created on 14 Jan 2016  路  11Comments  路  Source: leecade/react-native-swiper

I'm using Swiper and on the second page there is a textinput. When the user changes the text in the textinput I call setState() to update the state with the changes. The problem is, when the state reloads, Swipe automatically shows the first page not the second page. I've tried to set the index prop on Swipe but it doesn't seem to work correctly. Any way to keep the current page when updating the state?

<TextInput
    onChangeText={(name) => {this.setState({name})}}
    value={this.state.name} />

Most helpful comment

my way might not work for your use cases but this is what i did. i set a state variable in my constructor:
this.state = { someOtherStuff: 2, cameraIndex: 1 };
set the index in the swiper to this variable
index={this.state.cameraIndex}
then when i change the state, i make sure to set this state variable
self.setState({someOtherStuff: val, cameraIndex: 0})
feels a bit hacky but its working for me for now

All 11 comments

Yes, would greatly appreciate this feature as well.

I'm having this problem too

I had this issue too, but keeping track of the active index using onMomentumScrollEnd and passing the index prop worked for me. Probably not the best default behaviour either way though, as it is not really a controlled component.

@deanmcpherson Do you mind sharing your method? I'm trying the same thing, but since I use setState in my onMomentumScrollEnd, I end up with sliding not working anymore, since when onMomentumScrollEnd is called, the state is refreshed.

Thanks

my way might not work for your use cases but this is what i did. i set a state variable in my constructor:
this.state = { someOtherStuff: 2, cameraIndex: 1 };
set the index in the swiper to this variable
index={this.state.cameraIndex}
then when i change the state, i make sure to set this state variable
self.setState({someOtherStuff: val, cameraIndex: 0})
feels a bit hacky but its working for me for now

Having the same problem, with the same exact scenario. This only started happening for me upon upgrading to 0.19, on 0.14 the state change didn't reset the swiper. @wgormley's solution seems to work - I store the current page I got from onMomentumScrollEnd in this.state.index and set it in the <Swiper index={this.state.index} ...>

solutions above work. Would love for this to be a prop / default behavior.

+1

I think it's caused by this line of code. Basically, whenever the parent is re-rendered, the initial props get passed back in via componentWillReceiveProps(), which causes the Swiper to reset its state to the initial props.

Changing this behavior should be as simple as removing componentWillReceiveProps(). I don't know the original intention of this change. @leecade?

now I use _onMomentumScrollEnd(e, state, context) reset current index, it works.

regards.

@wgormley That works, thank you. Feels hacky for sure (not your fault :D )

Was this page helpful?
0 / 5 - 0 ratings

Related issues

gwhite-dayspring picture gwhite-dayspring  路  3Comments

ruben-kasaz picture ruben-kasaz  路  3Comments

hadrienbbt picture hadrienbbt  路  3Comments

diegolmello picture diegolmello  路  3Comments

nomoreboredom picture nomoreboredom  路  3Comments