changing layout

components/Location.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Dialog, TextInput, useTheme, Button } from "react-native-paper";
+import { Dialog, TextInput, useTheme, Button, Text } from "react-native-paper";
 import { View } from "react-native";
 import axios from "axios";
 import * as Location from "expo-location";
@@ -13,7 +13,6 @@ const LocationComponent = () => {
     const [loading, setLoading] = useState(false);
     const [locLoading, setLocLoading] = useState(false);
 
-    // Handle submit by zip
     const handleSubmit = async () => {
         if (!zip) return;
         setLoading(true);
@@ -22,14 +21,12 @@ const LocationComponent = () => {
             log.error(response.data);
             const long = response.data[0];
             const lat = response.data[1];
-            // Do something with long/lat as needed
         } catch (err) {
             log.error(err);
         }
         setLoading(false);
     };
 
-    // Handle device geolocation
     const handleGetLocation = async () => {
         setLocLoading(true);
         try {
@@ -42,7 +39,6 @@ const LocationComponent = () => {
             let location = await Location.getCurrentPositionAsync({});
             const { longitude, latitude } = location.coords;
             log.error([longitude, latitude]);
-            // Do something with longitude/latitude as needed
         } catch (err) {
             log.error("Location Error:", err);
         }
@@ -50,14 +46,25 @@ const LocationComponent = () => {
     };
 
     return (
-        <Dialog.Content style={{ maxHeight: 300 }}>
-            <View style={{ flexDirection: "row", alignItems: "center", padding: 16 }}>
+        <Dialog.Content style={{ maxHeight: 360, justifyContent: "center", alignItems: "center" }}>
+            <View style={{ alignItems: "center", width: "100%" }}>
+                <Button
+                    mode="outlined"
+                    onPress={handleGetLocation}
+                    loading={locLoading}
+                    disabled={locLoading}
+                    style={{ marginBottom: 12, width: 200 }}
+                >
+                    Use My Location
+                </Button>
+                <Text style={{ marginBottom: 12, color: theme.colors.primary, fontWeight: "bold" }}>OR</Text>
+                <View style={{ width: 240, alignItems: "center" }}>
                     <TextInput
                         label="Enter Zip Code"
                         mode="outlined"
                         value={zip}
                         onChangeText={setZip}
-                    style={{ flex: 1, marginRight: 10, fontFamily: "SpaceReg" }}
+                        style={{ marginBottom: 10, fontFamily: "SpaceReg", width: "100%" }}
                         placeholderTextColor={theme.colors.primary}
                         textColor={theme.colors.primary}
                         theme={{ colors: { text: theme.colors.primary } }}
@@ -67,18 +74,11 @@ const LocationComponent = () => {
                         onPress={handleSubmit}
                         loading={loading}
                         disabled={!zip || loading}
-                    style={{ marginRight: 6 }}
+                        style={{ width: "100%" }}
                     >
                         Submit
                     </Button>
-                <Button
-                    mode="outlined"
-                    onPress={handleGetLocation}
-                    loading={locLoading}
-                    disabled={locLoading}
-                >
-                    Use My Location
-                </Button>
+                </View>
             </View>
         </Dialog.Content>
     );