adding navigation to maps from form screens

4 years ago · 4b3ba291f5
7 changed files with 385 additions and 15 deletions
--- a/src/app/components/forms/FormLocationPicker.js
+++ b/src/app/components/forms/FormLocationPicker.js
@ -7,12 +7,10 @@ import {

 import { MaterialIcons } from '@expo/vector-icons';
 import colors from "../../config/colors";
-import { Colors } from "react-native/Libraries/NewAppScreen";
 import { TouchableOpacity } from "react-native-gesture-handler";

-const FormLocationPicker = (props) => {
+function FormLocationPicker (){
    return (
-        <TouchableOpacity>
            <View>
                <View style={styles.location}>
                    <View style={styles.mapIcon}>
@ -24,7 +22,6 @@ const FormLocationPicker = (props) => {
                </View>
                <Text style={{ color: colors.primary }}>Defina o local no mapa</Text>
            </View>
-        </TouchableOpacity>
    );

 }
--- a/src/app/navigation/SharingDataOptionsNavigator.js
+++ b/src/app/navigation/SharingDataOptionsNavigator.js
@ -8,6 +8,7 @@ import RiverFloodSharingDataScreen from '../screens/RiverFloodSharingDataScreen'
 import SharingFloodZonesScreen from '../screens/SharingFloodZonesScreen';
 import PluviometerSharingDataScreen from '../screens/PluviometerSharingDataScreen';
 import SharingDataNavigator from './SharingDataNavigator';
+import MapFormScreen from '../screens/MapFormScreen';


 const Stack = createStackNavigator();
@ -61,6 +62,16 @@ function SharingDataOptionsNavigator() {
            backgroundColor: "white",
          },
        }}
+      />      
+      <Stack.Screen
+        name="FormMap"
+        component={MapFormScreen}
+        options={{
+          title: "Voltar",
+          headerStyle: {
+            backgroundColor: "white",
+          },
+        }}
      />
    </Stack.Navigator>
  );
--- a/src/app/screens/MapFormScreen.js
+++ b/src/app/screens/MapFormScreen.js
@ -0,0 +1,76 @@
+import React, { useEffect, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import MapView, { Marker } from "react-native-maps";
+
+import colors from "../config/colors";
+import { screen_width, screen_height } from "../config/dimensions";
+
+import useLocation from "../hooks/useLocation";
+import useMarkers from "../hooks/selectFromDB";
+import MapMarker from "../components/MapMarker";
+import attachFocusToQuery from "../hooks/useFocus";
+import SearchBox from "../components/maps/SearchBox";
+
+function MapFormScreen(props) {
+    const location = useLocation({
+        latitude: -22.1070263,
+        longitude: -51.3948396,
+    });
+
+    
+
+    const hasToQuery = attachFocusToQuery();
+    const markers = useMarkers(hasToQuery);
+
+    // console.log(markers);
+    const map_scale = 0.003;
+    const lat_long_delta = {
+        latitudeDelta: map_scale,
+        longitudeDelta: map_scale * (screen_width / screen_height),
+    };
+
+    const local = useLocation();
+
+    return (
+        <View style={styles.container}>
+            <MapView
+                style={styles.mapStyle}
+                showsUserLocation={true}
+                initialRegion={{
+                    latitude: local.latitude,
+                    longitude: local.longitude,
+                    ...lat_long_delta,
+                }}
+                region={{
+                    latitude: local.latitude,
+                    longitude: local.longitude,
+                    ...lat_long_delta,
+                }}
+            >
+                <Marker draggable ={true}
+                    coordinate={{
+                        latitude: local.latitude,
+                        longitude: local.longitude,
+                    }}
+                    onDragEnd={(e) => console.log({ x: e.nativeEvent.coordinate })}
+                ></Marker>
+            </MapView>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: colors.black,
+        flex: 1,
+    },
+    mapStyle: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
+});
+
+export default MapFormScreen;
--- a/src/app/screens/PluviometerSharingDataScreen.js
+++ b/src/app/screens/PluviometerSharingDataScreen.js
@ -17,9 +17,11 @@ import FormDatePicker from "../components/forms/FormDatePicker";
 import colors from "../config/colors/";
 import moment from "moment";
 import FormLocationPicker from "../components/forms/FormLocationPicker";
+import { TouchableOpacity } from "react-native-gesture-handler";

 const dims = scaleDimsFromWidth(85, 85, 25);

+
 const validationSchema = Yup.object().shape({
  pluviometer: Yup.number()
    .required("Campo obrigatório")
@ -103,8 +105,10 @@ function PluviometerSharingDataScreen(props) {
              />
            </View>
            {/*Local do evento:*/}
-            <View style={{ flex: 0.48 }}>
-              <FormLocationPicker />
+            <View style={{ flex: 0.48 }} >
+              <TouchableOpacity onPress={() => props.navigation.navigate("FormMap")}>
+                <FormLocationPicker />
+              </TouchableOpacity>
            </View>
          </View>

--- a/src/app/screens/RiverFloodSharingDataScreen.js
+++ b/src/app/screens/RiverFloodSharingDataScreen.js
@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { StyleSheet, View } from "react-native";
+import { StyleSheet, View, TouchableOpacity } from "react-native";
 import * as Yup from "yup";

 import {
@ -155,7 +155,9 @@ function RiverFloodSharingDataScreen(props) {
            </View>
            {/*Local do evento:*/}
            <View style={{ flex: 0.48 }}>
-              <FormLocationPicker />
+              <TouchableOpacity onPress={() => props.navigation.navigate("FormMap")}>
+                <FormLocationPicker />
+              </TouchableOpacity>
            </View>
          </View>

--- a/src/package-lock.json
+++ b/src/package-lock.json
@ -1287,6 +1287,87 @@
        "@types/hammerjs": "^2.0.36"
      }
    },
+    "@emotion/cache": {
+      "version": "10.0.29",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
+      "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
+      "requires": {
+        "@emotion/sheet": "0.9.4",
+        "@emotion/stylis": "0.8.5",
+        "@emotion/utils": "0.11.3",
+        "@emotion/weak-memoize": "0.2.5"
+      }
+    },
+    "@emotion/core": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.1.1.tgz",
+      "integrity": "sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@emotion/cache": "^10.0.27",
+        "@emotion/css": "^10.0.27",
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/sheet": "0.9.4",
+        "@emotion/utils": "0.11.3"
+      }
+    },
+    "@emotion/css": {
+      "version": "10.0.27",
+      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
+      "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
+      "requires": {
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/utils": "0.11.3",
+        "babel-plugin-emotion": "^10.0.27"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/serialize": {
+      "version": "0.11.16",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
+      "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
+      "requires": {
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/unitless": "0.7.5",
+        "@emotion/utils": "0.11.3",
+        "csstype": "^2.5.7"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
+      "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
+      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
    "@eslint/eslintrc": {
      "version": "0.2.2",
      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.2.2.tgz",
@ -3635,6 +3716,11 @@
        "@babel/types": "^7.3.0"
      }
    },
+    "@types/googlemaps": {
+      "version": "3.43.3",
+      "resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.43.3.tgz",
+      "integrity": "sha512-ZWNoz/O8MPEpiajvj7QiqCY8tTLFNqNZ/a+s+zTV58wFVNAvvqV4bdGfnsjTb5Cs4V6wEsLrX8XRhmnyYJ2Tdg=="
+    },
    "@types/graceful-fs": {
      "version": "4.1.4",
      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.4.tgz",
@ -3689,6 +3775,11 @@
      "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
      "dev": true
    },
+    "@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
+    },
    "@types/prettier": {
      "version": "1.19.1",
      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-1.19.1.tgz",
@ -4430,6 +4521,23 @@
        "object.assign": "^4.1.0"
      }
    },
+    "babel-plugin-emotion": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz",
+      "integrity": "sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/serialize": "^0.11.16",
+        "babel-plugin-macros": "^2.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^1.0.5",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7"
+      }
+    },
    "babel-plugin-istanbul": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz",
@ -4454,6 +4562,60 @@
        "@types/babel__traverse": "^7.0.6"
      }
    },
+    "babel-plugin-macros": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      },
+      "dependencies": {
+        "cosmiconfig": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.1.0",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.7.2"
+          }
+        },
+        "import-fresh": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+          "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+          "requires": {
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+          "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "error-ex": "^1.3.1",
+            "json-parse-even-better-errors": "^2.3.0",
+            "lines-and-columns": "^1.1.6"
+          }
+        },
+        "path-type": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+          "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
+        },
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
+        }
+      }
+    },
    "babel-plugin-module-resolver": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/babel-plugin-module-resolver/-/babel-plugin-module-resolver-3.2.0.tgz",
@ -4471,6 +4633,11 @@
      "resolved": "https://registry.npmjs.org/babel-plugin-react-native-web/-/babel-plugin-react-native-web-0.13.18.tgz",
      "integrity": "sha512-f8pAxyKqXBNRIh8l4Sqju055BNec+DQlItdtutByYxULU0iJ1F7evIYE3skPKAkTB/xJH17l+n3Z8dVabGIIGg=="
    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
    "babel-plugin-syntax-trailing-function-commas": {
      "version": "7.0.0-beta.0",
      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz",
@ -5487,6 +5654,11 @@
        }
      }
    },
+    "csstype": {
+      "version": "2.6.16",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.16.tgz",
+      "integrity": "sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q=="
+    },
    "dashdash": {
      "version": "1.14.1",
      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@ -5709,6 +5881,22 @@
        "esutils": "^2.0.2"
      }
    },
+    "dom-helpers": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
+      "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.0.7",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
+          "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
+        }
+      }
+    },
    "dom-serializer": {
      "version": "0.2.2",
      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@ -7140,6 +7328,11 @@
        "pkg-dir": "^3.0.0"
      }
    },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
    "find-up": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@ -12021,8 +12214,7 @@
    "json-parse-even-better-errors": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
    },
    "json-schema": {
      "version": "0.2.3",
@ -12139,8 +12331,7 @@
    "lines-and-columns": {
      "version": "1.1.6",
      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
-      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
-      "dev": true
+      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
    },
    "load-json-file": {
      "version": "4.0.0",
@ -12231,6 +12422,11 @@
      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=",
      "dev": true
    },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+    },
    "lodash.escape": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz",
@ -12507,6 +12703,11 @@
        }
      }
    },
+    "memoize-one": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
+      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
+    },
    "merge-stream": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-1.0.1.tgz",
@ -13570,7 +13771,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
      "requires": {
        "callsites": "^3.0.0"
      },
@ -13578,8 +13778,7 @@
        "callsites": {
          "version": "3.1.0",
          "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-          "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-          "dev": true
+          "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
        }
      }
    },
@ -14106,6 +14305,25 @@
      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
    },
+    "react-google-places-autocomplete": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/react-google-places-autocomplete/-/react-google-places-autocomplete-3.2.1.tgz",
+      "integrity": "sha512-qggJHI5w1vkSpzFuY7dLioOzd9Yy7FFqixq2Cso44fe4+kYeS07d/1XE+V6adMLrYQ+zXQ8gHWmsEEf9X4Eekw==",
+      "requires": {
+        "@types/googlemaps": "^3.39.13",
+        "react-select": "^3.1.0",
+        "typescript": "^3.9.7",
+        "use-debounce": "^3.4.3"
+      }
+    },
+    "react-input-autosize": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-3.0.0.tgz",
+      "integrity": "sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
    "react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -14323,6 +14541,16 @@
        "prop-types": "^15.7.2"
      }
    },
