fix: remove native ios modal and set insets on modal content instead of frame #bigbrainmoment

apps/expo/package.json

@@ -63,7 +63,6 @@
     "react-native": "0.73.6",
     "react-native-context-menu-view": "^1.14.1",
     "react-native-gesture-handler": "~2.14.1",
-    "react-native-ios-modal": "^0.1.8",
     "react-native-markdown-display": "^7.0.2",
     "react-native-mmkv": "^2.12.2",
     "react-native-modal": "^13.0.1",

apps/expo/src/app/_layout.tsx

@@ -1,13 +1,10 @@
 /* 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";
@@ -23,8 +20,6 @@ export {
   ErrorBoundary,
 } from "expo-router";
 
-setupNativeSheet("ios", ModalView);
-
 export const unstable_settings = {
   // Ensure that reloading on `/modal` keeps a back button present.
   initialRouteName: "(tabs)",

apps/expo/src/components/player/settings/Sheet.tsx

@@ -22,7 +22,6 @@ function SettingsSheet(props: SheetProps) {
       snapPoints={[90]}
       dismissOnSnapToBottom
       modal
-      native
       animation="spring"
       {...props}
     >
@@ -53,15 +52,11 @@ function SettingsSheetFrame({
   children: React.ReactNode;
   isLoading?: boolean;
 }) {
-  const insets = useSafeAreaInsets();
-
   return (
     <View style={{ flex: 1 }} backgroundColor="black">
       <Sheet.Frame
         backgroundColor="$playerSettingsBackground"
         padding="$5"
-        left={insets.left}
-        right={insets.right}
         gap="$4"
       >
         {isLoading && (
@@ -93,7 +88,7 @@ function SettingsHeader({
   return (
     <>
       <View
-        style={{ paddingRight: insets.right }}
+        style={{ paddingLeft: insets.left, paddingRight: insets.right }}
         flexDirection="row"
         alignItems="center"
         gap="$4"
@@ -115,8 +110,11 @@ function SettingsContent({
   children: React.ReactNode;
 }) {
   const ViewDisplay = isScroll ? ScrollView : View;
+  const insets = useSafeAreaInsets();
+
   return (
     <ViewDisplay
+      style={{ paddingLeft: insets.left, paddingRight: insets.right }}
       contentContainerStyle={{
         gap: "$4",
       }}

pnpm-lock.yaml

@@ -161,9 +161,6 @@ 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-markdown-display:
         specifier: ^7.0.2
         version: 7.0.2(react-native@0.73.6)(react@18.2.0)
@@ -11524,16 +11521,6 @@ 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-markdown-display@7.0.2(react-native@0.73.6)(react@18.2.0):
     resolution: {integrity: sha512-Mn4wotMvMfLAwbX/huMLt202W5DsdpMO/kblk+6eUs55S57VVNni1gzZCh5qpznYLjIQELNh50VIozEfY6fvaQ==}
     peerDependencies: