priyatham
/
locaft_mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

move marker with autocomplete

This commit is contained in:
Priyatham Sai chand 2022-05-26 22:27:43 +05:30
parent 0b75dde08a
commit 77e8473cbd
No known key found for this signature in database
GPG Key ID: C3DFD0A2F6675222
2 changed files with 66 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
components/HouseLocation.js
View File

@ -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',
},
});

9
components/UserProfile.js
View File

@ -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>