Skip to content

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

@m00gl3

Description

@m00gl3

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) ??

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions