Accompanist Pager animateScrollToPage doesn't scroll to next page correctly

Question

Using accompanist-pager version 0.25.1, animateScrollToPage() doesn't seem to scroll all the way to make the next page fully visible, the previous page is still shown. The non animated version scrollToPage() seems to work fine however. Am I missing some additional params ?

@ExperimentalPagerApi
@Composable
fun MyPager() {
    val pagerState = rememberPagerState()
    HorizontalPager(
        count = 10,
        state = pagerState
    ) { pagerIndex ->
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(150.dp)
                .background(if (pagerIndex.mod(2) == 0) Color.Cyan else Color.Red)
        )
    }
    with(pagerState) {
        LaunchedEffect(key1 = currentPage) {
            launch {
                delay(10000)
                animateScrollToPage(
                    page = (currentPage + 1).mod(pageCount)
                )
            }
        }
    }
}

There is some issue with latest version of accompanist-pager 0.25.1. Works fine with 0.24.1-alpha and below versions. — Nikhil Dupally, Sep 14 '22 at 09:32
I 've tried 0.23.1 and 0.24.1-alpha versions and it seems that this thing does not work — Vaios, Oct 25 '22 at 11:02

score 9 · Answer 1 · answered Nov 01 '22 at 16:21

The problem is that the pagerState updates before the animation ends. To fix this provide another key

var key by remember { mutableStateOf(flase) }

LaunchedEffect(key1 = key) {
    launch {
        delay(2000)
        with(pagerState) {
            val target = if (currentPage < pageCount - 1) currentPage + 1 else 0
            animateScrollToPage(page = target) //Broken
            key = !key
        }
    }
}

score 3 · Answer 2 · answered Sep 14 '22 at 09:11

3

I also had the same problem,In the end I chose to roll back the version of accompanist-pager to 0.24.1-alpha.

answered Sep 14 '22 at 09:11

李嘉伟

31
1

score 2 · Answer 3 · answered Jan 31 '23 at 14:14

Referencing the above answer, it work fine in 0.29.0-alpha with code below

    with(pagerState) {
        if (pageCount > 0) {
            var key by remember { mutableStateOf(0) }
            LaunchedEffect(key1 = key) {
                launch {
                    delay(5000)
                    val nextPage = (currentPage + 1).mod(pageCount)
                    animateScrollToPage(
                        page = nextPage
                    )
                    key = nextPage
                }
            }
        }
    }

score 1 · Answer 4 · answered Jun 23 '23 at 20:11

I took the previous answers and created a composable to handle this:

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CarouselAutoPlayHandler(
    pagerState: PagerState,
    carouselSize: Int
) {
    var pageKey by remember { mutableStateOf(0) }

    val effectFlow = rememberFlowWithLifecycle(pagerState.interactionSource.interactions)

    LaunchedEffect(effectFlow) {
        effectFlow.collectLatest {
            if (it is DragInteraction.Stop) pageKey++
        }
    }

    LaunchedEffect(pageKey) {
        delay(5000)
        val newPage = (pagerState.currentPage + 1) % carouselSize
        pagerState.animateScrollToPage(newPage)
        pageKey++
    }
}

Explanation:

Pass the pager state and the amount of items
Create a new key and set the initial value as 0 (the value here doesn't matter)
Remember the flow returned from the interactions property in the pager state (You can find the implementation in this article I wrote)
Collect the flow and whenever there's a drag stop, add 1 to the page key so the LaunchedEffect below is restarted
In another LaunchedEffect set the pageKey as the key, add whatever your delay is and after that add the logic to scroll to the next page and change the pageKey to restart the LaunchedEffect once again

The code in the first LaunchedEffect will restart the time whenever the user manually drags the carousel.

You can pass the delay value as a variable, just kept it there hardcoded for the example.

Accompanist Pager animateScrollToPage doesn't scroll to next page correctly

4 Answers4