[Bug]: Blur effect isn't applied to the background if `handleComponent` is set to `null`

[thisisgit]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS

What happened?

Hi, I'm seeing a bug where blur effect with expo blur view doesn't get applied on the background via backgroundComponent prop of the bottom sheet if handleComponent prop is set to null:

https://github.com/user-attachments/assets/6513f09d-c1ed-43a7-8d55-94db50e2339c

This doesn't always happen as you can see in the above recording, but it appears more frequently if the bottom sheet is loaded with heavier elements.

This used to work fine but started seeing this bug from version 5.1.6. It looks like it happens when there's no element being rendered in handleComponent since

// this
handleComponent={() => null}

// and this
handleComponent={() => <View />}

result the same bug.

Reproduction steps

Minimal reproducible code:

import {
  BottomSheetModal,
  BottomSheetModalProvider,
  BottomSheetView,
} from '@gorhom/bottom-sheet';
import { BlurView } from 'expo-blur';
import React, { useCallback, useRef, useState } from 'react';
import { Button, StyleSheet, Switch, Text, View } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export const BottomSheetTest = () => {
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);

  const [isToggled, setIsToggled] = useState<boolean>(false);

  const handlePresentModalPress = useCallback(() => {
    bottomSheetModalRef.current?.present();
  }, []);
  const handleSheetChanges = useCallback((index: number) => {}, []);

  return (
    <GestureHandlerRootView style={styles.container}>
      <BottomSheetModalProvider>
        <Button
          onPress={handlePresentModalPress}
          title="Present Modal"
          color="black"
        />
        <View style={styles.blurTestBox} />
        <BottomSheetModal
          ref={bottomSheetModalRef}
          handleComponent={() => <View />}
          backgroundComponent={({ style }) => (
            <BlurView style={style} intensity={50} tint={'light'} />
          )}
          onChange={handleSheetChanges}
        >
          <BottomSheetView style={styles.contentContainer}>
            <Text>Awesome 🎉</Text>
            <Switch value={isToggled} onValueChange={setIsToggled} />
            <View style={{ height: 400, width: '100%' }} />
          </BottomSheetView>
        </BottomSheetModal>
      </BottomSheetModalProvider>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    justifyContent: 'center',
    backgroundColor: '#efefef',
  },
  contentContainer: {
    alignItems: 'center',
  },
  blurTestBox: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});

Reproduction sample

https://snack.expo.dev/@thisisgit/blurview-bottom-sheet-bug

Relevant log output

[asadhmv]

Did you find the solution ? Cause I got the same issue I'd like to have a BlurView as a backgroundComponent but it's not redering the BlurView

[thisisgit]

Did you find the solution ? Cause I got the same issue I'd like to have a BlurView as a backgroundComponent but it's not redering the BlurView

What you can do right now is to render "something" in handleComponent. Like this:

handleComponent={() => <View style={{ width: '100%', height: 1 }} />}

This will add extra 1px and may hurt your design, but I guess you could just subtract 1px from the body, e.g. from vertical padding.

[gorhom]

interesting bug! handle component has nothing to do with the background yet it impacts it

[gorhom]

i think we need to investigate the blur view mounting mechanism, because from this library, we do render the background component regardless of the handle component. but it seems that it just fail to render the blur

[thisisgit]

@gorhom Thanks for checking this out. Not that urgent issue since at least there's a workaround for this. I'll also check on this on my free time since I believe one of the changes in 5.1.6 caused this regression. And we can then figure out why such change affect blur view from not rendering

[adelbeke]

While checking the bug, I figured out that even with handleComponent={() => <View />}, the blurred background is not always present; on the other hand, triggering a new render with the toggle makes it appear.

https://github.com/user-attachments/assets/1a7df888-c93a-452c-a5d2-7fc39cd7c50f

[tylerdgenius]

Is this still open, I feel like crunching down on something weird as I'm free today? @gorhom