Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

On iOS - ScrollView scrollTo not working with 3 carousel pages #286

Open
m00gl3 opened this issue Apr 15, 2019 · 0 comments
Open

On iOS - ScrollView scrollTo not working with 3 carousel pages #286

m00gl3 opened this issue Apr 15, 2019 · 0 comments

Comments

@m00gl3
Copy link

m00gl3 commented Apr 15, 2019

iPhone 6s simulator
react-native 0.57.7
react-native-looped-carousel 0.1.13

I am using the carousel to add ability to swipe left/right in a Calendar application.

So I'm doing something like

<Carousel 
    autoplay={false}
    isLooped
    currentPage={this.currentPage}
    onAnimateNextPage={(p) => {
                  if ((this.currentPage == 0 && p == 2) || 
                       (this.currentPage == 1 && p == 0) || 
                       (this.currentPage == 2 && p == 1))
                        {
                            this.currentPage = p;
                            this.changeAgendaDay(Platform.OS === "ios" ? false : true)
                        }
                        else if ((this.currentPage == 2 && p == 0) || 
                                    (this.currentPage == 0 && p == 1)  || 
                                    (this.currentPage == 1 && p == 2))
                        {
                            this.currentPage = p;
                            this.changeAgendaDay(Platform.OS === "ios" ? true : false)
                        }
                    }} >
     {this.renderSwipeView(0)}
     {this.renderSwipeView(1)}
     {this.renderSwipeView(2)}
</Carousel>

The agenda is a ScrollView.
I only draw the ScrollView / Agenda on the current page the user is on.
So when "this.currentPage == index" I draw the Agenda list.

<ScrollView
      ref={c => this.scrollPad = c}
      scrollEventThrottle={16}
      style={{  flex: 1, paddingTop: 5 }} >

      {this._renderEvents()}

</ScrollView>

Screen Shot 2019-04-15 at 16 51 40

Initially, the agenda is drawn on index = 1. So index = 0 and index = 2 I draw an empty page with an image.

My Issue:
I am doing a "scrollTo" on the initial page (Today) to scroll to current hour like this:

this.scrollPad.scrollTo({x: 0, y: newIndex * ITEM_HEIGHT})

This works PERFECTLY on Android.
However, on iOS it does not work when index = 1 (it does nothing).

If I swipe to the next day (index = 2) or prev day (index = 0) the scrolling works.

More Information:
Remember, there are 3 views inside the carousel indexed 0, 1, 2

  1. The app starts looking at index = 1 where you see the agenda.
    ScrollTo doesn't work here.
  2. I swipe left to go to the next day. index = 2. scrollTo works(!)
  3. I swipe left again to go to next day, index = 0 (carousel is looped so we go back to first view). scrollTo works(!)
  4. I swipe left again to go to next day. index = 1. scrollTo DOES NOT work here.
  5. Swipe left again, index = 2. scrollTo works(!)

Was this fixed in any pull request? Am I missing something?
Could this be because the Carousel uses a ScrollView and I place another ScrollView inside that?
How come it works on the "outside" indexes (0, 2) and not on the middle view (index = 1) ??

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

No branches or pull requests

1 participant