Blurred area is an opaque grey box on iOS device

[dmr07]

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

[dmr07]

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?

[jaycee425]

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

[davidroman0O]

I got exactly the same issue!

[skizzo]

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

[mountfx]

Yeah, I have the same issue :c

[msantang78]

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.

[bobsmits]

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.

[luisnaranjo733]

I'm also experiencing this after upgrading to react-navigation@5.

[smartameer]

Experiencing the same issue, I guess with navigation its a issue. At main page it loads correct, but inside navigations it looks opaque

[jetlej]

Same issue here

[maayanalbert]

For me the problem came from putting the BlurView before my content and using zIndex: 1, when I just put it after it was fixed.

<BlurView style={{zIndex: 1}}/>
<BlurredContent />

To:

<BlurredContent />
<BlurView />