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

Created on 3 Sep 2019  路  12Comments  路  Source: Kureev/react-native-blur

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

image

iOS 13 and 12, blurType set to regular

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

image

iOS 13 and 12, blurType set to light or xlight

In this case blurAmount works on both versions:

image

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

Most helpful comment

Same issue

All 12 comments

Same issue

same

same

_blurAmount_ just doesn't work on iOS 13 regardless of _blurType_

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_

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"

same

same issue. Did anyone find the solution?

Bump. Same issue

Bump

+1

+1

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tbolt picture tbolt  路  3Comments

sandroferrari picture sandroferrari  路  5Comments

VicFrolov picture VicFrolov  路  7Comments

baicuhaha picture baicuhaha  路  4Comments

iagormoraes picture iagormoraes  路  6Comments