move marker with autocomplete

components/HouseLocation.js

@@ -16,84 +16,76 @@ export default function HouseLocation() {
   });
 
   return (
-    <View style={{marginTop: 50, flex: 1}}>
+    <View style={styles.viewRoot}>
-      <GooglePlacesAutocomplete
+      <View>
-        placeholder="Search"
+        <Text style={styles.heading}>Locate your House</Text>
-        fetchDetails={true}
+        <View>
-        GooglePlacesSearchQuery={{
+          <GooglePlacesAutocomplete
-          rankby: 'distance',
+            placeholder="Search"
-        }}
+            fetchDetails={true}
-        onPress={(data, details = null) => {
+            GooglePlacesSearchQuery={{
-          // 'details' is provided when fetchDetails = true
+              rankby: 'distance',
-          console.log(data, details);
+            }}
-          setRegion({
+            onPress={(data, details = null) => {
-            latitude: details.geometry.location.lat,
+              // 'details' is provided when fetchDetails = true
-            longitude: details.geometry.location.lng,
+              console.log(data, details);
-            latitudeDelta: 0.0922,
+              setRegion({
-            longitudeDelta: 0.0421,
+                latitude: details.geometry.location.lat,
-          });
+                longitude: details.geometry.location.lng,
-        }}
+                latitudeDelta: 0.0922,
-        query={{
+                longitudeDelta: 0.0421,
-          key: 'AIzaSyCkyKVuTyTW8qIcmXuo-btO4lI0VzojzBE',
+              });
-          language: 'en',
+            }}
-          components: 'country:in',
+            query={{
-          types: 'establishment',
+              key: 'AIzaSyCkyKVuTyTW8qIcmXuo-btO4lI0VzojzBE',
-          radius: 30000,
+              language: 'en',
-          location: `${region.latitude}, ${region.longitude}`,
+              components: 'country:in',
-        }}
+              types: 'establishment',
-        placeholderTextColor={'#845783'}
+              radius: 30000,
-        styles={{
+              location: `${region.latitude}, ${region.longitude}`,
-          container: {
+            }}
-            flex: 0,
+            placeholderTextColor={'#845783'}
-            position: 'absolute',
+            styles={{
-            width: '100%',
+              container: {
-            zIndex: 1,
+                width: '100%',
-            backgroundColor: '#000000',
+                position: 'absolute',
-          },
+                zIndex: 1,
-          listView: {backgroundColor: 'white', color: 'blue'},
+              },
-        }}
+              listView: {backgroundColor: 'white', color: 'blue'},
-      />
+            }}
-      <MapView
+          />
-        style={styles.map}
+        </View>
-        initialRegion={{
+      </View>
-          latitude: 37.78825,
+      <View>
-          longitude: -122.4324,
+        <MapView
-          latitudeDelta: 0.0922,
+          style={styles.map}
-          longitudeDelta: 0.0421,
+          region={{
-        }}
-        provider="google">
-        <Marker
-          coordinate={{
             latitude: region.latitude,
             longitude: region.longitude,
+            latitudeDelta: 0.0922,
+            longitudeDelta: 0.0421,
           }}
-        />
+          provider="google">
-        <Marker
+          <Marker
-          coordinate={pin}
+            coordinate={{
-          pinColor="black"
+              latitude: region.latitude,
-          draggable={true}
+              longitude: region.longitude,
-          onDragStart={e => {
+            }}
-            console.log('Drag start', e.nativeEvent.coordinates);
+          />
-          }}
+        </MapView>
-          onDragEnd={e => {
+      </View>
-            setPin({
-              latitude: e.nativeEvent.coordinate.latitude,
-              longitude: e.nativeEvent.coordinate.longitude,
-            });
-          }}>
-          <Callout>
-            <Text>I'm here</Text>
-          </Callout>
-        </Marker>
-      </MapView>
     </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',
+  },
 });

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>