From 44df83c9fbd054733f348a08d10f91af5a2ec1b6 Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Sun, 24 Mar 2024 21:24:33 +0100
Subject: [PATCH] fix: use native modals on iOS & respect safe area

---
 apps/expo/package.json                        |  1 +
 apps/expo/src/app/_layout.tsx                 |  5 ++
 .../src/components/player/settings/Sheet.tsx  | 49 ++++++++++---------
 pnpm-lock.yaml                                | 13 +++++
 4 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/apps/expo/package.json b/apps/expo/package.json
index 36c848f..88fa75c 100644
--- a/apps/expo/package.json
+++ b/apps/expo/package.json
@@ -62,6 +62,7 @@
     "react-native-change-icon": "^5.0.0",
     "react-native-context-menu-view": "^1.14.1",
     "react-native-gesture-handler": "~2.14.1",
+    "react-native-ios-modal": "^0.1.8",
     "react-native-modal": "^13.0.1",
     "react-native-quick-base64": "^2.0.8",
     "react-native-quick-crypto": "^0.6.1",
diff --git a/apps/expo/src/app/_layout.tsx b/apps/expo/src/app/_layout.tsx
index 6c1029d..0c2c658 100644
--- a/apps/expo/src/app/_layout.tsx
+++ b/apps/expo/src/app/_layout.tsx
@@ -1,10 +1,13 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { useEffect } from "react";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
+// @ts-expect-error - No exported types
+import { ModalView } from "react-native-ios-modal";
 import { useFonts } from "expo-font";
 import { SplashScreen, Stack } from "expo-router";
 import FontAwesome from "@expo/vector-icons/FontAwesome";
 import { DarkTheme, ThemeProvider } from "@react-navigation/native";
+import { setupNativeSheet } from "@tamagui/sheet";
 import { ToastProvider, ToastViewport } from "@tamagui/toast";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { TamaguiProvider, Theme, useTheme } from "tamagui";
@@ -20,6 +23,8 @@ export {
   ErrorBoundary,
 } from "expo-router";
 
+setupNativeSheet("ios", ModalView);
+
 export const unstable_settings = {
   // Ensure that reloading on `/modal` keeps a back button present.
   initialRouteName: "(tabs)",
diff --git a/apps/expo/src/components/player/settings/Sheet.tsx b/apps/expo/src/components/player/settings/Sheet.tsx
index d5a87af..9e0ad30 100644
--- a/apps/expo/src/components/player/settings/Sheet.tsx
+++ b/apps/expo/src/components/player/settings/Sheet.tsx
@@ -1,5 +1,5 @@
 import type { SheetProps, ViewProps } from "tamagui";
-import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   ScrollView,
   Separator,
@@ -22,6 +22,7 @@ function SettingsSheet(props: SheetProps) {
       snapPoints={[90]}
       dismissOnSnapToBottom
       modal
+      native
       animation="spring"
       {...props}
     >
@@ -52,27 +53,29 @@ function SettingsSheetFrame({
   children: React.ReactNode;
   isLoading?: boolean;
 }) {
+	const insets = useSafeAreaInsets();
+
   return (
-    <SafeAreaProvider>
-      <SafeAreaView style={{ flex: 1 }}>
-        <Sheet.Frame
-          backgroundColor="$playerSettingsBackground"
-          padding="$5"
-          gap="$4"
-        >
-          {isLoading && (
-            <Spinner
-              size="large"
-              color="$loadingIndicator"
-              style={{
-                position: "absolute",
-              }}
-            />
-          )}
-          {!isLoading && children}
-        </Sheet.Frame>
-      </SafeAreaView>
-    </SafeAreaProvider>
+	<View style={{flex: 1}} backgroundColor='black'>
+    <Sheet.Frame
+      backgroundColor="$playerSettingsBackground"
+      padding="$5"
+	  left={insets.left}
+	  right={insets.right}
+      gap="$4"
+    >
+      {isLoading && (
+        <Spinner
+          size="large"
+          color="$loadingIndicator"
+          style={{
+            position: "absolute",
+          }}
+        />
+      )}
+      {!isLoading && children}
+    </Sheet.Frame>
+	</View>
   );
 }
 
@@ -85,9 +88,11 @@ function SettingsHeader({
   title: string;
   rightButton?: React.ReactNode;
 }) {
+	const insets = useSafeAreaInsets();
+
   return (
     <>
-      <View flexDirection="row" alignItems="center" gap="$4">
+	<View style={{ paddingRight: insets.right }} flexDirection="row" alignItems="center" gap="$4">
         {icon}
         <PlayerText flexGrow={1}>{title}</PlayerText>
         {rightButton}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2ec185f..925b630 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -158,6 +158,9 @@ importers:
       react-native-gesture-handler:
         specifier: ~2.14.1
         version: 2.14.1(react-native@0.73.6)(react@18.2.0)
+      react-native-ios-modal:
+        specifier: ^0.1.8
+        version: 0.1.8(react-native@0.73.6)(react@18.2.0)
       react-native-modal:
         specifier: ^13.0.1
         version: 13.0.1(react-native@0.73.6)(react@18.2.0)
@@ -11538,6 +11541,16 @@ packages:
       react-native: 0.73.6(@babel/core@7.23.9)(@babel/preset-env@7.23.9)(react@18.2.0)
     dev: false
 
+  /react-native-ios-modal@0.1.8(react-native@0.73.6)(react@18.2.0):
+    resolution: {integrity: sha512-kA068hIhI9+r21OnRXzkRevGjGYTVAYf5kzsIFI15IrCiAkR40dE2lqJtOpnrB3lZ9KZeS0ph59qNNpDSG7xpA==}
+    peerDependencies:
+      react: '*'
+      react-native: '*'
+    dependencies:
+      react: 18.2.0
+      react-native: 0.73.6(@babel/core@7.23.9)(@babel/preset-env@7.23.9)(react@18.2.0)
+    dev: false
+
   /react-native-modal@13.0.1(react-native@0.73.6)(react@18.2.0):
     resolution: {integrity: sha512-UB+mjmUtf+miaG/sDhOikRfBOv0gJdBU2ZE1HtFWp6UixW9jCk/bhGdHUgmZljbPpp0RaO/6YiMmQSSK3kkMaw==}
     peerDependencies: