Library is broken on Android

[wmonecke]

Bug

The library is unusable on Android.

The BlurView covers the whole screen and setting { overflow: 'hidden' } on parent is just a hack and actually causes performance issues, because if you inspect your views you can see BlurView is still rendering on the whole screen.

Also in the documentation, there are basically no instructions on how to implement viewRef.

If this is part of react-native-community it should at least be working properly. Wasted way too much time trying to make this work. It would be nice to have a disclaimer that this is only working for iOS at the current state.

Environment info

"@react-native-community/blur": "^3.4.1",
"react": "16.8.6",
"react-native": "0.60.4",

[Psiiirus]

I ran into i android issues to wiht 3.4.1 maybe try to checkout the 3.5.0 dev-master branch and see if this is still a bug.

[Frans-L]

With 3.5, the same bug exists.

[martinfrouin]

It actually works with the master branch. Can you add a release ?

[JimTeva]

I just updated to 3.6 and it works now.

[ovcharukmaks]

It still doesn't work. For android blur view takes whole screen. I'm using "@react-native-community/blur": "^3.6.0".

[danleveille]

Still having the same problem on 3.6.

[luisnaranjo733]

I'm also experiencing basic functionality issues on Android with 3.6 from npm. Setting overflow: "hidden" on the parent of the <BlurView /> still does not solve the issue.

Basically, the blur effect just isn't happening. It's just a transparent view.

[benov84]

Not working in Android - its just transparent

[SunskyXH]

The same issue on 3.6 while using <BlurView />, and adding overflow: hidden to its parent view did not solve this problem.

[pke]

viewRef is not used anywhere in the source code (anymore)? The instructions in various issues are also vague in regard to Android. They claim you are supposed to put the BlurView before the content to be blurred. I am confused.

Also a lot of old issues from 2016 regarding render problems on Android are still open. That's adding to the confusion. Would the maintainer close old issues maybe?

[MinhNguyenWre]

The same issue on 3.6 while using <BlurView />, and adding overflow: hidden to its parent view did not solve this problem.

Same here. Does anyone have an idea? I can not set width and height for blur view in android, it always fullscreen overlap.

[lumberman]

Unrofrtuntaly, not a single library will work on Android as good as it works on iOS.

Read all the complications of performant blurring Native Android developers have in this thread: https://www.reddit.com/r/androiddev/comments/drs9bm/realtime_blurring_on_android_vs_ios/

A few quotes:

The blur is done on the main thread. Even though RS blur is allegedly executed on GPU, it's still effectively a blocking operation from the point of view of our code, because we have to wait till it finishes its job on the same thread we called it.

If I remember correctly, blur was never added to Android due to legacy reasons. In the early days of Android when having a GPU on a mobile device was not a given, Blur was simply too expensive of an operation to have it done by CPU only. This is why Android opted for the shading.

After reading all of this I decided to drop the idea of blurring anything on Android.

[Orange9000]

In may case using overlayColor='transpanrent' prop reduced blur view size from full screen to the size i set in style prop.

[talhamuhammadashraf]

in Android it does not take children ,So you can place BlurView on absolute and an extra view on absolute with children

[matinzd]

Poor performance issue still exists on android on the latest version 3.6.0.

[iarmankhan]

@talhamuhammadashraf can you share example snippet? I couldn't make it work with react-navigation tab bar - for bottom tab bar blur

[talhamuhammadashraf]

@iarmankhan i was not using with tabbar but here is my code i just placed my content as sibling of blurview not as a children

<Fragment>
   <BlurView
     style={styles.absolute}
     blurType="dark"
     blurAmount={100}
     blurRadius={10}
   />

   <View style={styles.absolute}>
       <ActivityIndicator color={Colors.primary} size="large" />
   </View>
 </Fragment>`
absolute: {
 position: 'absolute',
 top: 0,
 left: 0,
 bottom: 0,
 right: 0,
}

[iarmankhan]

Thank you for the reply. I tried like that but it didn't work with react-navigation 5, so I installed expo-blur instead and it's working very well.

[moddatherrashed]

i found a workaround, to set the overlayColor={'transparent'} and to give the view what meant to be blur backgroundColor : 'rgba(255,255,255,0.1)' for a light blur, and for the dark blur backgroundColor : 'rgba(0,0,0,0.1)' of course just on android because ios working well.

[raf2k07]

I tried this on Android to get some text in a View with a blurred background, and while I got the desired blur on the background, the elements above the BlurView seemed to be sort of smudged and blurry.

[Lexical-Luke]

@moddatherrashed, could you please provide context for where those code snippets were/should be placed? This issue is still present for Android, I followed this to implement the blurred tab bar . On Android, the tab bar doesn't seem to dynamically load content beneath it and it also produced a secondary blur that darkens the entire screen. Is there any known fix for this, an alternate package perhaps or is my luck completely out when it comes to Android?

[moddatherrashed]

@Lexical-Luke I created a custom header, here is the full example of it:

import React from 'react';
import {
  Image,
  View,
  StyleSheet,
  Platform,
  TouchableOpacity,
  SafeAreaView,
  Text,
} from 'react-native';
import {assets} from '../../application/assets/assets';
import {getThemeColors} from '../../application/common/colors';
import {
  appHeaderHeight,
  isIPhoneX,
  StatusBarHeight,
  width,
} from '../../application/common/sizes';
import ReduxContainer from '../../presentation/containers/ReduxContainer';
import {BlurView} from '@react-native-community/blur';
import Icon from 'react-native-vector-icons/Ionicons';

const SubHeader = ({
  companyName,
  navigation,
  brandingConfig,
  closeIconColor,
}) => {
  return (
    <SafeAreaView style={styles.container}>
      <BlurView
        blurType="light"
        blurAmount={5}
        style={styles.blurContainer}
        overlayColor={'transparent'}></BlurView>
      <TouchableOpacity
        onPress={() => navigation.goBack()}
        style={styles.closeIconContainer}>
        <Icon
          name={'md-close'}
          size={24}
          color={
            closeIconColor ? closeIconColor : brandingConfig.colors.primary
          }
        />
      </TouchableOpacity>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  blurContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    height: StatusBarHeight + 40,
    alignItems: Platform.OS === 'android' ? 'center' : 'flex-end',
    // paddingBottom: 10,
    flexDirection: 'row',
    width: width,
    borderBottomWidth: 1,
    borderBottomColor: getThemeColors?.transparent.white30,
    backgroundColor:
      Platform.OS === 'android'
        ? getThemeColors?.transparent.white20
        : null,
  },
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    zIndex: 100,
    height: StatusBarHeight + 40,
    alignItems: Platform.OS === 'android' ? 'center' : 'flex-end',

    flexDirection: 'row',
    width: width,
  },
  profilePictureContainer: {
    justifyContent: 'center',
    alignItems: 'flex-end',
    flex: 1,
    paddingRight: 10,
  },
  closeIconContainer: {
    height: 30,
    width: 30,
    // borderRadius: 15,
    // borderColor: getThemeColors?.transparent.white60,
    // borderWidth: 0.5,
    justifyContent: 'center',
    marginHorizontal: 10,
    // marginTop: StatusBarHeight,
  },
});

export default ReduxContainer(SubHeader);

Let me know if you need more explanation

[dima-devs]

"@react-native-community/blur": "3.6.0" is working exactly with overflow: 'hidden' on android.

[bhushan-patil-official]

@iarmankhan i was not using with tabbar but here is my code i just placed my content as sibling of blurview not as a children

<Fragment>
   <BlurView
     style={styles.absolute}
     blurType="dark"
     blurAmount={100}
     blurRadius={10}
   />

   <View style={styles.absolute}>
       <ActivityIndicator color={Colors.primary} size="large" />
   </View>
 </Fragment>`
absolute: {
 position: 'absolute',
 top: 0,
 left: 0,
 bottom: 0,
 right: 0,
}

This worked for me

[bonnmh]

You can use

overlayColor={isIOS ? undefined : 'transparent'}

[fidaay]

Almost 4 years later and the package is still inestable. I wasn't aware that react-native was THAT difficult to work with, there seems to be just a lot of bugs and few packages.

[mohammedsadeghi]

Applying an elevation of elevation: Platform.OS === 'android' ? 50 : 0, overflow: 'hidden', to the parent and elevation: Platform.OS === 'android' ? -1 : 0, in BlurView style did resolved the issue for me!