how to make blur image on android? React-native

Question

I need to do a blur effect on Image component on Android with react native, this is possible or how can i do it?

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
} from 'react-native';

export default class Main extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image source={require('../../Images/bgImg.png')}
        style={styles.imagen}
        />
      </View>
    );
  }
}

Have you looked into this? https://github.com/rexlow/react-native-blur — Rex Low, Mar 12 '18 at 03:35
Possible duplicate of [how to make the blur effect with react-native?](https://stackoverflow.com/questions/37131278/how-to-make-the-blur-effect-with-react-native) — Arun, Mar 12 '18 at 03:37

patngo · Accepted Answer · 2018-03-12T06:38:02.837

6

You can now set blurRadius property on your Image.

<Image
  style={styles.imagen}
  source={require('../../Images/bgImg.png')} 
  blurRadius={1}
/>

Or you can use a community library such as https://github.com/react-native-community/react-native-blur which works on both iOS and Android

edited Mar 12 '18 at 06:38

answered Mar 12 '18 at 04:21

patngo

667
3
12

score 0 · Answer 2 · answered Mar 12 '18 at 04:29

0

Use Attribute blurRadius increase the number to get more blurred image .

<Image 
    source={require('../../Images/bgImg.png')}
    style={styles.imagen}
    blurRadius={1}
    />

answered Mar 12 '18 at 04:29

yatin deokar

730
11
20

how to make blur image on android? React-native

2 Answers2