React-native-blur: Blurred area is an opaque grey box on iOS device

Created on 22 Jun 2017 · 10Comments · Source: Kureev/react-native-blur

On the iPhone simulator, the blur effect works as expected. When built on the physical device, the blurred area show up as an opaque grey box.

Here is one of the places where I'm using BlurView:

<View style={styles.tabbar}>
        <BlurView
          blurType="light"
          blurAmount={2}
          style={styles.blurbox} />
        {routes && routes.map((route, index) => {
          const focused = index === navigation.state.index;
          const tintColor = focused ? activeTintColor : inactiveTintColor;
          return (
            <TouchableWithoutFeedback
              key={route.key}
              style={styles.tab}
              onPress={() => jumpToIndex(index)}
            >
                <View style={styles.tab}>
                  {renderIcon({
                    route,
                    index,
                    focused,
                    tintColor
                  })}
                </View>
            </TouchableWithoutFeedback>
          );
        })}

react-native-blur: 3.0.0
react-native: 0.45.0
react: 16.0.0-alpha.12
react-navigation: 1.0.0-beta.11

Source

dmr07

👍2

Most helpful comment

I got exactly the same issue!

davidroman0O on 4 Oct 2017

👍3

All 10 comments

I tried using both BlurView and VibrancyView in other parts of the app as the examples instructed. Specifically, the elements to be blurred are positioned behind BlurView, rather than being nested. I also tried removing ScrollView, which didn't work either.

I scanned the issues, and it seems most problems are happening with iOS. Has anyone been able to get blur to show up on their physical device?

dmr07 on 1 Jul 2017

my is showing as a grey box even in the simulator :(

jaycee425 on 31 Jul 2017

👍3

I got exactly the same issue!

davidroman0O on 4 Oct 2017

👍3

Was anybody able to solve this? Same issue here..

skizzo on 30 Oct 2017

Yeah, I have the same issue :c

FuchsbergerTbs on 24 Jan 2018

I had the same issue. The blur was working great on android and on ios I just was getting a grey box.
Removing the background color on the blur view style fixed the issue for me.

msantang78 on 2 Apr 2018

For anyone having this problem: Double check if the IOS setting "Reduce Transparency for better contrast and readability" is off. Cost me like 4 hours to figure this one out.