[Android] view ref not blurring

[stantoncbradley]

Experiencing weird behavior on Android... following android example, it appears the text view is blurring and not the image view? code:

import React, { Component } from 'react';
import { View, Image, Text, findNodeHandle, StyleSheet } from 'react-native';
import { BlurView } from 'react-native-blur';
import uri from '../../../Assets/uri.png';

export default class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = { viewRef: null };
  }

  imageLoaded() {
    console.log('setting blur ref!');
    this.setState({ viewRef: findNodeHandle(this.backgroundImage) });
  }

  render() {
    return (
      <View style={styles.container}>
        <Image
          ref={(img) => { this.backgroundImage = img; }}
          source={uri}
          style={styles.absolute}
          onLoadEnd={this.imageLoaded.bind(this)}
        />
        <BlurView
          style={styles.absolute}
          viewRef={this.state.viewRef}
          blurType="light"
          blurAmount={1}
        />
        <Text style={{ flex: 1 }}>Hi, I am some unblurred text</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  absolute: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    // backgroundColor: 'blue',
  },
});

anyone else experiencing this, or get blur working on Android???

[MorcosS]

try to increase the blurAmount and add blurRadius, I managed to do it on android but the blur is not as blurred as in ios although I am putting the numbers to maximum

[mr-piratman]

any update?

[computerjazz]

I just did some experimentation and did end up getting Android to display correctly but had to implement some Android-specific workarounds:

• iOS doesn't seem to need all the viewRef state wiring but Android does
• On Android, edges of component with the set ref do not blur, but on iOS they do (Android clips all subviews). If blurred edges are desired, the blurred-edge view must be a child of the view with ref set and have padding applied. (see screenshots below)
• For Images contained within a View, a background color must be applied to enclosing View. backgroundColor: 'transparent' works but Android displays both the BlurView image and underlying Image, so opacity: 0 should be set on the underlying image to prevent both blur and non-blur from displaying. (@MorcosS I think this is why you're not seeing Android as blurred)

Gist here: https://gist.github.com/computerjazz/90acb6024d19c306c71f9bafc7c84836

iOS:

Android:

[MorcosS]

thanks I will try that

[lucaspelloni2]

Thanks @computerjazz! It worked for me :)