Android paging block until going one page back

I have a 4 page carousel. Sometimes, not always, on Android, when I try going forward, I get stuck after the 2nd page. only when I go back one step, and then forward again, I can go more step forward. Also I get weird inconsistent jumps with the animation.

Here’s how it looks:

my code:

<Carousel
                    style={carouselStyle.carousel}
                    chosenBulletStyle={carouselStyle.chosenBullet}
                    bulletStyle={carouselStyle.bullet}
                    autoplay={false}
                    bullets={true}
                    pageInfo={false}
                    onAnimateNextPage={(p) => this.pageChange(p)}
                >
                    <FCarouselItem title={strings.tutorial.content[0].title} text={strings.tutorial.content[0].text} image={icons.logo_with_text}/>
                    <FCarouselItem style={{backgroundColor:FetchyColors.primaryColorAlpha}} title={strings.tutorial.content[1].title} text={strings.tutorial.content[1].text} image={icons.tutorial_fab_screen}/>
                    <FCarouselItem style={{backgroundColor:FetchyColors.primaryColorAlpha}} title={strings.tutorial.content[2].title} text={strings.tutorial.content[2].text} image={icons.delivery_add_screen}/>
                    <FCarouselItem style={{backgroundColor:FetchyColors.primaryColorAlpha}} title={strings.tutorial.content[3].title} text={strings.tutorial.content[3].text} image={icons.trip_add_screen}/>
                </Carousel>

this.pageChange(p) changes the bottom text with setState for the parent component, but even without this - the bug still occurs

[techrah]

After further investigation, it seems like this might be a core bug. I’m working exclusively with Android at the moment, so I’m guessing that this is in the ScrollView control on the Java side.

Let’s say we have 4 pages, page 0 to page 3 (last page). Two additional pages will be created, page 4 = page 0, and page 5 = page 1.

If your initial page is page 0, a non-animated scroll will move you to page 4, allowing you to swipe left (to last page) or right (to page 5 == page 1).

If you then swipe right, you will move to page 5 (==page 1), then after the scroll has completed, a non-animated scroll will move you to page 1, again allowing you to scroll left (to page 0) or right (to page 2).

If you then swipe left, you will move to page 0, then after the scroll has completed, a non-animated scroll will move you to page 4 (==page 0).

In the last two scenarios above, the _scrollTo function is called to do this non-animated scroll. If you perform an animated scroll just after the non-animated scroll, this “fixes” the issue.

  _scrollTo = (offset, animated) => {
    if (this.scrollView) {
      this.scrollView.scrollTo({ y: 0, x: offset, animated });
      this.scrollView.scrollTo({ y: 0, x: offset, animated: true });
    }
  }

It should be noted that this issue also occurs (albeit less frequently) when sliding left to page 0 (as described in the swipe left above). I will dig around on the Java side and see if I can find anything there.

[techrah]

@ammichael @DeDuckProject @Clowning I’ve not been able to determine yet if this is fixable on the Java side. I managed to track down this piece of code in node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java:

public void scrollTo(
    ReactScrollView scrollView,
    ReactScrollViewCommandHelper.ScrollToCommandData data) {
  if (data.mAnimated) {
    scrollView.smoothScrollTo(data.mDestX, data.mDestY);
  } else {
    scrollView.scrollTo(data.mDestX, data.mDestY);
  }
}

ReactScrollView is defined in ReactScrollView.java (same directory) and extends android.widget.ScrollView so I don’t know that there’s much, if anything, that can be done.

In any case, the workaround so far seems to be holding up well. I see anders-g-hansen adopted the change in a fork. I may be submitting a PR soon with some changes that includes this fix too.

Cheers!