No Description

Map.js 3.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. import * as React from 'react';
  2. import { useState } from 'react';
  3. import MapView, { Marker } from 'react-native-maps';
  4. import { Button, StyleSheet, Text, View, Dimensions, Pressable } from 'react-native';
  5. import { Confirm } from './Confirm';
  6. export default function Map({route, navigation} ) {
  7. console.log('In map params')
  8. console.log(route.params)
  9. const {
  10. Appointment = route.params.Appointment_Date ,
  11. int_id = route.params.int_id,
  12. mapflag = route.params.Flag,
  13. i_token = route.params.I_Token,
  14. u_token = route.params.U_Token,
  15. username = route.params.Username,
  16. I_username = route.params.I_Username,
  17. Confirm_Flag = route.params.Confirm_Flag,
  18. View_Only = route.params.View_Only
  19. } = route.params
  20. if(View_Only == true){
  21. const Retrive_pin = route.params.Pin;
  22. console.log("Retrieve lat", Retrive_pin)
  23. if(Confirm_Flag == true){
  24. const [pin2, setPin2] = React.useState({
  25. latitude: Retrive_pin[0].Pin[0],
  26. longitude: Retrive_pin[0].Pin[1],
  27. })
  28. console.log("Pin2", pin2)
  29. return (
  30. <View style={styles.container}>
  31. <MapView style={styles.map}
  32. initialRegion={{
  33. latitude: pin2.latitude,
  34. longitude: pin2.longitude,
  35. latitudeDelta: 0.0922,
  36. longitudeDelta: 0.0421,
  37. }}
  38. provider="google"
  39. >
  40. <Marker coordinate={pin2} />
  41. </MapView>
  42. </View>
  43. );
  44. }
  45. else{
  46. const [pin2, setPin2] = React.useState({
  47. latitude: Retrive_pin.Pin[0],
  48. longitude: Retrive_pin.Pin[1],
  49. })
  50. console.log("Pin2", pin2)
  51. return (
  52. <View style={styles.container}>
  53. <MapView style={styles.map}
  54. initialRegion={{
  55. latitude: pin2.latitude,
  56. longitude: pin2.longitude,
  57. latitudeDelta: 0.0922,
  58. longitudeDelta: 0.0421,
  59. }}
  60. provider="google"
  61. >
  62. <Marker coordinate={pin2} />
  63. </MapView>
  64. </View>
  65. );
  66. }
  67. }
  68. else{
  69. const [pin1, setPin1] = React.useState({
  70. latitude: 18.4655,
  71. longitude: -66.1057,
  72. })
  73. return (
  74. <View style={styles.container}>
  75. <MapView style={styles.map}
  76. initialRegion={{
  77. latitude: 18.4655,
  78. longitude: -66.1057,
  79. latitudeDelta: 0.0922,
  80. longitudeDelta: 0.0421,
  81. }}
  82. onPress={(e) => {
  83. setPin1({
  84. latitude: e.nativeEvent.coordinate.latitude,
  85. longitude: e.nativeEvent.coordinate.longitude
  86. })
  87. }}
  88. provider="google"
  89. >
  90. <Marker coordinate={pin1} />
  91. </MapView>
  92. <View style = {{position: 'absolute', bottom: '5%'}}>
  93. <Button title= 'Confirm Location' color = "#000000" onPress = {() => navigation.navigate('StateTime' , {Pin : pin1 , Appointment : Appointment, int_id : int_id,
  94. mapflag : mapflag, I_Token: i_token, U_Token: u_token
  95. ,Username: username, I_Username: I_username})}/>
  96. </View>
  97. </View>
  98. );
  99. }
  100. }
  101. const styles = StyleSheet.create({
  102. container: {
  103. flex: 1,
  104. backgroundColor: '#fff',
  105. alignItems: 'center',
  106. justifyContent: 'center',
  107. },
  108. map: {
  109. width: Dimensions.get('window').width,
  110. height: Dimensions.get('window').height,
  111. },
  112. container2: {
  113. flex: 1,
  114. alignItems: 'center',
  115. justifyContent: 'center',
  116. backgroundColor: '#307ecc',
  117. padding: 16,
  118. },
  119. });