Closed gladiuscode closed 2 months ago
@gladiuscode What about adding overflow: 'hidden' to that View style property ?
<View
style={{
height: 200,
...StyleSheet.absoluteFillObject,
bottom: 0,
top: undefined,
overflow: 'hidden'
}}>
<BlurView
style={StyleSheet.absoluteFill}
blurAmount={100}
blurType={'light'}
/>
</View>
Hi @devym-37 I've managed to fix it partially with your suggestion, thank you!
Now it doesn't render a grey overlay, but it still breaks any usages as a bottom tab bar with react-navigation. At the moment it navigates and sometimes breaks, rendering a white layer without any component showing up.
I think I'll open the issue on the react-navigation repository later.
So for the moment, i'll close this one
We are testing this library in a new project with React Native .73.6 and we have noticed that whenever we use the BlurView to render a bottom component that add a layers of blur on top a scrollable content, it renders a grey background that covers the entire screen. This is also breaking navigation between screens and makes it impossibile to leverage this library for use cases such a Blur Bottom Bar Navigation.
Steps to reproduce the behavior:
import React from 'react'; import {View, Image, StyleSheet, ScrollView} from 'react-native'; import {BlurView} from '@react-native-community/blur';
export default function App() { return (
); }