Skip to content
This repository has been archived by the owner on May 29, 2020. It is now read-only.

Dot Page indicator not working. #9

Open
msameerbm opened this issue Apr 7, 2018 · 2 comments
Open

Dot Page indicator not working. #9

msameerbm opened this issue Apr 7, 2018 · 2 comments

Comments

@msameerbm
Copy link

If i click, the arrow button on left and right slider will work correctly and also the bullet dot page indicators changing correctly, but if i swipe via hands to next slide, The paging dot indicators does not changes.

@alexpopa-work
Copy link

I had to change the component to make it work.
To scroll as a slider when dragging (currently you can scroll the images partially) I had to add pagingEnabled to the ScrollView component.

Secondly, when the scroll is finished I had to update the bullets (the thing you were asking for).
For this I added two handlers for the ScrollView:

   onScrollEndDrag={this.onScrollCustom}
   onMomentumScrollEnd={this.onScrollCustom}

And now the magic:

onScrollCustom = (e) =>{
    let contentOffset = e.nativeEvent.contentOffset;
    let viewSize = e.nativeEvent.layoutMeasurement;
    let pageNum = Math.floor(contentOffset.x / viewSize.width);
    console.log('New page ', pageNum);
    this.setState({position: pageNum});
  }

We need to calculate the current slide in order to update correctly the active bullet.

That's it!
I know the solution is workaround-ish, but the component needs some polishing.
The changes were made to a local component, to avoid overriding the changes by an eventual update.

@hdmonster
Copy link

Where should I put "onScrollCustom" function?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants