From 77e8473cbdbc5d7734144c2f660d7c68a06ed8cc Mon Sep 17 00:00:00 2001
From: Priyatham Sai chand <priyathamsaichand@gmail.com>
Date: Thu, 26 May 2022 22:27:43 +0530
Subject: [PATCH] move marker with autocomplete

---
 components/HouseLocation.js | 134 ++++++++++++++++++------------------
 components/UserProfile.js   |   9 ---
 2 files changed, 66 insertions(+), 77 deletions(-)

diff --git a/components/HouseLocation.js b/components/HouseLocation.js
index b26442c..7fa3e41 100644
--- a/components/HouseLocation.js
+++ b/components/HouseLocation.js
@@ -16,84 +16,76 @@ export default function HouseLocation() {
   });
 
   return (
-    <View style={{marginTop: 50, flex: 1}}>
-      <GooglePlacesAutocomplete
-        placeholder="Search"
-        fetchDetails={true}
-        GooglePlacesSearchQuery={{
-          rankby: 'distance',
-        }}
-        onPress={(data, details = null) => {
-          // 'details' is provided when fetchDetails = true
-          console.log(data, details);
-          setRegion({
-            latitude: details.geometry.location.lat,
-            longitude: details.geometry.location.lng,
-            latitudeDelta: 0.0922,
-            longitudeDelta: 0.0421,
-          });
-        }}
-        query={{
-          key: 'AIzaSyCkyKVuTyTW8qIcmXuo-btO4lI0VzojzBE',
-          language: 'en',
-          components: 'country:in',
-          types: 'establishment',
-          radius: 30000,
-          location: `${region.latitude}, ${region.longitude}`,
-        }}
-        placeholderTextColor={'#845783'}
-        styles={{
-          container: {
-            flex: 0,
-            position: 'absolute',
-            width: '100%',
-            zIndex: 1,
-            backgroundColor: '#000000',
-          },
-          listView: {backgroundColor: 'white', color: 'blue'},
-        }}
-      />
-      <MapView
-        style={styles.map}
-        initialRegion={{
-          latitude: 37.78825,
-          longitude: -122.4324,
-          latitudeDelta: 0.0922,
-          longitudeDelta: 0.0421,
-        }}
-        provider="google">
-        <Marker
-          coordinate={{
+    <View style={styles.viewRoot}>
+      <View>
+        <Text style={styles.heading}>Locate your House</Text>
+        <View>
+          <GooglePlacesAutocomplete
+            placeholder="Search"
+            fetchDetails={true}
+            GooglePlacesSearchQuery={{
+              rankby: 'distance',
+            }}
+            onPress={(data, details = null) => {
+              // 'details' is provided when fetchDetails = true
+              console.log(data, details);
+              setRegion({
+                latitude: details.geometry.location.lat,
+                longitude: details.geometry.location.lng,
+                latitudeDelta: 0.0922,
+                longitudeDelta: 0.0421,
+              });
+            }}
+            query={{
+              key: 'AIzaSyCkyKVuTyTW8qIcmXuo-btO4lI0VzojzBE',
+              language: 'en',
+              components: 'country:in',
+              types: 'establishment',
+              radius: 30000,
+              location: `${region.latitude}, ${region.longitude}`,
+            }}
+            placeholderTextColor={'#845783'}
+            styles={{
+              container: {
+                width: '100%',
+                position: 'absolute',
+                zIndex: 1,
+              },
+              listView: {backgroundColor: 'white', color: 'blue'},
+            }}
+          />
+        </View>
+      </View>
+      <View>
+        <MapView
+          style={styles.map}
+          region={{
             latitude: region.latitude,
             longitude: region.longitude,
+            latitudeDelta: 0.0922,
+            longitudeDelta: 0.0421,
           }}
-        />
-        <Marker
-          coordinate={pin}
-          pinColor="black"
-          draggable={true}
-          onDragStart={e => {
-            console.log('Drag start', e.nativeEvent.coordinates);
-          }}
-          onDragEnd={e => {
-            setPin({
-              latitude: e.nativeEvent.coordinate.latitude,
-              longitude: e.nativeEvent.coordinate.longitude,
-            });
-          }}>
-          <Callout>
-            <Text>I'm here</Text>
-          </Callout>
-        </Marker>
-      </MapView>
+          provider="google">
+          <Marker
+            coordinate={{
+              latitude: region.latitude,
+              longitude: region.longitude,
+            }}
+          />
+        </MapView>
+      </View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
+  viewRoot: {
+    backgroundColor: '#ffffff',
+    height: '100%',
+  },
   container: {
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: '#ffffff',
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -101,4 +93,10 @@ const styles = StyleSheet.create({
     width: Dimensions.get('window').width,
     height: Dimensions.get('window').height,
   },
+  heading: {
+    color: '#1C254E',
+    fontSize: 30,
+    textAlign: 'left',
+    fontFamily: 'Ubuntu-Bold',
+  },
 });
diff --git a/components/UserProfile.js b/components/UserProfile.js
index 4da633b..ec39bd4 100644
--- a/components/UserProfile.js
+++ b/components/UserProfile.js
@@ -108,15 +108,6 @@ underlayColor="white"
           </TouchableHighlight>
         </View>
         <View style={styles.headingContainer}>
-      <SearchBar
-        placeholder="Search Here..."
-        lightTheme
-        round
-        editable={true}
-        value={search}
-        onChangeText={setSearch}
-	platform="android"
-      />
           <Text style={styles.heading}>John Doe</Text>
           <Text style={styles.subHeading}>Tenant</Text>