Blur Effect doesnt work on Android it gives full screen blur effect not parent component

[OFD16]

Describe the bug
In Android BlueEffect or others doesnt work it gives full screen background this blur effect but i want to give parent component.

To Reproduce

import { SubscriptionBgWeekly, SubscriptionBgMonthly } from "@src/assests";
import CustomText from "@src/components/custom-text";
import BlurCard from "./BlurCard";
import React, { useMemo, useRef, useState } from "react";
import {
    Animated,
    ImageBackground,
    Platform,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { BlurSwitch, BlurView, LiquidGlassContainer, LiquidGlassView, ProgressiveBlurView } from '@sbaiahmed1/react-native-blur';

type TabKey = "weekly" | "monthly";

const SubscriptionTabs = () => {
    const [activeTab, setActiveTab] = useState<TabKey>("weekly");
    const insets = useSafeAreaInsets();

 
    return (
        <View style={styles.container}>
            <View style={[styles.tabBar, { top: insets.top + 200 }]}>
                <View style={{ flex: 1, position: 'relative', alignItems: 'center', justifyContent: 'center' }}>
                    <BlurView
                        blurType="light"
                        blurAmount={20}
                        style={{
                            position: 'absolute',
                            top: 100,
                            left: 50,
                            right: 50,
                            height: 200,
                            borderRadius: 20,
                        }}
                    >
                        <Text>Content with blur background</Text>
                    </BlurView>
                
                </View>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#150D00",
    },

    tabBar: {
        position: "absolute",
        left: 16,
        right: 16,
        flexDirection: "row",
        gap: 12,
    },

});

export default SubscriptionTabs;

Expected behavior
Not same effect with IOS or it doest give parent component it gives full screen all components

Screenshots

Also without Blur effect android screen shot is here:

Smartphone (please complete the following information):

• Device: sdk_gphone64_arm64
• API 36

Additional context
package version: "@sbaiahmed1/react-native-blur": "^4.5.4",
react native version: 20.0.0

[DanielAraldi]

Hi @OFD16, thank you for your report! 🙏

Could you create a repo that reproduce this problem?

[sbaiahmed1]

Hello @OFD16 , what effect were you seeking ? Is it a blur backdrop for the modal or what exactly ?

[DanielAraldi]

Hi @OFD16, I tried reproducing your problem with the code availability by you, but my result is the same as iOS.

Code:

import { BlurView } from '@sbaiahmed1/react-native-blur';
import {
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';
import {
  SafeAreaProvider,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';

function App() {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <SafeAreaProvider>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <AppContent />
    </SafeAreaProvider>
  );
}

function AppContent() {
  const insets = useSafeAreaInsets();

  return (
    <View style={styles.container}>
      <View style={[styles.tabBar, { top: insets.top + 200 }]}>
        <View style={styles.content}>
          <BlurView blurType="light" blurAmount={20} style={styles.blurEffect}>
            <Text>Content with blur background</Text>
          </BlurView>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#150D00',
  },

  content: {
    flex: 1,
    position: 'relative',
    alignItems: 'center',
    justifyContent: 'center',
  },

  tabBar: {
    position: 'absolute',
    left: 16,
    right: 16,
    flexDirection: 'row',
    gap: 12,
  },

  blurEffect: {
    position: 'absolute',
    top: 100,
    left: 50,
    right: 50,
    height: 200,
    borderRadius: 20,
  },
});

export default App;

Result:

Note: I used versions 4.5.4 and 4.5.5, both of which have the same effect.

[ITESaurabh]

For my case its only happening in release apk, and oddly enough the more you transition in or out the of the screen the opacity reduces even further till all of the screen is white/black
IOS seems fine

[OFD16]

MERHABA@OFD16Raporunuz için teşekkürler! 🙏

Bu sorunu yeniden oluşturabilecek bir depo oluşturabilir misiniz?

Sorry, I didn't notice your reply. I'm also having trouble with notifications. Unfortunately, the scenario where I was having problems no longer exists for me; I completely uninstalled the package from the application. However, when I tried it again in a new application, applying blur on Android worked fine at first, but after a few days, the opacity or whiteness increased across the entire screen on Android. Removing the package fixed the problem, but I needed to use it, so I reinstalled it, and the problem was resolved, but it still happens occasionally. I'm continuing development hoping it won't happen in production. I think it's accidentally applying the blur effect to the entire screen on the Android side; that's my guess.

[OFD16]

Hello @OFD16 , what effect were you seeking ? Is it a blur backdrop for the modal or what exactly ?

This wasn't a modal. It was a regular component I was using on the screen. For some reason, on Android, after a certain time, the blur effect turns into opacity and covers the entire screen. I'll report it with a screenshot when I encounter a more detailed issue. The problem sometimes occurs, sometimes doesn't, but I'm sure it's fixed when I uninstall the package. Reinstalling the package also fixes it. However, after a while, the opacity on Android covers the entire screen again, without affecting the area where we applied the blur view.

[sbaiahmed1]

Hello @OFD16,
Thanks for reporting the issue

Im using the app in some production apps and i cant reproduce it 🥲
ill be glad if you help with a stacktrace or a consistent reproduction
I will try some ways to debug more and improve it
Lets keep eachother posted

Teşekkürler