user21300258
user21300258

Reputation:

HorizontalPager goes for infinite recomposition

I have issue with HorizontalPager.

My pseudo code looks like this:

Column {
   TabsRow {
      ScrollableTabsRow{}
   }
   Horizontal Pager {
      Column {
         SubCategories { ScrollableHorizontalTabsRow or LazyHorizontalStaggeredGrid() }
         ProductsContent { LazyColumn {} } 
      } 
   }
}

So imagine it is:
Category Tabs (one row)
SubCategories (one row or multiple rows)
Products
@Composable
fun ComposableContent() {
  val categories = state.categories
    val pagerState = rememberPagerState(
        initialPage = initialPage
    )

    BaseCategoriesTabRow(
        state = pagerState,
        categories = categories,
    )

    Spacer(
        modifier = Modifier
            .height(10.dp)
            .fillMaxWidth()
            .background(Color.White)
    )

    HorizontalPager(
        state = pagerState,
        pageCount = categories.size
    ) { page ->
        val listState = rememberLazyListState()
        val isSelected = pagerState.currentPage == page
        categories.getOrNull(pagerState.currentPage)?.let { categoryItem ->
            val showItemsInOneRow = remember {
                derivedStateOf {
                    listState.firstVisibleItemIndex > 1 || categoryItem.subCategories.size < SUBCATEGORIES_ROW_TWO_MIN
                }
            }
                Log.d("horizontalagertest", "PAGE: ${page} + CURRENTPAGE: ${pagerState.currentPage}")
      //      if (isSelected) { -> my workaround to disable massive recomposition
                Column {
                    if (categoryItem.subCategories.size > 1) {
                        SubCategoriesTabRow(
                            state = listState,
                            showItemsInOneRow = showItemsInOneRow.value,
                            events = events,
                            category = categoryItem,
                            rows = constRowQuantity,
                            initialSubCategoryId = initialSubCategoryId
                        ) {
                            events.invoke(CategoryEvent.InitialSubcategoryHandled)
                        }
                       }
               //     }

Sometimes it works for some tabs, but sometimes after changing tabs using horizontal pager it start infinite recompositions with logs like:

PAGE: 5, CURRENTPAGE: 5
PAGE: 6, CURRENTPAGE: 5
PAGE: 4, CURRENTPAGE: 5
PAGE: 6, CURRENTPAGE: 5
PAGE: 5, CURRENTPAGE: 5
PAGE: 4, CURRENTPAGE: 5
PAGE: 5, CURRENTPAGE: 5
PAGE: 6, CURRENTPAGE: 5
PAGE: 4, CURRENTPAGE: 5
PAGE: 6, CURRENTPAGE: 5
PAGE: 5, CURRENTPAGE: 5
PAGE: 4, CURRENTPAGE: 5

I have written workaround instead of page I use current.page which is always correct and using boolean isSelected but then it destroys animation between pages...

At the beginning I was using accompanist, then migrate to compose foundation last release 1.6.0. And it stills run like this.

Thanks for any advice or alternative to Horizontal Pager that could works.

Upvotes: 0

Views: 790

Answers (0)

Related Questions