move marker with autocomplete

components/HouseLocation.js

@@ -16,7 +16,10 @@ export default function HouseLocation() {
   });
 
   return (
-    <View style={{marginTop: 50, flex: 1}}>
+    <View style={styles.viewRoot}>
+      <View>
+        <Text style={styles.heading}>Locate your House</Text>
+        <View>
           <GooglePlacesAutocomplete
             placeholder="Search"
             fetchDetails={true}
@@ -44,20 +47,21 @@ export default function HouseLocation() {
             placeholderTextColor={'#845783'}
             styles={{
               container: {
-            flex: 0,
-            position: 'absolute',
                 width: '100%',
+                position: 'absolute',
                 zIndex: 1,
-            backgroundColor: '#000000',
               },
               listView: {backgroundColor: 'white', color: 'blue'},
             }}
           />
+        </View>
+      </View>
+      <View>
         <MapView
           style={styles.map}
-        initialRegion={{
+          region={{
-          latitude: 37.78825,
+            latitude: region.latitude,
-          longitude: -122.4324,
+            longitude: region.longitude,
             latitudeDelta: 0.0922,
             longitudeDelta: 0.0421,
           }}
@@ -68,32 +72,20 @@ export default function HouseLocation() {
               longitude: region.longitude,
             }}
           />
-        <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>
       </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',
+  },
 });

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>