leecade / leecade/react-native-swiper
Paging issue when active state change and scroll disabled
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 10.5k
- Forks
- 2.3k
- PR merge metrics
- No merged PRs in 30d
Description
Which OS ?
Android, iOS
Version
- react-native-swiper v1.6.0-rc.3
- react-native v0.61.5
Expected behaviour
Switch to next page when state changes
Actual behaviour
Its not switching when state changes only paging indicator switch to next
How to reproduce it>
//any where in class
_setDataOnState = (index) => {
this.setState({
activeIndex: index+1,
});
};
//in render
<Swiper
ref={ref => (this.swiper = ref)}
loop={false}
style={styles.wrapper}
showsButtons={false}
scrollEnabled={false}
pagingEnabled={false}
index={this.state.activeIndex}
dot={
<View
style={[
styles.activeDot,
{backgroundColor: Colors.secondary.gray},
]}
/>
}
activeDot={<View style={styles.activeDot} />}>
<WelcomeSlide1 onNext={this._setDataOnState} />
<WelcomeSlide2 onNext={this._setDataOnState} />
<WelcomeSlide3 onNext={this._setDataOnState} />
</Swiper>
Steps to reproduce
- Add this above example in your project, just change disable scrollEnabled, pagingEnabled, loop.
- create a button for manually going to next screen
- on button, just change state of active index by props.
for temp fix, i just took ref of component and use scrollBy(1) for the time
this.swiper.scrollBy(1);
//another code level issue :
initState called 2 times in android
UNSAFE_componentWillReceiveProps // not recommended to use as its unsafe so remove this in both platform
componentDidUpdate
make it one time update either in one of them.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the supplied minimal reproduction using index, scrollEnabled={false}, and pagingEnabled={false}, then inspect how prop updates are handled around UNSAFE_componentWillReceiveProps and componentDidUpdate. Verify that a state change moves the page rather than only the indicator, and check whether initState is invoked twice on Android; completion should cover the reported update behavior without relying on scrollBy(1).
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100