Closed AlaaEddinAlbarghoth closed 1 month ago
Hey, thanks for reporting the issue. Which way do you use for navigating screens?
Thanks, similar to this https://www.youtube.com/watch?v=gNzPGI9goU0&ab_channel=Stevdza-San
Hello @skydoves, Do you have updates on this issue?
@AlaaEddinAlbarghoth Sorry for the late response. Could you give key1
on your Cloudy
composable like the example below?
Cloudy(
radius = 15,
key1 = (an object that indicates navigation screen, which must differ depending on your screen)
) {
...
}
Same issue here. I have been trying things out. Seeing your comment above, I tried adding a state change via a delay and it works, but during the delay you still see the previous screen in the Cloudy container.
val coroutineScope = rememberCoroutineScope()
var state by remember { mutableStateOf(0) }
LaunchedEffect(key1 = Unit) {
coroutineScope.launch {
delay(200)
state = 1
}
}
Cloudy(radius = 25, key1 = state) {
...
}
@skydoves Is there a simple and elegant way to go about this?
It's quite tricky to fix this issue from Cloudy because the blur is applied to a Bitmap generated from the View with a PixelCopy request on the Window. When navigating, the old screen is still visible for a few milliseconds due to the navigation animation. PixelCopy will start generating the Bitmap as soon as the navigation starts, causing the old blurred View to be shown.
One workaround to this is disabling navigation animations from your NavHost or your screen composables (only from version 2.7.0 of androidx.navigation:navigation-compose
):
NavHost( navController = navController, startDestination = "home", enterTransition = { EnterTransition.None }, exitTransition = { ExitTransition.None } ) { /* ... */ }
Borrowed this snippet from @carlospinia. I'm implementing the View Profile Picture feature on a chat app I'm making and I was trying to replicate the Instagram profile picture view (that blurs the entire background). This weirdly worked for me {tbh, I don't know why or how... but yeahhh}
@Composable
fun ControlBlurOnScreen(
isPictureOnFullScreen: Boolean,
profilePic: String?,
dismissPicture: () -> Unit,
content: @Composable (BoxScope) -> Unit
) {
Box(Modifier.fillMaxSize()) {
if (isPictureOnFullScreen) {
val coroutineScope = rememberCoroutineScope()
var state by remember { mutableIntStateOf(0) }
LaunchedEffect(key1 = Unit) {
coroutineScope.launch {
state = 1
}
}
Cloudy(
radius = 25,
key1 = state,
) {
content(this)
}
}
else
content(this)
Hey guys, the new version 0.2.0 has been released, and now you can resolve this issue by using the Modifier.cloudy
modifier instead of the Cloudy
composable function.
The issue I put Cloudy() above the column I used in Screen B, but when navigating from Screen A to Screen B, the previous screen A is showing in screen B
Expected Behavior: You can navigate to the new screen and you can see the views and compostables of new screen B