react-native-blur
react-native-blur copied to clipboard
Kureev
Blurred area is an opaque grey box on iOS device
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
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?
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.
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.
Experiencing the same issue, I guess with navigation its a issue. At main page it loads correct, but inside navigations it looks opaque
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 />
