I need to do a blur effect on Image ponent 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>
    );
  }
}

I need to do a blur effect on Image ponent 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>
    );
  }
}

• javascript
• android
• react-native

Share Improve this question Follow asked Mar 12, 2018 at 3:33 Jose NoriegaJose Noriega 24533 silver badges1212 bronze badges 5

• Have you looked into this? github./rexlow/react-native-blur – Rex Low Commented Mar 12, 2018 at 3:35
• Possible duplicate of how to make the blur effect with react-native? – Arun Commented Mar 12, 2018 at 3:37
• yeah but I wanted to look for other options – Jose Noriega Commented Mar 12, 2018 at 3:40
• this is for IOS – Jose Noriega Commented Mar 12, 2018 at 3:40
• you can use opacity on view to make image little invisible – Sagar Chavada Commented Mar 12, 2018 at 4:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 munity library such as https://github./react-native-munity/react-native-blur which works on both iOS and Android

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

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