Fixing frozen map in MapForm that occours in IOS.

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;