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,102 +107,103 @@ const LocationComponent = () => {
     );
 
     return (
-        <Dialog.Content style={{ maxHeight: 500, justifyContent: "center", alignItems: "center" }}>
+        <Portal>
-            <View style={{ alignItems: "center", width: "100%" }}>
+            <Dialog visible={visible}
-                <Button
+                    onDismiss={() => {
-                    mode="outlined"
+                        onClose();
-                    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
-                    style={{
-                        flexDirection: "row",
-                        alignItems: "center",
-                        width: BUTTON_WIDTH,
-                        justifyContent: "center",
-                        marginBottom: 4,
                     }}
-                >
+                    style={{ backgroundColor: theme.colors.background }}>
-                    <TextInput
+                <Dialog.Title style={{color: theme.colors.primary, textAlign: 'center'}}>Location</Dialog.Title>
-                        label="Enter Zip Code"
+                <Dialog.Content style={{ maxHeight: 500, justifyContent: "center", alignItems: "center" }}>
-                        mode="outlined"
+                    <View style={{ alignItems: "center", width: "100%" }}>
-                        value={zip}
+                        <Button mode="outlined" onPress={handleGetLocation} loading={locLoading} disabled={locLoading}
-                        onChangeText={setZip}
+                            style={{ marginBottom: 12, width: BUTTON_WIDTH }}>Use My Location</Button>
-                        style={{
+                        <Text style={{ marginBottom: 12, color: theme.colors.primary, fontWeight: "bold" }}>OR</Text>
-                            flex: 3,
+                        <View style={{
-                            marginRight: 6,
+                                flexDirection: "row",
-                            fontFamily: "SpaceReg",
+                                alignItems: "center",
-                            minWidth: 0,
+                                width: BUTTON_WIDTH,
-                        }}
+                                justifyContent: "center",
-                        placeholderTextColor={theme.colors.primary}
+                                marginBottom: 4,
-                        textColor={theme.colors.primary}
+                            }}
-                        theme={{ colors: { text: theme.colors.primary } }}
+                        >
-                    />
+                            <TextInput
-                    <Button
+                                label="Enter Zip Code"
-                        mode="contained"
+                                mode="outlined"
-                        onPress={handleSubmit}
+                                value={zip}
-                        loading={loading}
+                                onChangeText={setZip}
-                        disabled={!zip || loading}
+                                style={{
-                        style={{
+                                    flex: 3,
-                            flex: 2,
+                                    marginRight: 6,
-                            minWidth: 0,
+                                    fontFamily: "SpaceReg",
-                            height: 50,
+                                    minWidth: 0,
-                        }}
+                                }}
-                        contentStyle={{ height: 50 }}
+                                placeholderTextColor={theme.colors.primary}
-                    >
+                                textColor={theme.colors.primary}
-                        Submit
+                                theme={{ colors: { text: theme.colors.primary } }}
-                    </Button>
-                </View>
-                <View style={{ width: BUTTON_WIDTH, marginTop: 10, alignItems: "center" }}>
-                    <Text style={{ color: theme.colors.primary, marginBottom: 2 }}>
-                        Distance: {distance} mile{distance !== 1 ? "s" : ""}
-                    </Text>
-                    <Slider
-                        style={{ width: "100%", height: 36 }}
-                        minimumValue={1}
-                        maximumValue={40}
-                        step={1}
-                        value={distance}
-                        onValueChange={setDistance}
-                        minimumTrackTintColor={theme.colors.primary}
-                        maximumTrackTintColor={theme.colors.onSurfaceDisabled || "#ccc"}
-                        thumbTintColor={theme.colors.primary}
-                    />
-                </View>
-                {/* Parks List */}
-                {hasSearched && (
-                    <View style={{ width: BUTTON_WIDTH, marginTop: 18, maxHeight: 200 }}>
-                        <Text style={{
-                            fontWeight: "bold",
-                            fontSize: 18,
-                            marginBottom: parks != null ? 8 : 2,
-                            color: theme.colors.primary
-                        }}>
-                            Nearby Dogparks
-                        </Text>
-                        {parks != null ? (
-                            <FlatList
-                                data={parks}
-                                keyExtractor={(_, idx) => String(idx)}
-                                renderItem={renderItem}
-                                showsVerticalScrollIndicator={false}
-                                style={{ maxHeight: 170 }}
                             />
-                        ) : (
+                            <Button
-                            <Text style={{ color: theme.colors.onSurface, textAlign: "center", marginTop: 12 }}>
+                                mode="contained"
-                                No parks found in range.
+                                onPress={handleSubmit}
+                                loading={loading}
+                                disabled={!zip || loading}
+                                style={{
+                                    flex: 2,
+                                    minWidth: 0,
+                                    height: 50,
+                                }}
+                                contentStyle={{ height: 50 }}
+                            >
+                                Submit
+                            </Button>
+                        </View>
+                        <View style={{ width: BUTTON_WIDTH, marginTop: 10, alignItems: "center" }}>
+                            <Text style={{ color: theme.colors.primary, marginBottom: 2 }}>
+                                Distance: {distance} mile{distance !== 1 ? "s" : ""}
                             </Text>
+                            <Slider
+                                style={{ width: "100%", height: 36 }}
+                                minimumValue={1}
+                                maximumValue={40}
+                                step={1}
+                                value={distance}
+                                onValueChange={setDistance}
+                                minimumTrackTintColor={theme.colors.primary}
+                                maximumTrackTintColor={theme.colors.onSurfaceDisabled || "#ccc"}
+                                thumbTintColor={theme.colors.primary}
+                            />
+                        </View>
+                        {/* Parks List */}
+                        {hasSearched && (
+                            <View style={{ width: BUTTON_WIDTH, marginTop: 18, maxHeight: 200 }}>
+                                <Text style={{
+                                    fontWeight: "bold",
+                                    fontSize: 18,
+                                    marginBottom: parks != null ? 8 : 2,
+                                    color: theme.colors.primary
+                                }}>
+                                    Nearby Dogparks
+                                </Text>
+                                {parks != null ? (
+                                    <FlatList
+                                        data={parks}
+                                        keyExtractor={(_, idx) => String(idx)}
+                                        renderItem={renderItem}
+                                        showsVerticalScrollIndicator={false}
+                                        style={{ maxHeight: 170 }}
+                                    />
+                                ) : (
+                                    <Text style={{ color: theme.colors.onSurface, textAlign: "center", marginTop: 12 }}>
+                                        No parks found in range.
+                                    </Text>
+                                )}
+                            </View>
                         )}
                     </View>
-                )}
+                </Dialog.Content>
-            </View>
+            </Dialog>
-        </Dialog.Content>
+        </Portal>
     );
 };
 
-export default LocationComponent;
+export default LocationScreen;