From bb3a34d200f59bb1887803a2b8b5b6af5125e926 Mon Sep 17 00:00:00 2001
From: gewfy <jakob@29k.org>
Date: Wed, 1 Jan 2025 16:30:38 +0100
Subject: [PATCH] Refactor Overlay to be used as containerComponent

---
 src/BottomSheetView.tsx | 91 ++++++++++++++++++++---------------------
 1 file changed, 45 insertions(+), 46 deletions(-)

diff --git a/src/BottomSheetView.tsx b/src/BottomSheetView.tsx
index cc6f6c9..c2ee70e 100644
--- a/src/BottomSheetView.tsx
+++ b/src/BottomSheetView.tsx
@@ -21,7 +21,7 @@ type BottomSheetModalScreenProps = BottomSheetModalProps & {
   navigation: BottomSheetNavigationProp<ParamListBase>;
 };
 
-function Overlay({ children }: { children: React.ReactNode }) {
+function Overlay({ children }: { children?: React.ReactNode }) {
   if (Platform.OS === 'ios') {
     return (
       <FullWindowOverlay>
@@ -132,51 +132,50 @@ export function BottomSheetView({ state, descriptors }: Props) {
   return (
     <>
       {firstScreen.render()}
-      <Overlay>
-        {shouldRenderProvider.current && (
-          <BottomSheetModalProvider>
-            {state.routes.slice(1).map((route) => {
-              const { options, navigation, render } = descriptors[route.key];
-
-              const {
-                index,
-                backgroundStyle,
-                handleIndicatorStyle,
-                snapPoints,
-                enableDynamicSizing,
-                ...sheetProps
-              } = options;
-
-              return (
-                <BottomSheetModalScreen
-                  key={route.key}
-                  // Make sure index is in range, it could be out if snapToIndex is persisted
-                  // and snapPoints is changed.
-                  index={Math.min(
-                    route.snapToIndex ?? index ?? 0,
-                    snapPoints != null ? snapPoints.length - 1 : 0,
-                  )}
-                  snapPoints={
-                    snapPoints == null && !enableDynamicSizing
-                      ? DEFAULT_SNAP_POINTS
-                      : snapPoints
-                  }
-                  enableDynamicSizing={enableDynamicSizing}
-                  navigation={navigation}
-                  backgroundStyle={[themeBackgroundStyle, backgroundStyle]}
-                  handleIndicatorStyle={[
-                    themeHandleIndicatorStyle,
-                    handleIndicatorStyle,
-                  ]}
-                  {...sheetProps}
-                >
-                  {render()}
-                </BottomSheetModalScreen>
-              );
-            })}
-          </BottomSheetModalProvider>
-        )}
-      </Overlay>
+      {shouldRenderProvider.current && (
+        <BottomSheetModalProvider>
+          {state.routes.slice(1).map((route) => {
+            const { options, navigation, render } = descriptors[route.key];
+
+            const {
+              index,
+              backgroundStyle,
+              handleIndicatorStyle,
+              snapPoints,
+              enableDynamicSizing,
+              ...sheetProps
+            } = options;
+
+            return (
+              <BottomSheetModalScreen
+                key={route.key}
+                // Make sure index is in range, it could be out if snapToIndex is persisted
+                // and snapPoints is changed.
+                index={Math.min(
+                  route.snapToIndex ?? index ?? 0,
+                  snapPoints != null ? snapPoints.length - 1 : 0,
+                )}
+                snapPoints={
+                  snapPoints == null && !enableDynamicSizing
+                    ? DEFAULT_SNAP_POINTS
+                    : snapPoints
+                }
+                enableDynamicSizing={enableDynamicSizing}
+                navigation={navigation}
+                backgroundStyle={[themeBackgroundStyle, backgroundStyle]}
+                handleIndicatorStyle={[
+                  themeHandleIndicatorStyle,
+                  handleIndicatorStyle,
+                ]}
+                containerComponent={Overlay}
+                {...sheetProps}
+              >
+                {render()}
+              </BottomSheetModalScreen>
+            );
+          })}
+        </BottomSheetModalProvider>
+      )}
     </>
   );
 }