|
@ -1,6 +1,5 @@ |
|
|
import React, { useContext, useState } from "react"; |
|
|
import React, { useContext, useState } from "react"; |
|
|
import { StyleSheet, View, Text, Image } from "react-native"; |
|
|
import { StyleSheet, View, Text, Image } from "react-native"; |
|
|
import MapView from "react-native-maps"; |
|
|
|
|
|
|
|
|
|
|
|
import colors from "../config/colors"; |
|
|
import colors from "../config/colors"; |
|
|
import { screen_width, screen_height } from "../config/dimensions"; |
|
|
import { screen_width, screen_height } from "../config/dimensions"; |
|
@ -17,9 +16,6 @@ const MapFormScreen = (props) => { |
|
|
const context = useContext(EventLocationContext); //local do evento
|
|
|
const context = useContext(EventLocationContext); //local do evento
|
|
|
const contextLocation = useContext(CurrentLocationContext); //local do usuário
|
|
|
const contextLocation = useContext(CurrentLocationContext); //local do usuário
|
|
|
|
|
|
|
|
|
const [marker, setMarker] = useState(context.eventCoordinates); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [moveEndListener, setMoveEndListener] = useState(""); |
|
|
const [moveEndListener, setMoveEndListener] = useState(""); |
|
|
console.log(moveEndListener); |
|
|
console.log(moveEndListener); |
|
|
|
|
|
|
|
@ -55,36 +51,19 @@ const MapFormScreen = (props) => { |
|
|
latitudeDelta: 70, |
|
|
latitudeDelta: 70, |
|
|
longitudeDelta: 70 * (screen_width / screen_height), |
|
|
longitudeDelta: 70 * (screen_width / screen_height), |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<View style={styles.container}> |
|
|
<View style={styles.container}> |
|
|
<OpenStreetMap |
|
|
<OpenStreetMap |
|
|
|
|
|
style={styles.mapStyle} |
|
|
moveEndListener={setMoveEndListener} |
|
|
moveEndListener={setMoveEndListener} |
|
|
/> |
|
|
/> |
|
|
{/*<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}> |
|
|
|
|
|
|
|
|
<View style={styles.markerFixed}> |
|
|
<Image |
|
|
<Image |
|
|
style={styles.marker} |
|
|
style={styles.marker} |
|
|
resizeMode="contain" |
|
|
resizeMode="contain" |
|
|
source={require("../assets/map-marker.png")} |
|
|
source={require("../assets/map-marker.png")} |
|
|
/> |
|
|
/> |
|
|
</View>*/} |
|
|
|
|
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
<View style={styles.submit_btn}> |
|
|
<View style={styles.submit_btn}> |
|
|
<TouchableOpacity onPress={() => setLocation()}> |
|
|
<TouchableOpacity onPress={() => setLocation()}> |
|
@ -107,9 +86,12 @@ const styles = StyleSheet.create({ |
|
|
container: { |
|
|
container: { |
|
|
backgroundColor: colors.black, |
|
|
backgroundColor: colors.black, |
|
|
flex: 1, |
|
|
flex: 1, |
|
|
|
|
|
justifyContent: "center", |
|
|
|
|
|
flexDirection: "row" |
|
|
}, |
|
|
}, |
|
|
mapStyle: { |
|
|
mapStyle: { |
|
|
position: "absolute", |
|
|
position: "absolute", |
|
|
|
|
|
alignSelf:"center", |
|
|
top: 0, |
|
|
top: 0, |
|
|
left: 0, |
|
|
left: 0, |
|
|
right: 0, |
|
|
right: 0, |
|
@ -126,15 +108,19 @@ const styles = StyleSheet.create({ |
|
|
textAlign: "center", |
|
|
textAlign: "center", |
|
|
}, |
|
|
}, |
|
|
markerFixed: { |
|
|
markerFixed: { |
|
|
left: "50%", |
|
|
|
|
|
marginLeft: -19, |
|
|
|
|
|
marginTop: -48, |
|
|
|
|
|
alignItems:"center", |
|
|
|
|
|
|
|
|
//left: "50%",
|
|
|
|
|
|
// marginLeft: -19,
|
|
|
|
|
|
// marginTop: -48,
|
|
|
|
|
|
alignSelf: "center", |
|
|
|
|
|
justifyContent: "center", |
|
|
position: "absolute", |
|
|
position: "absolute", |
|
|
bottom: "50%", |
|
|
|
|
|
top:"50%", |
|
|
|
|
|
height: "20%", |
|
|
|
|
|
|
|
|
flexDirection:"row", |
|
|
|
|
|
alignItems:"flex-start", |
|
|
|
|
|
// bottom: "50%",
|
|
|
|
|
|
// top: "50%",
|
|
|
|
|
|
height: "13%", |
|
|
width: 38, |
|
|
width: 38, |
|
|
|
|
|
//backgroundColor: "black"
|
|
|
}, |
|
|
}, |
|
|
text: { |
|
|
text: { |
|
|
color: colors.white, |
|
|
color: colors.white, |
|
@ -143,9 +129,9 @@ const styles = StyleSheet.create({ |
|
|
fontWeight: "bold", |
|
|
fontWeight: "bold", |
|
|
}, |
|
|
}, |
|
|
marker: { |
|
|
marker: { |
|
|
height: "40%", |
|
|
|
|
|
alignSelf:"center", |
|
|
|
|
|
width: 38, |
|
|
|
|
|
|
|
|
height: "50%", |
|
|
|
|
|
// alignSelf:"flex-end",
|
|
|
|
|
|
width: 40, |
|
|
}, |
|
|
}, |
|
|
callback: { |
|
|
callback: { |
|
|
bottom: 100, |
|
|
bottom: 100, |
|
|