how to make the blur effect with react-native?

image image-processing react-native blur
alucard.g picture alucard.g · May 10, 2016 · Viewed 74.6k times · Source

enter image description here

how to make the blur effect with react-native ? like 'background-image'

and i want to switch the effect 'blur' and 'none'，'none' means no blur effect

Answer

Gui Herzog picture Gui Herzog · Nov 24, 2016

Now you can do this without any library using the prop: blurRadius.

E.g

<Image
    style={styles.img}
    resizeMode='cover'
    source={imgSrc} 
    blurRadius={1}
/>

Explanation: the number(1) means the amount of blur you want to apply on the image, the higher the number, the blurrier the image.

Unfortunately, this doesn't work on Android yet (RN 0.40.0). Nevertheless, it could be useful to who's looking for only an iOS solution.

Edit: It seems to be working on Android now.

Related questions

How to resize an image with OpenCV2.0 and Python2.6

I want to use OpenCV2.0 and Python2.6 to show resized images. I used and adopted this example but unfortunately, this code is for OpenCV2.1 and does not seem to be working on 2.0. Here my code: import os, glob import cv …

Read More
TypeError: Image data can not convert to float

I am trying to create a 16-bit image like so: import skimage import random from random import randint xrow=raw_input("Enter the number of rows to be present in image.=>") row=int(xrow) ycolumn=raw_input("Enter the …

Read More
High Quality Image Scaling Library

I want to scale an image in C# with quality level as good as Photoshop does. Is there any C# image processing library available to do this thing?

Read More