+    "react-native-google-places-autocomplete": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/react-native-google-places-autocomplete/-/react-native-google-places-autocomplete-2.1.3.tgz",
+      "integrity": "sha512-lEqGJcZDwoZKzC2Lw5nDDYdKefxHtsDXvQghPXsshGOlQCX/Z/dug/QoL1CBcppooaHKxGNmxpaudXzFz4XDkw==",
+      "requires": {
+        "lodash.debounce": "^4.0.8",
+        "prop-types": "^15.7.2",
+        "qs": "~6.9.1"
+      }
+    },
    "react-native-iphone-x-helper": {
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz",
@ -14342,6 +14570,14 @@
      "resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-0.27.1.tgz",
      "integrity": "sha512-HygBkZBecTnIVRYrSiLRAvu4OmXOYso/A7c6Cy73HkOh9CgGV8Ap5eBea24tvmFGptjj5Hg8AJ94/YbmWK1Okw=="
    },
+    "react-native-places-input": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/react-native-places-input/-/react-native-places-input-1.1.7.tgz",
+      "integrity": "sha512-Gxl6bNFGK8vCagTRjONKspdgpGs+pGSu/Y3Bp7XZqFaowekhDdQYfs6yXe+WZofH/EmNzFH40jKc83URvqYPXQ==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
    "react-native-reanimated": {
      "version": "1.13.2",
      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.13.2.tgz",
@ -14498,6 +14734,21 @@
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz",
      "integrity": "sha512-Hwln1VNuGl/6bVwnd0Xdn1e84gT/8T9aYNL+HAKDArLCS7LWjwr7StE30IEYbIkx0Vi3vs+coQxe+SQDbGbbpA=="
    },
+    "react-select": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-3.2.0.tgz",
+      "integrity": "sha512-B/q3TnCZXEKItO0fFN/I0tWOX3WJvi/X2wtdffmwSQVRwg5BpValScTO1vdic9AxlUgmeSzib2hAZAwIUQUZGQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/cache": "^10.0.9",
+        "@emotion/core": "^10.0.9",
+        "@emotion/css": "^10.0.9",
+        "memoize-one": "^5.0.0",
+        "prop-types": "^15.6.0",
+        "react-input-autosize": "^3.0.0",
+        "react-transition-group": "^4.3.0"
+      }
+    },
    "react-shallow-renderer": {
      "version": "16.14.1",
      "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz",
@ -14543,6 +14794,17 @@
      "resolved": "https://registry.npmjs.org/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz",
      "integrity": "sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q=="
    },
+    "react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
    "read-pkg": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@ -16058,6 +16320,11 @@
        "is-typedarray": "^1.0.0"
      }
    },
+    "typescript": {
+      "version": "3.9.9",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.9.tgz",
+      "integrity": "sha512-kdMjTiekY+z/ubJCATUPlRDl39vXYiMV9iyeMuEuXZh2we6zz80uovNN2WlAxmmdE/Z/YQe+EbOEXB5RHEED3w=="
+    },
    "ua-parser-js": {
      "version": "0.7.22",
      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.22.tgz",
@ -16258,6 +16525,11 @@
      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
    },
+    "use-debounce": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-3.4.3.tgz",
+      "integrity": "sha512-nxy+opOxDccWfhMl36J5BSCTpvcj89iaQk2OZWLAtBJQj7ISCtx1gh+rFbdjGfMl6vtCZf6gke/kYvrkVfHMoA=="
+    },
    "use-subscription": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz",
@ -16643,6 +16915,11 @@
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
    },
+    "yaml": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz",
+      "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg=="
+    },
    "yargs": {
      "version": "14.2.3",
      "resolved": "https://registry.npmjs.org/yargs/-/yargs-14.2.3.tgz",
--- a/src/package.json
+++ b/src/package.json
@ -32,11 +32,14 @@
    "moment": "^2.29.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
+    "react-google-places-autocomplete": "^3.2.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
    "react-native-flash-message": "^0.1.18",
    "react-native-gesture-handler": "~1.7.0",
+    "react-native-google-places-autocomplete": "^2.1.3",
    "react-native-keyboard-aware-scroll-view": "^0.9.3",
    "react-native-maps": "0.27.1",
+    "react-native-places-input": "^1.1.7",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.4",
    "react-native-screens": "~2.10.1",