react-native-blur
react-native-blur copied to clipboard
Example doesn't work on IOS
Using the example:
<SafeAreaView style={styles.container}>
<Text style={styles.absolute}>Hi, I am some blurred text</Text>
{/* in terms of positioning and zIndex-ing everything before the BlurView will be blurred */}
<BlurView
style={styles.absolute}
blurType="light"
blurAmount={10}
reducedTransparencyFallbackColor="white"
/>
<Text>
I'm the non blurred text because I got rendered on top of the BlurView
</Text>
</SafeAreaView>
css:
container: {
justifyContent: 'center',
alignItems: 'center',
},
absolute: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
The blurred text doesn't show on IOS and for some reason yellow background appears on IOS.
Edit: the <Text>
that is above the blurred view is not showing at all...
@dentep Can you provide a screenshot, i came across an issue like this as well, just wanted to see if you have the same issue so i can give you an answer.
@dentep Can you provide a screenshot, i came across an issue like this as well, just wanted to see if you have the same issue so i can give you an answer.
@Champkinz ye, it looks like this:
@dentep Can you provide a screenshot, i came across an issue like this as well, just wanted to see if you have the same issue so i can give you an answer.
@Champkinz ye, it looks like this:
position: "absolute", top: 0, bottom: 0, left: 0, right: 0, borderRadius: 20,
This is my styling for the blur view, your code seems fine.
+1