how to implement overscroll refresh ? something l...

# compose

[Icyrockton]

how to implement overscroll refresh ? something like this

[FunkyMuse]

https://github.com/google/accompanist/tree/main/swiperefresh

[Icyrockton]

I have tried this lib.
I try to add Modifier.offset on it . but it seem recompose all the content in my LazyColumn ,which is bad performance

[Icyrockton]

I found recompose all the time is related to NavController

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Content()
                }
            }
        }
    }
}


@Composable
fun Content() {

    val navController = rememberNavController()
    val swipeRefreshState = rememberSwipeRefreshState(isRefreshing = false)

    LaunchedEffect(swipeRefreshState.isRefreshing) {
        if(swipeRefreshState.isRefreshing){
            delay(2000L)
            swipeRefreshState.isRefreshing = false
        }
    }

    SwipeRefresh(swipeRefreshState, onRefresh = { swipeRefreshState.isRefreshing = true}  , modifier = Modifier.fillMaxSize()){

        LazyColumn(modifier = Modifier
            .fillMaxSize()
            .offset(y = with(LocalDensity.current) { swipeRefreshState.indicatorOffset.toDp() })
        ){

            items((1..100).map { "text ${it}" }){
                Item(it,navController)
            }

        }
    }
}

@Composable
fun Item(data: String, navController: NavHostController) {

    Log.d(BuildConfig.APPLICATION_ID, "Item: ${data} recompose")
    Box(modifier = Modifier
        .fillMaxWidth()
        .height(80.dp)
        .padding(horizontal = 10.dp, vertical = 10.dp)
        .clickable { navController.navigate("do some route!!!!") } /*  <<<<  recompose all the time , because we using navController,  it's not Stable Class  */
        .background(Color.Yellow), contentAlignment = Alignment.Center)
    {
        Text(text = data)
    }
}

[Icyrockton]

ok I got this. using

Modifier.offset { IntOffset(0,swipeRefreshState.indicatorOffset.toInt()) }

rather than offset(y = with(LocalDensity.current) { swipeRefreshState.indicatorOffset.toDp() }) .
the Modifier.offset lambad version will not interfering with content size measurement.

[Icyrockton]

finally done! pull to refresh

Record_2022-03-28-17-05-14.mp4

[FunkyMuse]

also another way to do this is to add an item {} before adding items {} and control that specific item’s visibility as it’s gonna sit on top of the list