Answer the question
In order to leave comments, you need to log in
Why does a MapView tab get stuck?
Hello everyone, such a problem. There is the following code:
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, ImageBackground, useSelector } from 'react-native';
import MapView, {Marker, Polygon, Polyline, Circle} from 'react-native-maps';
import { scale } from 'react-native-size-matters';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
import * as Location from 'expo-location';
const GOOGLE_PLACES_API_KEY = '*****'
var latitude = 56.358987;
var longitude = 41.325308;
const MapScreen = ({navigation}) => {
const [update, setUpdate] = useState(true);
return (
<ImageBackground source={require('../assets/background.png')} style={{flex: 1, resizeMode: 'cover'}}>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', zIndex: 1}}>
<Text style={{fontSize: scale(22), color: '#5FA0DA', fontWeight: 'bold', marginTop: scale(50)}}>Карта полигонов</Text>
<Text style={{fontSize: scale(14), color: '#5FA0DA', textAlign: 'center', marginTop: scale(10)}}>Выберите полигон, чтобы узнать больше информации</Text>
<GooglePlacesAutocomplete
placeholder='Введите город'
styles={{
container:{
flex: 0,
width: scale(270),
marginTop: scale(20)
},
textInput:{
fontSize: scale(12),
color: '#5FA0DA',
textAlign: 'center',
borderStyle: 'solid',
borderColor: '#5FA0DA',
borderWidth: scale(1),
borderRadius: scale(10),
},
listView:{
position: 'absolute',
top: scale(35)
}
}}
nearbyPlacesAPI="GooglePlacesSearch"
minLength={3}
enablePoweredByContainer={false}
query={{
key: GOOGLE_PLACES_API_KEY,
language: 'ru',
}}
debounce={400}
onPress={(data, details = null) => {
latitude = details.geometry.location.lat;
longitude = details.geometry.location.lng;
setUpdate(false);
setUpdate(true);
}}
fetchDetails={true}
/>
</View>
<View style={{flex: 1.5, width: '100%', height: '100%'}}>
{update &&
<MapView style={{flex: 1, width: '100%', height: '100%'}}
initialRegion={{
latitude: latitude,
longitude: longitude,
latitudeDelta: 0.055,
longitudeDelta: 0.055
}}
>
<Marker draggable
coordinate={{
latitude: 56.358987,
longitude: 41.325308
}}
/>
<Marker draggable
coordinate={{
latitude: 56.389217,
longitude: 41.315713
}}
/>
</MapView>
}
</View>
</ImageBackground>
);
}
export default MapScreen;
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question