I have a simple WebPageView.kt
that I can call on in other pages that embed webviews in my app. It was working fine with the LinearProgressIndicatorProgress to display a progress bar for each webpage.
But, as I am trying to also add a PullRefreshIndicator, the Pull Refresh does not seem to work.
I wonder what is wrong in my code, please.
WebPageView.kt
@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterialApi::class)
@Composable
fun WebViewPage(url: String) {
val context = LocalContext.current
var isRefreshing by remember { mutableStateOf(false) }
//WEB-VIEW
val webView = remember(context) {
WebView(context).apply {
webViewClient = WebViewClient()
loadUrl(url)
settings.javaScriptEnabled = true
settings.useWideViewPort = true
setBackgroundColor(0x000000)
webChromeClient = object : WebChromeClient() {
override fun onProgressChanged(view: WebView?, newProgress: Int) {
LinearProgressIndicatorProgress = newProgress / 100f
}
}
}
}
val pullRefreshState = rememberPullRefreshState(
refreshing = isRefreshing,
onRefresh = {
isRefreshing = true
webView.reload()
}
)
//PROGRESS INDICATOR FOR WEB-VIEW
Surface(modifier = Modifier.fillMaxSize()) {
CompositionLocalProvider(LocalContext provides context) {
Box(
modifier = Modifier
.fillMaxSize()
.pullRefresh(pullRefreshState)
) {
Column(modifier = Modifier.fillMaxSize()) {
if (LinearProgressIndicatorProgress < 1f) {
LinearProgressIndicator(
progress = LinearProgressIndicatorProgress,
color = Color(0xffae52de),
modifier = Modifier.fillMaxWidth()
)
}
AndroidView(
factory = { webView },
modifier = Modifier.fillMaxSize()
)
}
//PULL-TO-REFRESH
PullRefreshIndicator(
refreshing = isRefreshing,
state = pullRefreshState,
contentColor = Color(0xffae52de),
modifier = Modifier.align(Alignment.TopCenter)
)
if (isRefreshing) {
Text(
text = "Pull to refresh",
color = Color(0xffae52de),
modifier = Modifier
.align(Alignment.TopCenter)
.padding(top = 60.dp) // Adjust the padding as needed
)
}
}
}
LaunchedEffect(webView) {
webView.webViewClient = object : WebViewClient() {
override fun onPageFinished(view: WebView?, url: String?) {
isRefreshing = false
}
}
}
}
}
private var LinearProgressIndicatorProgress by mutableStateOf(0f)
As per documentation:
Note that this modifier must be added above a scrolling container, such as a lazy column, in order to receive scroll events.
Column
isn't scrollable by default, you have to apply a modifier to it:
.verticalScroll(rememberScrollState())