From 7e00dd2e30808a122d28ca1e37eebe19e450b884 Mon Sep 17 00:00:00 2001
From: Jakob Heuser <jakob@codedrift.com>
Date: Fri, 22 Apr 2022 14:03:24 -0700
Subject: [PATCH] fix: updated BottomSheetBackdrop "falsey" default props
 (#793)(by @jakobo)

* fix: fixes BottomSheetBackdrop defaults

Coercion of 0 and false result in defaults being accidentally assigned
to the BottomSheetBackdrop's props. This fix uses the null coalesce
operator ?? to use either a user supplied value or fall back to the
built-in default.

Resolves #779

* chore: fixes detected prettier/eslint errors

Fixed errors found by running `yarn typescript` and `yarn lint` to fix
errors that could not be automatically fixed.

* refactor: applies updates from PR review
---
 .../src/screens/advanced/BackdropExample.tsx    |  5 +++--
 .../bottomSheetBackdrop/BottomSheetBackdrop.tsx | 17 +++++++++++++----
 src/components/bottomSheetBackdrop/types.d.ts   |  3 ++-
 src/contexts/external.ts                        |  5 +++--
 4 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/example/src/screens/advanced/BackdropExample.tsx b/example/src/screens/advanced/BackdropExample.tsx
index 45039012c..3b4d95363 100644
--- a/example/src/screens/advanced/BackdropExample.tsx
+++ b/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);
diff --git a/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx b/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
index 69db94673..2446c1df9 100644
--- a/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
+++ b/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: _providedOpacity,
+  appearsOnIndex: _providedAppearsOnIndex,
+  disappearsOnIndex: _providedDisappearsOnIndex,
+  enableTouchThrough: _providedEnableTouchThrough,
   pressBehavior = DEFAULT_PRESS_BEHAVIOR,
   style,
   children,
@@ -36,6 +36,15 @@ const BottomSheetBackdropComponent = ({
   const { snapToIndex, close } = useBottomSheet();
   //#endregion
 
+  //#region defaults
+  const opacity = _providedOpacity ?? DEFAULT_OPACITY;
+  const appearsOnIndex = _providedAppearsOnIndex ?? DEFAULT_APPEARS_ON_INDEX;
+  const disappearsOnIndex =
+    _providedDisappearsOnIndex ?? DEFAULT_DISAPPEARS_ON_INDEX;
+  const enableTouchThrough =
+    _providedEnableTouchThrough ?? DEFAULT_ENABLE_TOUCH_THROUGH;
+  //#endregion
+
   //#region variables
   const containerRef = useRef<Animated.View>(null);
   const pointerEvents = enableTouchThrough ? 'none' : 'auto';
diff --git a/src/components/bottomSheetBackdrop/types.d.ts b/src/components/bottomSheetBackdrop/types.d.ts
index 0ebbbf48c..75268ee7c 100644
--- a/src/components/bottomSheetBackdrop/types.d.ts
+++ b/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[];
 }
diff --git a/src/contexts/external.ts b/src/contexts/external.ts
index 3b3ec6d2b..2e1b84958 100644
--- a/src/contexts/external.ts
+++ b/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;