leecade / leecade/react-native-swiper

Paging issue when active state change and scroll disabled

Open
#1,131 5 comments 1 reaction 0 assignees View on GitHub

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
  1. Add this above example in your project, just change disable scrollEnabled, pagingEnabled, loop.
  2. create a button for manually going to next screen
  3. 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.