blurAmount prop has no effect on iOS 13 (and on iOS 12 with `regular` blur type)

[gabrielecirulli]

Bug

On iOS 13 and in some cases on iOS 12 the blurAmount prop has no effect at all: whether it's set to 0 or 100, you get the same amount of blur.

iOS 13, blurType set to dark

In the following screenshot you can see a comparison of iOS 12 (left) and iOS 13 (right) with blurType="dark" and blurAmount={1}. Note how blurAmount is disregarded on iOS 13

iOS 13 and 12, blurType set to regular

In this instance both iOS 12 and iOS 13 disregard the blurAmount prop.

iOS 13 and 12, blurType set to light or xlight

In this case blurAmount works on both versions:

Environment info

React native info output:

$ react-native info
info Fetching system and libraries information...
System:
    OS: macOS 10.14.4
    CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
    Memory: 151.05 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.8.0 - ~/.nvm/versions/node/v12.8.0/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.10.2 - ~/.nvm/versions/node/v12.8.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 26, 27
      Build Tools: 26.0.2, 27.0.0, 27.0.2
      System Images: android-26 | Android TV Intel x86 Atom, android-26 | China version of Android Wear Intel x86 Atom, android-26 | Android Wear Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-27 | Android TV Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom
  IDEs:
    Xcode: 11.0/11M392r - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6
    react-native: 0.60.5 => 0.60.5
  npmGlobalPackages:
    react-native-cli: 2.0.1

Library version: 3.3.1

Steps To Reproduce

1. Render a BlurView with the above props on top of some detailed content in order to assess the blur amount ...

Describe what you expected to happen:

1. Blur amount is customizable in all instances

[Fantasim]

Same issue

[anthonyjoeseph]

same

[ananevam]

same

[as4]

blurAmount just doesn't work on iOS 13 regardless of blurType

[eyu0415]

xlight & light type can be control blurAmount on iOS13

only the other types can't be control

blurAmount just doesn't work on iOS 13 regardless of blurType

[stevejboyer]

xlight & light type can be control blurAmount on iOS13

only the other types can't be control

blurAmount just doesn't work on iOS 13 regardless of blurType

This option is working for me. I was using blurType="regular" and blurAmount="10" but can achieve basically the same look with blurType="light" and blurAmount="25"

[arberkryeziu]

same

[andreibahachenka]

same issue. Did anyone find the solution?

[exotexot]

Bump. Same issue

[Fl0p]

Bump

[obendevski]

+1

[Thrillhop]

+1

[AlyMBarakat]

Still unresolved?

[hondem]

+1 still unresolved?

[NewBieBR]

Solution tested for dark and light on iOS 13.7:

import {BlurView as CBlurView, BlurViewProperties} from '@react-native-community/blur';
import React, {memo, useEffect, useState} from 'react';

const getAnotherBlurType = (realBlurType?: string) => (realBlurType === 'dark' ? 'light' : 'dark');

const BlurViewComponent = ({blurType, blurAmount, ...props}: BlurViewProperties): JSX.Element => {
  const [realBlurType, setRealBlurType] = useState(getAnotherBlurType(blurType));

  const setCorrectBlurType = () => {
    setRealBlurType(getAnotherBlurType(blurType));
    setTimeout(() => {
      if (blurType) setRealBlurType(blurType);
    }, 1);
  };

  useEffect(setCorrectBlurType, [blurAmount, blurType]);

  return <CBlurView {...props} blurAmount={blurAmount} blurType={realBlurType as any} />;
};

export const BlurView = memo(BlurViewComponent);

[dutradotdev]

same. lib is broken

[coayscue]

Yeah, this should be fixed. But here's a workaround to get a dark blur with custom blurAmount - put a backgroundColor on the blurview

  <BlurView
      style={{backgroundColor:"rgba(0,0,0,0.3)}
      blurType="light"
      blurAmount={3}
    />