CODEWITHSUNDEEP
react-nativereact-native-flatlistreact-native-navigation
SaqiXPRO
SaqiXPRO

Reputation: 205

How to add blur effect in react native?

How to add blur to a View in React Native, just like we apply it to an Image or BackgroundImage? If the view has translucent background using RGBA, I want to add blur to it also.

Sample Code

<ImageBackground style={styles.bg}>
 <View style={styles.content} />
</ImageBackground>


const styles = StyleSheet.create({
  bg: {
   width: "100%",
   height: "100%"
  },
  content:{
    width: "70%",
    height: "70%",
    backgroundColor: "rgba(255,255,355,0.4)",
    alignSelf: "center"
  }
})

Upvotes: 1

Views: 14481

Answers (4)

Iman Maleki
Iman Maleki

Reputation: 644

You could try 'expo-blur'. They say it's experimental on Android, but I have not had a problem so far.

import { BlurView } from "expo-blur";


<ImageBackground style={styles.bg}>
<BlurView
      style={{
        width: "70%",
        height: "70%",
        backgroundColor: "rgba(255,255,355,0.4)",
        alignSelf: "center",
      }}
      intensity={80}
      tint="light"
      experimentalBlurMethod="dimezisBlurView"
    />
</ImageBackground>


const styles = StyleSheet.create({
  bg: {
   width: "100%",
   height: "100%"
  },
  content:{
    width: "70%",
    height: "70%",
    
    alignSelf: "center"
  }
})

Upvotes: 0

Gustavo Graeff
Gustavo Graeff

Reputation: 9

Seems like you're trying to blur elements over an image. A great idea is to have 2 images, the first will always be in the background and the second will be a child of a position absolute View over the image with overflow hidden. So you just need to make sure this child image has exactly the same size as the one in the background and the opposite position of the absolutely positioned View.

import React, { useState } from 'react';
import { Image, View } from 'react-native';

import yourAsset from 'your/asset/folder/file.jpg';

const ImageBlur = () => {
  const [containerSize, setContainerSize] = useState({
    height: undefined,
    width: undefined,
  });

  return (
    <View
      onLayout={({ nativeEvent }) => {
        setContainerSize({
          width: nativeEvent.layout.width,
          height: nativeEvent.layout.height,
        });
      }}
      style={{
        position: 'relative',
        width: '100%',
        aspectRatio: 16 / 9,
      }}
    >
      <Image
        style={{ position: 'absolute', height: '100%', width: '100%' }}
        resizeMode="contain"
        source={yourAsset}
      />

      <View
        style={{
          backgroundColor: 'black',
          width: 100,
          height: 150,
          left: 100,
          top: 40,
          overflow: 'hidden',
        }}
      >
        <Image
          blurRadius={10}
          source={yourAsset}
          style={{
            width: containerSize.width,
            height: containerSize.height,
            left: -100,
            top: -40,
            opacity: 0.7,
          }}
          resizeMode="contain"
        />
        { any children here will be blurred }
      </View>
    </View>
  );
};

export default ImageBlur;

I also wrote a Medium post explaining the concept and created a react-native-blur-view-image Github repository for how I came up with this implementation and some usage examples. Also, there is the performance test feedback.

Upvotes: 0

ikmo
ikmo

Reputation: 298

You can use opacity

const styles = StyleSheet.create({
bg: {
 width: “100%”,
 height: “100%”, 
Opacity:0.5
},
content:{
  width: “70%”,
  height: “70%”,
  backgroundColor: “rgba(255,255,355,0.4)”,
  alignSelf: “center”
}


})

Upvotes: -1

Jackmekiss
Jackmekiss

Reputation: 743

The easiest way is to do something like:

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

const  BlurImage = () => {
        return (
            <ImageBackground source={require('your picture')} style={styles.ImageBackground}>
                <View style={styles.container}>
                    <Text style={styles.text}> CSS Tricks </Text>

                    <Text style={styles.text}>You can style your Text and View as you deem fit</Text>
                </View>
            </ImageBackground>
        );
}

export default BlurImage;

const styles = StyleSheet.create({
    ImageBackground: {
        flex: 1,
        width: null,
        height: null,
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba( 0, 0, 0, 0.6 )',
    },
    text: {
        color: 'white',
        fontSize: 24
    }
});

Upvotes: -1

Related Questions