[v4] Backdrop component with opacity appears at the bottom when bottomInset is set to BottomSheetModal

[sofi-algoritcom]

Bug

If I set a backdrop component with opacity and set bottomInset prop to the BottomSheetModal using useSafeAreaInsets hook ('react-native-safe-area-context'), when the BottomSheetModal is presented, the backdrop component appears at the bottom using the bottomInset height.

Environment info

Trying it with the Expo App SDK 50, iPhone 15 Pro (iOS Version 17.4.1)

Library	Version
@gorhom/bottom-sheet	4.6.1
react-native	0.73.6
react-native-reanimated	3.6.2
react-native-gesture-handler	2.14.0

Steps To Reproduce

1. Present the BottomSheetModal and see the error at the bottom of the screen.

Describe what you expected to happen:

1. The bottomInset space should be filled with the BottomSheetModal background, not the BackdropComponent's one.

Reproducible sample code

import { useMemo, useRef, useCallback } from 'react';
import { View, StyleSheet } from 'react-native';
import { enableLogging, BottomSheetBackdrop,
  BottomSheetBackdropProps, BottomSheetModal } from '@gorhom/bottom-sheet';
import List from './components/List';
import SearchHandle from './components/SearchHandle';
import Button from './components/Button';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

enableLogging();

const App = () => {
  // refs
  const bottomSheetRef = useRef(null);
  const insets = useSafeAreaInsets();

  // variables
  const snapPoints = useMemo(() => [200], []);

  // callbacks
  const handleExpandPress = useCallback(() => {
    bottomSheetRef.current?.expand();
  }, []);
  const handleCollapsePress = useCallback(() => {
    bottomSheetRef.current?.collapse();
  }, []);
  const handleClosePress = useCallback(() => {
    bottomSheetRef.current?.close();
  }, []);

   const backdropComponent = useCallback(
    (props: BottomSheetBackdropProps) => (
      <BottomSheetBackdrop
        {...props}
        appearsOnIndex={0}
        disappearsOnIndex={-1}
        opacity={0.48}
      />
    ),
    []
  );

  return (
    <View style={styles.container}>
      <Button onPress={handleExpandPress} title="Expand" />
      <Button onPress={handleCollapsePress} title="Collapse" />
      <Button onPress={handleClosePress} title="Close" />
      <BottomSheetModal
        backgroundStyle={{ backgroundColor: colors.background }}
        backdropComponent={backdropComponent}
        bottomInset={insets.bottom}
        ref={bottomSheetRef}
        snapPoints={snapPoints}
        keyboardBehavior="interactive"
        handleComponent={SearchHandle}
        animateOnMount={true}
        android_keyboardInputMode="adjustPan">
        <List type="FlatList" />
      </BottomSheetModal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 64,
    justifyContent: 'flex-start',
    backgroundColor: '#222',
  },
});

export default App;