♻️ remove SafeAreaView in favor of View component for consistent layout

Author: jaronheard

apps/expo/src/app/new.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback } from "react";
 import { Linking, View } from "react-native";
 import Animated from "react-native-reanimated";
-import { SafeAreaView } from "react-native-safe-area-context";
 import * as ImagePicker from "expo-image-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useUser } from "@clerk/clerk-expo";
@@ -220,7 +219,7 @@ export default function NewEventModal() {
   }
 
   return (
-    <SafeAreaView className="flex-1 bg-[#5A32FB]">
+    <View className="flex-1 bg-[#5A32FB]">
       {/* Wrap everything in a "card" that has rounded top corners, 
           hiding anything behind it so no black gap appears */}
       <View className="flex-1 overflow-hidden rounded-t-3xl bg-interactive-1">
@@ -307,6 +306,6 @@ export default function NewEventModal() {
           />
         </Animated.View>
       </View>
-    </SafeAreaView>
+    </View>
   );
 }

apps/expo/src/app/onboarding/demo-capture.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { SafeAreaView, View } from "react-native";
+import { View } from "react-native";
 import Animated from "react-native-reanimated";
 import { router, Stack } from "expo-router";
 
@@ -83,7 +83,7 @@ export default function DemoCaptureScreen() {
   })).filter((photo) => photo.uri !== "");
 
   return (
-    <SafeAreaView className="flex-1 bg-[#5A32FB]">
+    <View className="flex-1 bg-[#5A32FB]">
       {/* Wrap everything in a "card" that has rounded top corners, 
           hiding anything behind it so no black gap appears */}
       <View className="flex-1 overflow-hidden rounded-t-3xl bg-interactive-1">
@@ -152,6 +152,6 @@ export default function DemoCaptureScreen() {
           />
         </Animated.View>
       </View>
-    </SafeAreaView>
+    </View>
   );
 }