Blur not working over React Native Camera in Android

[gigarthan]

Question: I'm using react-native-blur with Modal to create a blurred background. Everything seems to be working fine in Ios but the blur is not getting applied over when there is a camera preview in the background in Android

Code for the modal with blur

const styles = StyleSheet.create({
  modalStyle: {backgroundColor: 'transparent'},
  blurStyles: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
  },
});

export default function BlurredModal({children, modalProps, blurProps}) {
  return (
    <Modal
      animationType={'fade'}
      transparent={true}
      customStyle={styles.modalStyle}
      {...modalProps} >
      <BlurView
        blurAmount={100}
        blurType={'light'}
        style={styles.blurStyles}
        blurRadius={25}
        downsampleFactor={25}
        {...blurProps}
      />
      {children}
    </Modal>
  );
}

[pke]

It's not working over any view. The lib for Android is broken atm.

[jasulan1101]

+

[scottlet]

It's not working over any view. The lib for Android is broken atm.

Is this still the case? Also having a similar issue (using dark blur on a BlurView set to 20% high at the bottom of the screen, if I don't put it in a view with overflow:hidden then it darkens the entire screen as well as the 20% high area which is supposed to be blurred is just black).

Or do I have a different issue? Works fine on iOS.

[prakashkrsingh0]

I'm also having the same issue with android. With ios, I'm able to do.

[labmorales]

Same here.

iOS

Android

I'm using it like this:

<BlurView
          blurAmount={10}
          style={tw(`absolute inset-0 z-10`)}
        />