Move location out of dialogs

app/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {View, Text } from "react-native";
 import { useTheme } from "react-native-paper";
 import Profile from "@/components/Profile";
+import LocationScreen from "@/components/Location";
 import Status from "@/components/Status";
 import TopNav from "@/components/TopNav";
 import DrawerMenu from "@/components/DrawerMenu";
@@ -63,11 +64,9 @@ const Index = () => {
                 aboutVisible={isAboutActive}
                 privacyVisible={isPrivacyActive}
                 bugVisible={isBugActive}
-                locationVisible={isLocationActive}
                 toggleAbout={() => setAboutActive(!isAboutActive)}
                 togglePrivacy={() => setPrivacyActive(!isPrivacyActive)}
                 toggleBug={() => setBugActive(!isBugActive)}
-                toggleLocation={() => setLocationActive(!isLocationActive)}
             />
             <TopNav
                 toggleMenu={() => setMenuActive(!isMenuActive)}
@@ -94,6 +93,13 @@ const Index = () => {
                 setChanged={setUserDataChanged}
                 onClose={() => setProfileActive(false)}
             />
+            <LocationScreen
+                visible={isLocationActive}
+                setTheme={setTheme}
+                currentTheme={currentTheme}
+                setChanged={setUserDataChanged}
+                onClose={() => setLocationActive(false)}
+            />
         </View>
     );
 };

components/Dialogs.tsx

@@ -3,20 +3,18 @@ import { Portal, Button, Dialog, useTheme } from "react-native-paper";
 import About from "@/components/About";
 import Privacy from "@/components/Privacy";
 import Broken from "@/components/Broken";
-import Location from "@/components/Location";
+
 
 interface DialogsProps {
     aboutVisible: boolean;
     privacyVisible: boolean;
     bugVisible: boolean;
-    locationVisible: boolean;
     toggleAbout: () => void;
     togglePrivacy: () => void;
     toggleBug: () => void;
-    toggleLocation: () => void;
 }
 
-const Dialogs: React.FC<DialogsProps> = ({ aboutVisible, privacyVisible, bugVisible, locationVisible, toggleAbout, togglePrivacy, toggleBug, toggleLocation }) => {
+const Dialogs: React.FC<DialogsProps> = ({ aboutVisible, privacyVisible, bugVisible, toggleAbout, togglePrivacy, toggleBug }) => {
     const theme = useTheme();
     return (
         <Portal>
@@ -56,18 +54,6 @@ const Dialogs: React.FC<DialogsProps> = ({ aboutVisible, privacyVisible, bugVisi
                     </Button>
                 </Dialog.Actions>
             </Dialog>
-            <Dialog visible={locationVisible} onDismiss={() => toggleLocation()}
-                    style={{backgroundColor: theme.colors.primaryContainer}}>
-                <Dialog.Title style={{color: theme.colors.primary, textAlign: 'center'}}>Location</Dialog.Title>
-                <Location />
-                <Dialog.Actions style={{justifyContent: "center"}}>
-                    <Button onPress={() => toggleLocation()} mode="contained"
-                            style={{backgroundColor: theme.colors.inversePrimary}}
-                            labelStyle={{color: theme.colors.primary}}>
-                        Close
-                    </Button>
-                </Dialog.Actions>
-            </Dialog>
         </Portal>
     )
 }

components/Location.tsx

@@ -1,11 +1,19 @@
 import React, { useState } from "react";
-import { Dialog, TextInput, useTheme, Button, Text, List } from "react-native-paper";
+import {Dialog, TextInput, useTheme, Button, Text, List, Portal} from "react-native-paper";
 import { View, FlatList } from "react-native";
 import Slider from "@react-native-community/slider";
 import axios from "axios";
 import * as Location from "expo-location";
 import log from "@/util/log";
 
+interface LocationScreenProps {
+    visible: boolean;
+    setChanged: (dataChanged: boolean) => void;
+    setTheme: (theme: string) => void;
+    currentTheme: string;
+    onClose: () => void;
+}
+
 export const API_URL = process.env.EXPO_PUBLIC_API_URL;
 const BUTTON_WIDTH = 260;
 
@@ -20,7 +28,7 @@ type Park = {
     };
 };
 
-const LocationComponent = () => {
+const LocationScreen: React.FC<LocationScreenProps> = ({ visible, setTheme, currentTheme, setChanged, onClose }) => {
     const theme = useTheme();
     const [zip, setZip] = useState("");
     const [distance, setDistance] = useState(25);
@@ -99,20 +107,19 @@ const LocationComponent = () => {
     );
 
     return (
+        <Portal>
+            <Dialog visible={visible}
+                    onDismiss={() => {
+                        onClose();
+                    }}
+                    style={{ backgroundColor: theme.colors.background }}>
+                <Dialog.Title style={{color: theme.colors.primary, textAlign: 'center'}}>Location</Dialog.Title>
                 <Dialog.Content style={{ maxHeight: 500, justifyContent: "center", alignItems: "center" }}>
                     <View style={{ alignItems: "center", width: "100%" }}>
-                <Button
+                        <Button mode="outlined" onPress={handleGetLocation} loading={locLoading} disabled={locLoading}
-                    mode="outlined"
+                            style={{ marginBottom: 12, width: BUTTON_WIDTH }}>Use My Location</Button>
-                    onPress={handleGetLocation}
-                    loading={locLoading}
-                    disabled={locLoading}
-                    style={{ marginBottom: 12, width: BUTTON_WIDTH }}
-                >
-                    Use My Location
-                </Button>
                         <Text style={{ marginBottom: 12, color: theme.colors.primary, fontWeight: "bold" }}>OR</Text>
-                <View
+                        <View style={{
-                    style={{
                                 flexDirection: "row",
                                 alignItems: "center",
                                 width: BUTTON_WIDTH,
@@ -194,7 +201,9 @@ const LocationComponent = () => {
                         )}
                     </View>
                 </Dialog.Content>
+            </Dialog>
+        </Portal>
     );
 };
 
-export default LocationComponent;
+export default LocationScreen;