Fix BottomSheetBackdrop "falsey" defaults

example/src/screens/advanced/BackdropExample.tsx

@@ -7,8 +7,9 @@ import HeaderHandle from '../../components/headerHandle';
 
 const BackdropExample = () => {
   // state
-  const [backdropPressBehavior, setBackdropPressBehavior] =
-    useState<'none' | 'close' | 'collapse'>('collapse');
+  const [backdropPressBehavior, setBackdropPressBehavior] = useState<
+    'none' | 'close' | 'collapse'
+  >('collapse');
 
   // hooks
   const bottomSheetRef = useRef<BottomSheet>(null);

src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx

@@ -24,10 +24,10 @@ import type { BottomSheetDefaultBackdropProps } from './types';
 
 const BottomSheetBackdropComponent = ({
   animatedIndex,
-  opacity = DEFAULT_OPACITY,
-  appearsOnIndex = DEFAULT_APPEARS_ON_INDEX,
-  disappearsOnIndex = DEFAULT_DISAPPEARS_ON_INDEX,
-  enableTouchThrough = DEFAULT_ENABLE_TOUCH_THROUGH,
+  opacity: userOpacity,
+  appearsOnIndex: userAppearsOnIndex,
+  disappearsOnIndex: userDisappearsOnIndex,
+  enableTouchThrough: userEnableTouchThrough,
   pressBehavior = DEFAULT_PRESS_BEHAVIOR,
   style,
   children,
@@ -36,6 +36,15 @@ const BottomSheetBackdropComponent = ({
   const { snapToIndex, close } = useBottomSheet();
   //#endregion
 
+  //#region defaults
+  const opacity = userOpacity ?? DEFAULT_OPACITY;
+  const appearsOnIndex = userAppearsOnIndex ?? DEFAULT_APPEARS_ON_INDEX;
+  const disappearsOnIndex =
+    userDisappearsOnIndex ?? DEFAULT_DISAPPEARS_ON_INDEX;
+  const enableTouchThrough =
+    userEnableTouchThrough ?? DEFAULT_ENABLE_TOUCH_THROUGH;
+  //#endregion
+
   //#region variables
   const containerRef = useRef<Animated.View>(null);
   const pointerEvents = enableTouchThrough ? 'none' : 'auto';

src/components/bottomSheetBackdrop/types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import type { ViewProps } from 'react-native';
 import type { BottomSheetVariables } from '../../types';
 
@@ -42,5 +43,5 @@ export interface BottomSheetDefaultBackdropProps
   /**
    * Child component that will be rendered on backdrop.
    */
-  children?: React.ReactNode | React.ReactNode[];
+  children?: ReactNode | ReactNode[];
 }

src/contexts/external.ts

@@ -1,7 +1,8 @@
 import { createContext } from 'react';
 import type { BottomSheetMethods, BottomSheetVariables } from '../types';
 
-export const BottomSheetContext =
-  createContext<(BottomSheetMethods & BottomSheetVariables) | null>(null);
+export const BottomSheetContext = createContext<
+  (BottomSheetMethods & BottomSheetVariables) | null
+>(null);
 
 export const BottomSheetProvider = BottomSheetContext.Provider;