I'm using accompanist pager for a horizontal pager, and I want to programatically move to the next p...

# compose

[Colton Idle]

I'm using accompanist pager for a horizontal pager, and I want to programatically move to the next page. I tried this (see what the button does onclick)

Column() {
    val pagerState = rememberPagerState(pageCount = 10)

    HorizontalPager(state = pagerState) { page ->
        Text(text = "Page: $page", modifier = Modifier.fillMaxWidth())
    }

    Button(onClick = { pagerState.animateScrollToPage(pagerState.currentPage + 1) }) {
        Text(text = "Test")
    }
}

But I get an error of Suspend function 'animateScrollToPage' should be called only from a coroutine or another suspend function
I thought it was okay to have an event like this in an onClick event since it's not happening on every recomposition?

[Kefas]

animateScrollToPage is a suspend function, need to run this from a coroutine.

val scope = rememberCoroutineScope()

scope.launch {
    pagerState.animateScrollToPage(...)\
}

[Colton Idle]

Oh. So

val scope = rememberCoroutineScope()

is just the typical/standard way to create a coroutine scope in a composable?

[Kefas]

I think so, is there any other way?

[Abhishek Dewan]

Yea that would be the right way to go about it. I think it's needed because animations in compose kinda use suspending functions

[Kefas]

At least it's really common in the library
https://cs.android.com/search?q=%22val%20scope%20%3D%20rememberCoroutineScope()%22

[Tin Tran]

scope.launch {} shouldn’t be used directly inside compose, should it?

[Kefas]

It's called on the Button's onClick lambda

[Tin Tran]

Oh! I missed that part 😄

[dimsuz]

I do it like this:

LaunchedEffect(state.currentPageIndex) {
  pagerState.animateScrollToPage(state.currentPageIndex)
}