Pull To Refresh/ Swipe Refresh only works in Lazy Column/ Row - Jetpack compose

Question

I am working on Project and this issue came up.

In Home screen I have some elements (Some rows occupying 60% of screen). Then a lazy column. I have tried both Pull To Refresh/ Swipe Refresh, not working on those 60% of the screen and only listens to swipe behavior on the Lazy items. Any solution? reference:

  val pullRefreshState = rememberPullRefreshState(
        refreshing = isLoading,
        onRefresh = viewModel::getAllAssetsValue
    )

    Box(
        modifier = modifier
            .fillMaxSize()
            .pullRefresh(pullRefreshState)
    ) {

     // Rows and Columns 

       .................
        
            PullRefreshIndicator(
                refreshing = isLoading,
                state = pullRefreshState,
                modifier = Modifier.align(Alignment.TopCenter)
            )
 
   }
         

Answer 1

You can solve this by applying Modifier.verticalScroll(rememberScrollState()) onto the other Composable besides the LazyColumn. Also, you can simply use the predefined PullToRefreshBox Composable directly.

Please have a look at the following example:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SimpleInversePullRefresh() {

    var isLoading by remember { mutableStateOf(false) }
    val pullToRefreshState = rememberPullToRefreshState()

    LaunchedEffect(isLoading) {
        if (isLoading) {
            delay(1000)
            isLoading = false
        }
    }

    PullToRefreshBox(
        modifier = Modifier.fillMaxSize(),
        state = pullToRefreshState,
        isRefreshing = isLoading,
        onRefresh = { isLoading = true }
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
        ) {
            Column(
                modifier = Modifier
            ) {
                repeat(15) {
                    Text("non-scrollable content")
                }
            }
            LazyColumn(
                modifier = Modifier.weight(1f)
            ) {
                items(50) {
                    Text(
                        modifier = Modifier.fillMaxWidth(),
                        text = "ITEM $it"
                    )
                }
            }
        }
    }
}

Output:

Note:

The refresh indicator will always appear when you start swiping on top of the non-scrollable content, but when swiping on theLazyColumn, it will only appear when the LazyColumn is scrolled to the top.