Kureev / react-native-blur

React Native Blur component
MIT License
3.74k stars 555 forks source link

Android - RN .73.6 - BlurView overlapping whole screen #615

Closed gladiuscode closed 2 months ago

gladiuscode commented 2 months ago

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:

  1. Init a new react-native project with this library.
  2. Setup the App component as follows suggests:

import React from 'react'; import {View, Image, StyleSheet, ScrollView} from 'react-native'; import {BlurView} from '@react-native-community/blur';

export default function App() { return (

</View>

); }


3. Notice how the screen gets covered with a grey background:
![withBlur](https://github.com/Kureev/react-native-blur/assets/39952573/8d3a38ec-de29-410b-9ec8-4aa0bc537ff1)
devym-37 commented 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>
gladiuscode commented 2 months ago

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