Figma 'Layer blur' effect

[teodorciuraru]

"react-native": "^0.62.0"
"react-native-image-filter-kit": "^0.7.1"

First of all, thank you for this great package. It really levels up your app's UI.

---

Q: How can I achieve blurring the bottom margin of this view? (or any other way to remove that visual delimiter)

I want it to look more like this:

[iyegoroff]

@teo029, thanks for the feedback!

How does the original image look?

[teodorciuraru]

I have two versions:

And exported with blur (but which will result in delimiter):

I export them via Figma and the blur effect is called 'Layer Blur'. The GaussianBlur from the package acts more like Figma's 'Background Blur' (that meaning, blur without overflowing the image). I also MultiplyBlend the logo image over this gradient.

<MultiplyBlend
          srcImage={
            <ClubProfileGradient
              source={require('~/screens/main/assets/gradient.png')}
            />
          }
          dstTransform={{
            anchor: { x: 0.5, y: 0.45 },
            scale: { x: 0.9, y: 0.7 },
          }}
          resizeCanvasTo={'srcImage'}
          dstImage={
            <RGBA
              alpha={0.2}
              image={
                <BoxBlur
                  image={
                    <ClubProfileGradient
                      resizeMode={'contain'}
                      source={require('~/screens/main/assets/profile-photo.png')}
                    />
                  }
                />
              }
            />
          }
        />

I usually work with SVG, but couldn't replicate the blur effect with any SVG library so I had to import the image as is. Maybe some effects combinations of effects might work.

[iyegoroff]

Maybe increasing the size of white-colored area for second image will reduce the difference between image bottom and background?

[teodorciuraru]

Trying different methods to do that. I will keep you updated.

[teodorciuraru]

Solve it with some Drop Shadow from Figma. Thank you!