It it possible to apply a blur effect to elements "under" a Canvas?

[Jorundur]

Use case: Blur contents on a screen when backgrounding the app so the contents can't be seen when switching between apps.

Idea: Define a Canvas on the screen, position it absolutely and make the width/height the full size of the window. Is there a way to add a blur effect like the one described here to blur the contents on the screen? I.e. all the contents are "underneath" (not children of) the Canvas since it's absolutely positioned and I'd like the contents to be blurred.

I tried it out and I got a semi-transparent overlay, but not a blur effect.

Is it not working because it only works on Skia elements that are children of the Canvas? Is there any way to make this work?

[Bayramito]

I also wonder that.

But unfortunately based on the @wcandillon's responses to the community and Skia docs i dont think this is possible yet..

Although, this is very powerful library to create amazing things but if there is no possibility to combine them with the native components, it makes this library a bit useless. If I wont be able to mask my native components with the skia drawing, this is bad becouse you cant draw everything from scratch in skia

Btw, even i was thinking this is not possible, i gave it a try and as like i thought it did not work.

Basically everything you draw in skia, should be inside a Canvas, so since you cant put children in a Canvas, you cant get beneffit of the backdrrop filters

[inder243]

So we can't do anything here. react-native-blur-view has not fully customisation and the blur is different.

[wcandillon]

Have you been experimenting with https://github.com/gre/react-native-view-shot? I'm curious to know how well this works. If it works really well, we would be more happy to make use it smoothly play with Skia on our side.

[objectiveSee]

@wcandillon did you ever try using that snapshot library to do Skia effects like custom blur? Curious how it went 🧐

[wcandillon]

yes here's an example: https://www.youtube.com/watch?v=vKYEFpO06Tk

[objectiveSee]

Thanks William! I am loving Skia these days! Using shaders and blur to create unique visual effects for a client

[wcandillon]

omg really appreciate this message thank you ☺️☺️

…

On Mon 21 Apr 2025 at 15:09, Danny Ricciotti ***@***.***> wrote: Thanks William! I am loving Skia these days! Using shaders and blur to create unique visual effects for a client — Reply to this email directly, view it on GitHub <#980 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVXH6V6Z4QC7HG7CPL322TUW7AVCNFSM6AAAAABZPB3SEWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEOBZHA3DGMA> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>

[Jalson1982]

@wcandillon so basically if we want to use canvas and blur effect of some content, only way is to take screenshot, put it in canvas an blur it? I have specific situation with scroll and blur so this will not work. Any idea maybe how to achieve it?