Only use FullWindowOverlay on iOS

Author: janicduplessis

src/BottomSheetView.tsx

@@ -5,9 +5,10 @@ import {
   BottomSheetView as RNBottomSheetView,
 } from '@gorhom/bottom-sheet';
 import { ParamListBase, useTheme } from '@react-navigation/native';
-import { FullWindowOverlay } from 'react-native-screens';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
 import * as React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { FullWindowOverlay } from 'react-native-screens';
 import type {
   BottomSheetDescriptorMap,
   BottomSheetNavigationConfig,
@@ -20,6 +21,24 @@ type BottomSheetModalScreenProps = BottomSheetModalProps & {
   navigation: BottomSheetNavigationProp<ParamListBase>;
 };
 
+function Overlay({ children }: { children: React.ReactNode }) {
+  if (Platform.OS === 'ios') {
+    return (
+      <FullWindowOverlay>
+        <SafeAreaProvider style={styles.safeAreaProvider}>
+          {children}
+        </SafeAreaProvider>
+      </FullWindowOverlay>
+    );
+  } else {
+    return (
+      <SafeAreaProvider style={styles.safeAreaProvider}>
+        {children}
+      </SafeAreaProvider>
+    );
+  }
+}
+
 function BottomSheetModalScreen({
   index,
   navigation,
@@ -117,53 +136,55 @@ export function BottomSheetView({ state, descriptors }: Props) {
   return (
     <>
       {firstScreen.render()}
-      <FullWindowOverlay>
-        <SafeAreaProvider style={{ flex: 1, pointerEvents: 'box-none' }}>
-          {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>
-          )}
-        </SafeAreaProvider>
-      </FullWindowOverlay>
+      <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>
     </>
   );
 }
+
+const styles = StyleSheet.create({
+  safeAreaProvider: { flex: 1, pointerEvents: 'box-none' },
+});