Hey , Stuck on problem with ViewPager. Trying to create view like Reels (instagram/youtube/tiktok). ...

# compose

[Paweł Cyroń]

Hey ,
Stuck on problem with ViewPager. Trying to create view like Reels (instagram/youtube/tiktok).
currentPage is awful and get triggered way to often so I have made my own implementation. yet LaunchedEffect are called too often (not only when value is changed). I’m suspecting ViewPager issue in compose. Code in thread

[Paweł Cyroń]

@Composable
    private fun VideoReelPager(action: (VideoReelAction) -> Unit, videos: List<VideoReelEntity>) {
        val pagerState = rememberPagerState()
        val currentPageInPager = remember { mutableStateOf(0) }
        LaunchedEffect(pagerState.currentPageOffset) {
            if (pagerState.currentPageOffset.absoluteValue < 0.1 && currentPageInPager.value != pagerState.currentPage) {
                Timber.e("Reel set page ${pagerState.currentPage}")
                currentPageInPager.value = pagerState.currentPage
            }
        }
        Box() {
            VerticalPager(
                count = videos.size,
                state = pagerState,
                modifier = Modifier.fillMaxSize()
            ) { pageIndex ->
                VideoReelPage(
                    item = videos[pageIndex],
                    positionInPager = pageIndex,
                    currentIndexInPager = currentPageInPager,
                    pagerState = pagerState
                )
            }
       }
    }
}

Then a Page itself

@Composable
fun PagerScope.VideoReelPage(
    item: VideoReelEntity,
    positionInPager: Int,
    currentIndexInPager: MutableState<Int>,
    pagerState: PagerState
) {
 LaunchedEffect(currentIndexInPager.value) {
//This is called often, even when no new value on currentIndexInPager, small fling and it's called
}
}

[Paweł Cyroń]

Thank you so much in advance

[Daniele Segato]

Are you sure the "triggered way too often" issue isn't caused by List? this is considered unstable by compose by default. You can use kotlin ImmutableList library to check if this is the case

[Paweł Cyroń]

What do you mean by list? @Daniele Segato
To often means that launched effect triggers when nothing was emitted. Probably pages changing states within viewpager

[Daniele Segato]

I suggest you watch this talk (20 minutes)

https://www.youtube.com/watch?v=ahXLwg2JYpc▾

It talks about list at around 12 minutes but you need the previous part to understand what he's talking about unless you do not already know

[Paweł Cyroń]

i’ve asked because there is no lists other than dataset for viewPager and it’s called once

[Paweł Cyroń]

It’s a ViewPager issue or a page inside that I cannot find solution for 😞

[Daniele Segato]

That's the list i'm talking about. And that's exactly not what is going on. Please watch the video, it will be clear 🙂

[Daniele Segato]

I'll explain here briefly, but watch the video please.

Recomposition is when your Composable is re-executed. Composables in your code can be re-executed partially and in different order.

The Compose compiler perform some code investigation to assign each composable some properties: one of those is skippability: If all parameters are considered stable than the composable is considered skippable.

If at least 1 parameter is unstable the composable is not skippable, and this means that will recompose and re-execute at every change.

List <--- the interface is considered UNSTABLE. So any composable receiving and using List will be considered unskippable.

Furthermore you might want to use viewpager keys for each page