Fixing frozen map in MapForm that occours in IOS.

4 years ago · ef32644bd5
1 changed files with 111 additions and 112 deletions
--- a/src/app/screens/MapFormScreen.js
+++ b/src/app/screens/MapFormScreen.js
@ -13,127 +13,126 @@ import { CurrentLocationContext } from "../context/CurrentLocationContext";
 // NOTE: Implementação posterior: É interessante adcionar um searchBox para que o usuário busque um endereço (google places autocomplete é uma api paga)
 const MapFormScreen = (props) => {
    const context = useContext(EventLocationContext); //local do evento
    const contextLocation = useContext(CurrentLocationContext); //local do usuário
  const context = useContext(EventLocationContext); //local do evento
  const contextLocation = useContext(CurrentLocationContext); //local do usuário
    const [marker, setMarker] = useState(context.eventCoordinates);
  const [marker, setMarker] = useState(context.eventCoordinates);
    const getAddress = async (coordenadas) => {
        Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc");
  const getAddress = async (coordenadas) => {
    Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc");
        const address = await Location.reverseGeocodeAsync(coordenadas);
        if (address[0] != undefined) {
            context.saveNewLocation(
                address[0].street +
                    ", " +
                    address[0].name +
                    "\n" +
                    address[0].district,
                coordenadas
            );
        } else {
            //Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio
            context.saveNewLocation("Erro ao carregar endereço", coordenadas);
        }
    };
    const address = await Location.reverseGeocodeAsync(coordenadas);
    if (address[0] != undefined) {
      context.saveNewLocation(
        address[0].street + ", " + address[0].name + "\n" + address[0].district,
        coordenadas
      );
    } else {
      //Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio
      context.saveNewLocation("Erro ao carregar endereço", coordenadas);
    }
  };
    const setLocation = () => {
        getAddress(marker);
        props.navigation.goBack(null);
    };
  const setLocation = () => {
    getAddress(marker);
    props.navigation.goBack(null);
  };
    const map_scale = 0.003;
    const lat_long_delta = {
        latitudeDelta: map_scale,
        longitudeDelta: map_scale * (screen_width / screen_height),
    };
  const map_scale = 0.003;
  const lat_long_delta = {
    latitudeDelta: map_scale,
    longitudeDelta: map_scale * (screen_width / screen_height),
  };
    return (
        <View style={styles.container}>
            <MapView
                style={styles.mapStyle}
                showsUserLocation={true}
                initialRegion={{
                    latitude: -23.533773,
                    longitude: -46.62529,
                    ...lat_long_delta,
                }}
                region={{
                    latitude: marker.latitude,
                    longitude: marker.longitude,
                    ...lat_long_delta,
                }}
                onRegionChangeComplete={(r) => {
                    console.log(r);
                    setMarker({ latitude: r.latitude, longitude: r.longitude });
                }}
            ></MapView>
            <View style={styles.markerFixed}>
                <Image
                    style={styles.marker}
                    resizeMode="contain"
                    source={require("../assets/map-marker.png")}
                />
            </View>
            <View
                style={{
                    flexDirection: "column",
                    flex: 1,
                    justifyContent: "flex-end",
                    padding: 10,
                }}
            >
                <TouchableOpacity onPress={() => setLocation()}>
                    <View style={styles.button}>
                        <Text style={styles.text}>Confirmar</Text>
                    </View>
                </TouchableOpacity>
            </View>
        </View>
    );
  const default_location = {
    latitude: -12.901799,
    longitude: -51.692116,
    latitudeDelta: 70,
    longitudeDelta: 70 * (screen_width / screen_height),
  };
  return (
    <View style={styles.container}>
      <MapView
        style={styles.mapStyle}
        showsUserLocation={true}
        initialRegion={{ ...default_location }}
        region={{
          latitude: marker.latitude,
          longitude: marker.longitude,
          ...lat_long_delta,
        }}
        onRegionChangeComplete={(r) => {
          console.log(r);
          setMarker({ latitude: r.latitude, longitude: r.longitude });
        }}
      />
      <View style={styles.markerFixed}>
        <Image
          style={styles.marker}
          resizeMode="contain"
          source={require("../assets/map-marker.png")}
        />
      </View>
      <View style={styles.submit_btn}>
        <TouchableOpacity onPress={() => setLocation()}>
          <View style={styles.button}>
            <Text style={styles.text}>Confirmar</Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  );
 };
 const styles = StyleSheet.create({
    container: {
        backgroundColor: colors.black,
        flex: 1,
    },
    mapStyle: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
    button: {
        backgroundColor: "#1976D2",
        borderRadius: 20,
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        height: 42,
        marginVertical: 10,
        textAlign: "center",
    },
    markerFixed: {
        left: "50%",
        marginLeft: -24,
        marginTop: -48,
        position: "absolute",
        top: "50%",
        height: 48,
        width: 48,
    },
    text: {
        color: colors.white,
        fontSize: 16,
        textTransform: "uppercase",
        fontWeight: "bold",
    },
    marker: {
        height: 48,
        width: 48,
    },
  submit_btn: {
    position: "absolute",
    bottom: 0,
    width: "100%",
    padding: 20,
  },
  container: {
    backgroundColor: colors.black,
    flex: 1,
  },
  mapStyle: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  button: {
    backgroundColor: "#1976D2",
    borderRadius: 20,
    justifyContent: "center",
    alignItems: "center",
    width: "100%",
    height: 42,
    marginVertical: 10,
    textAlign: "center",
  },
  markerFixed: {
    left: "50%",
    marginLeft: -24,
    marginTop: -48,
    position: "absolute",
    top: "50%",
    height: 48,
    width: 48,
  },
  text: {
    color: colors.white,
    fontSize: 16,
    textTransform: "uppercase",
    fontWeight: "bold",
  },
  marker: {
    height: 48,
    width: 48,
  },
 });
 export default MapFormScreen;