Pages are not scrolling properly and fully

[anilkumarreddyvskub]

Hi I need some help, I am facing an issue, while scrolling content. on every other page either content does not gets scroll completly or scroll does not work. I am pasting code that i am using, can you please check.

`@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter") @OptIn(ExperimentalPageCurlApi::class, ExperimentalMaterial3Api::class) @Composable fun PageCurlScreen(modifier: Modifier = Modifier, onBackClick: () -> Unit) { val state = rememberPageCurlState() val config = rememberPageCurlConfig( onCustomTap = { size, position -> // Detect tap somewhere in the center with 64 radius and show popup if ((position - size.center.toOffset()).getDistance() < 64.dp.toPx()) { true } else { false } } )

val rememberScroll = rememberScrollState()

PageCurl(
    count = stories.size,
    state = state,
    config = config,
) { index ->

    Surface {
        Scaffold(
            // ... your TopAppBarcode ...
        ) { innerPadding ->
            Box(
                modifier = modifier
                    .fillMaxSize()
                    .padding(innerPadding)
            ) {
                Column(
                    modifier = modifier
                        .fillMaxSize() // Allow Column to fill available space
                        .verticalScroll(rememberScroll)
                ) {
                    Text(
                        text = stories[index].title,
                        style = baseline.titleLarge,
                        modifier = Modifier.padding(16.dp) // Add padding around title
                    )

                    Image(
                        painter = stories[index].image,
                        contentDescription = "Image",
                        modifier = Modifier
                            .fillMaxWidth() // Make image take full width
                            .height(200.dp) // Set a fixed height for the image
                    )

                    Text(
                        text = stories[index].story,
                        style = baseline.bodyLarge,
                        textAlign = TextAlign.Justify,
                        modifier = Modifier.padding(16.dp) // Add padding around story text
                    )

                    Text(
                        text = stories[index].story,
                        style = baseline.bodyLarge,
                        textAlign = TextAlign.Justify,
                        modifier = Modifier.padding(16.dp) // Add padding around story text
                    )

                    Text(
                        text = stories[index].story,
                        style = baseline.bodyLarge,
                        textAlign = TextAlign.Justify,
                        modifier = Modifier.padding(16.dp) // Add padding around story text
                    )
                }

                Text(
                    text = index.toString(),
                    color = MaterialTheme.colorScheme.onPrimary,
                    modifier = Modifier
                        .align(Alignment.BottomEnd)
                        .background(
                            color = MaterialTheme.colorScheme.primary,
                            shape = RoundedCornerShape(topStartPercent = 100)
                        )
                        .padding(16.dp)
                )
            }
        }
    }
}

}`

[anilkumarreddyvskub]

Uploaded screen shot on drive, have a look for better understanding 0th and 1st page scrolls fine but 2nd and 3rd page did not scrolled completely https://drive.google.com/file/d/1BA4Q7yJCchnTg0Qjr8dNqk0WDQsO6Wjh/view?usp=sharing

[oleksandrbalan]

Hi 👋

Looks like you are using a shared scroll state for each page and it causes those issues.

I guess you should do something like this:

Instead of one scroll state, create a map with scroll states for each index. This map will be lazy-filled by a new scroll state when user visits a new page. For example like this:

// Prepare a map and use its values in "verticalScroll" modifier
val scrollStates = remember { mutableMapOf<Int, ScrollState>() }

PageCurl(
    count = stories.size,
    state = state,
    config = config,
) { index ->
   ...
    Surface {
        Scaffold(...) { innerPadding ->
            Box(...) {
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .verticalScroll(scrollStates.getOrPut(index) { ScrollState(0) })
                ) {
                    ...
                }
                ...
            }
        }
    }
}

However due to rendering logic the previous screen is always visible, and thus it intercepts scrolling logic. To stop rendering the previous page when it is not needed you may do the following:

PageCurl(
    count = stories.size,
    state = state,
    config = config,
) { index ->
    // Do not render previous screen when it is not needed
    if (state.current - 1 == index && state.progress == 0f) {
        return@PageCurl
    }

    Surface(...) { ... }
}

With these two fixes it should work correctly now. Maybe later I will handle last issue in the library, but for now simple return should do the trick for you.

[anilkumarreddyvskub]

Yes scrolling works fine now but page curl is getting strucked and not able to see it's animation. Seen delay on tap or drag

[oleksandrbalan]

Hmm 🤔 Could you please try removing the image from the content and see if it still lags?

[anilkumarreddyvskub]

Ya did that but still it lags however, seeing it as random issue