react-native-looped-carousel icon indicating copy to clipboard operation
react-native-looped-carousel copied to clipboard

On iOS - ScrollView scrollTo not working with 3 carousel pages

Open m00gl3 opened this issue 6 years ago • 0 comments

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

m00gl3 avatar Apr 15 '19 13:04 m00gl3