I'm developing a React Native app using Expo and experiencing issues with a component I created to show a loader using Expo BlurView.

Basically, when I add the experimentalBlurMethod="dimezisBlurView" to test on Android, a transparent overlay is covering the entire screen, making dark gray colors look like light gray instead. Other than that, everything works as expect, when loading state is true, the component shows up with blur, the only downside is this overlay covering the entire screen.

I've tried:

• Conditional rendering
• Adjusting BlurView intensity
• Adding pointerEvents="none"

Expected behavior:

• Blur overlay appears during loading
• Overlay completely disappears when loading is false

import React from 'react';
import { View, ActivityIndicator, StyleSheet } from 'react-native';
import { BlurView } from 'expo-blur';
import Colors from '@/constants/Colors';

const LoadingOverlay = ({ loading }: { loading?: boolean }) => {
  if (!loading) return null;

  return (
    <View style={styles.container}>
      <BlurView intensity={20} style={styles.blurView} experimentalBlurMethod="dimezisBlurView">
        <View style={styles.loadingBox}>
          <ActivityIndicator size="large" color={Colors.PRIMARY} />
        </View>
      </BlurView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    zIndex: 999,
  },
  blurView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loadingBox: {
    backgroundColor: Colors.WHITE,
    padding: 20,
    borderRadius: 20,
  },
});

export default LoadingOverlay;

Can anyone help resolve this BlurView rendering issue?