Working on both web and android

frontend/App.js

@@ -7,15 +7,11 @@ import { Ionicons } from '@expo/vector-icons'
 import { AuthUserContext } from './src/context/AuthContext'
 import {callRefresh, manageExpoPushToken} from './src/utils/Axios'
 
-import MarkerInfoWindow from './src/pages/map/map'
 
 
+import { Platform, Text, View } from 'react-native';
 
-
-
-import { Text, View } from 'react-native';
-
-import mapHome from '../frontend/src/pages/map/MapHome'
+import mapHome from './src/pages/map/MapHome'
 
 
 const Tab = createBottomTabNavigator()
@@ -25,7 +21,7 @@ const Stack = createNativeStackNavigator()
 function HomeScreen() {
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-      <Text>Home!</Text>
+      <Text>{Platform.OS}</Text>
     </View>
   );
 }

frontend/package.json

@@ -28,7 +28,7 @@
     "react-native": "0.68.1",
     "react-native-dotenv": "^3.3.1",
     "react-native-elements": "^3.4.2",
-    "react-native-maps": "^0.30.1",
+    "react-native-maps": "0.29.4",
     "react-native-normalize": "^1.0.1",
     "react-native-paper": "^4.12.0",
     "react-native-paper-form-builder": "^2.1.2",

frontend/src/components/map/infoWindow.js

-import useComponentVisible from "../ComponentVisible";
-import { TouchableOpacity, Button } from "react-native";
+import { TouchableOpacity, Button, View, Text } from "react-native";
 
 export const InfoWindow = (props) => {
     const { place, navigation } = props;
-  
-    
-    const { ref, isComponentVisible } = useComponentVisible(true);
 
     const goTo = () => navigation.navigate("vuDetails");
     const infoWindowStyle = {
       position: 'relative',
       bottom: 150,
-      left: '-45px',
       width: 220,
       backgroundColor: 'white',
       boxShadow: '0 2px 7px 1px rgba(0, 0, 0, 0.3)',
@@ -19,6 +14,27 @@ export const InfoWindow = (props) => {
       fontSize: 14,
       zIndex: 100,
     };
+
+    return (
+          <TouchableOpacity>
+            <View>
+              <Text style = {{fontSize: 16}}>
+                {place.name}
+              </Text>
+              <View style = {{fontSize: 14}}>
+                <Text style = {{ color: 'grey' }}>
+                  {place.rating}
+                </Text>
+                <Text style = {{ color: 'orange' }}>
+                  {String.fromCharCode(9733).repeat(Math.floor(place.rating))}
+                </Text>
+                <Text style = {{ color: 'lightgrey' }}>
+                  {String.fromCharCode(9733).repeat(5 - Math.floor(place.rating))}
+                </Text>
+              </View>
+            </View>
+          </TouchableOpacity>
+    )
   
     return (
       <div ref={ref}>

frontend/src/pages/map/map.js

@@ -2,11 +2,9 @@ import {API_KEY} from '@env'
 const MY_API_KEY = API_KEY
 console.log(MY_API_KEY)
 import React, { useEffect, useState } from 'react';
+import { Platform } from 'react-native';
 import  jsonFile  from '../../../public/places.json';
 
-import AndroidMapView from './mapViews/androidView'; 
-import WebMapView from './mapViews/webView';
-
 export default function CustomMap ({ navigation }){
   const [places,setPlaces]  = useState([])
   const [region, setRegion] = useState({
@@ -30,7 +28,8 @@ export default function CustomMap ({ navigation }){
       places[index].show = !places[index].show; // eslint-disable-line no-param-reassign
       setPlaces([...places])
   };
- 
-  return (<AndroidMapView places = {places} updateState = {updateState} navigation = {navigation} />)
+  
+  const MapView = Platform.OS == "web" ? require('./mapViews/webView').default : require('./mapViews/androidView').default;
+  return (<MapView places = {places} region = {region} updateState = {updateState} navigation = {navigation} />)
 
 }

frontend/src/pages/map/mapViews/androidView.js

-import MapView from "react-native-maps"
+import MapView, { Callout } from "react-native-maps"
 import Marker from "react-native-maps"
 import { InfoWindow } from "../../../components/map/infoWindow"
 import { Dimensions } from "react-native"
+import { Text } from "react-native"
+
+// export default function AndroidMapView (props) {
+//   const {region, places} = props
+//   console.log(places)
+//   return (
+//     <MapView
+//       style = {{height : Dimensions.get("screen").height, width : Dimensions.get("screen").width}}
+//       initialRegion = {region}
+//     >
+//       <MapView.Marker
+//         coordinate = {{latitude : region.latitude, longitude : region.longitude}}
+//         key = {0}
+//       />
+//     </MapView>
+//   )
+// }
 
 export default function AndroidMapView (props) {
   const {region, places} = props
+  console.log("been there")
   return(
     <MapView
         provider = {MapView.PROVIDER_GOOGLE}
@@ -14,21 +32,17 @@ export default function AndroidMapView (props) {
       
       {places.map((place) => {
         return(
-          <Marker
+          <MapView.Marker
             coordinate = {{latitude : place.geometry.location.lat, longitude : place.geometry.location.lng}}
             key = {place.id}
             onPress = {() => {}}
           >
-            <InfoWindow 
-              {...props}
-              key={place.id}
-              lat={place.geometry.location.lat}
-              lng={place.geometry.location.lng}
-              place={place}
-            />
-          </Marker>
+            <Callout>
+              <InfoWindow place = {place} navigation = {props.navigation} />
+            </Callout>
+          </MapView.Marker>
         )})}
 
     </MapView>
-)
+  )
 }
\ No newline at end of file

frontend/src/pages/map/mapViews/webView.js

@@ -24,6 +24,7 @@ const Marker = ({ show, place, navigation }) => {
   };
   
 const MY_API_KEY = process.env.API_KEY
+
 export default function WebMapView (props){
     const { places, navigation } = props
     return(