Fix: Issue #98

lib/components/colors.tsx

@@ -24,7 +24,7 @@ export const colors = {
     black: '#161A1D',
     scrollerColor: '#161A1D',
     text: '#F7F8F9',
-    logout: '#DCDFE4', 
+    logout: '#DCDFE4',
     logoutText: '#22272B',
   },
 };

lib/components/tagging.tsx

@@ -1,13 +1,13 @@
+import { Ionicons } from "@expo/vector-icons";
 import React, { useState } from "react";
 import {
-  View,
-  Text,
-  TouchableOpacity,
   StyleSheet,
+  Text,
   TextInput,
+  TouchableOpacity,
+  View,
 } from "react-native";
 import { SwipeListView } from "react-native-swipe-list-view";
-import { Ionicons } from "@expo/vector-icons";
 
 function TagWindow({
   tags,

lib/screens/HomeScreen.tsx

@@ -1,29 +1,25 @@
-import React, { useState, useEffect } from "react";
+import { Ionicons } from "@expo/vector-icons";
+import Constants from "expo-constants";
+import React, { useEffect, useState } from "react";
 import {
+  Dimensions,
+  Image,
   Platform,
-  View,
+  StyleSheet,
   Text,
-  ScrollView,
   TouchableOpacity,
-  StyleSheet,
-  Dimensions,
-  SafeAreaView,
-  Image,
+  View
 } from "react-native";
-import { Ionicons } from "@expo/vector-icons";
-import { User } from "../models/user_class";
-import { Note } from "../../types";
-import { HomeScreenProps } from "../../types";
-import ApiService from "../utils/api_calls";
-import DataConversion from "../utils/data_conversion";
+import DropDownPicker from 'react-native-dropdown-picker';
 import { SwipeListView } from "react-native-swipe-list-view";
-import NoteSkeleton from "../components/noteSkeleton";
+import { HomeScreenProps, Note } from "../../types";
+import { useTheme } from '../components/ThemeProvider';
 import LoadingImage from "../components/loadingImage";
+import NoteSkeleton from "../components/noteSkeleton";
 import { formatToLocalDateString } from "../components/time";
-import { useTheme } from '../components/ThemeProvider';
-import Constants from "expo-constants";
-import ToastMessage from 'react-native-toast-message';
-import DropDownPicker from 'react-native-dropdown-picker';
+import { User } from "../models/user_class";
+import ApiService from "../utils/api_calls";
+import DataConversion from "../utils/data_conversion";
 import NoteDetailModal from "./mapPage/NoteDetailModal";
 
 const user = User.getInstance();

lib/screens/mapPage/ExploreScreen.js

@@ -1,26 +1,26 @@
-import React, { useEffect, useState, useRef, useCallback } from "react";
+import Constants from "expo-constants";
+import * as Location from "expo-location";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
+  Animated,
+  Dimensions,
+  Image,
+  Keyboard,
+  Platform,
   StyleSheet,
   Text,
   TextInput,
-  View,
-  Animated,
-  Image,
   TouchableOpacity,
-  Dimensions,
-  Platform,
+  View,
 } from "react-native";
 import MapView, { Marker } from "react-native-maps";
-import * as Location from "expo-location";
-import NoteDetailModal from "./NoteDetailModal";
-import { formatToLocalDateString } from "../../components/time";
 import Ionicons from "react-native-vector-icons/Ionicons";
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
-import { mapDarkStyle, mapStandardStyle } from "./mapData";
-import ApiService from "../../utils/api_calls";
-import Constants from "expo-constants";
-import { Keyboard } from "react-native";
 import { useTheme } from "../../components/ThemeProvider";
+import { formatToLocalDateString } from "../../components/time";
+import ApiService from "../../utils/api_calls";
+import NoteDetailModal from "./NoteDetailModal";
+import { mapDarkStyle, mapStandardStyle } from "./mapData";
 
 const { width } = Dimensions.get("window");
 const CARD_HEIGHT = 220;
@@ -36,6 +36,9 @@ const ExploreScreen = () => {
   const { theme, isDarkmode } = useTheme();
   const [showMapTypeOptions, setShowMapTypeOptions] = useState(false);
 
+  // Add the rest of your component logic here
+
+
   const toggleMapTypeOptions = () => {
     setShowMapTypeOptions((prevState) => !prevState);
   };
@@ -147,22 +150,24 @@ const ExploreScreen = () => {
 
   useEffect(() => {
     fetchMessages();
-  }, [state, globeIcon, searchResults]);
+  }, [ globeIcon, searchResults]);
+
 
-  const styles = StyleSheet.create({
+
+  const createStyles = (theme, isDarkmode) => StyleSheet.create({
     container: {
       flex: 1,
     },
     searchBox: {
       position: "absolute",
       marginTop: Constants.statusBarHeight,
       flexDirection: "row",
-      backgroundColor: theme.primaryColor,
+      backgroundColor:"#ffff",
       width: "90%",
       alignSelf: "center",
       borderRadius: 5,
       padding: 10,
-      shadowColor: theme.text,
+      shadowColor: "#cccc",
       shadowOffset: { width: 0, height: 0 },
       shadowOpacity: 0.125,
       shadowRadius: 5,
@@ -284,6 +289,7 @@ const ExploreScreen = () => {
       padding: 10,
       fontSize: 14,
       fontWeight: "bold",
+      color: "black",
     },
     selectedMapTypeText: {
       fontWeight: "bold",
@@ -348,7 +354,7 @@ const ExploreScreen = () => {
 
   useEffect(() => {
     mapAnimation.addListener(({ value }) => {
-      let index = Math.floor(value / CARD_WIDTH + 0.3); // animate 30% away from landing on the next item
+      let index = Math.floor(value / CARD_WIDTH + 2); // animate 30% away from landing on the next item
       if (index >= state.markers.length) {
         index = state.markers.length - 1;
       }
@@ -432,14 +438,12 @@ const ExploreScreen = () => {
     return { scale };
   });
 
-  const onMarkerPress = (mapEventData) => {
-    const markerID = mapEventData._targetInst.return.key;
-
+  const onMarkerPress = (markerID) => {
     let x = markerID * CARD_WIDTH + markerID * 20;
     if (Platform.OS === "ios") {
       x = x - SPACING_FOR_CARD_INSET;
     }
-
+  
     _scrollView.current.scrollTo({ x: x, y: 0, animated: true });
   };
 
@@ -450,7 +454,7 @@ const ExploreScreen = () => {
     <View style={styles.container}>
       <MapView
         ref={_map}
-        initialRegion={state.region}
+        region={state.region}
         style={styles.container}
         customMapStyle={isDarkmode ? mapDarkStyle : mapStandardStyle}
         mapType={mapType}
@@ -467,7 +471,7 @@ const ExploreScreen = () => {
             <Marker
               key={index}
               coordinate={marker.coordinate}
-              onPress={(e) => onMarkerPress(e)}
+              onPress={() => onMarkerPress(index)}
             >
               <Animated.View style={[styles.markerWrap]}>
                 <Animated.Image
@@ -640,8 +644,6 @@ const ExploreScreen = () => {
   );
 };
 
-export default ExploreScreen;
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -650,12 +652,12 @@ const styles = StyleSheet.create({
     position: "absolute",
     marginTop: Constants.statusBarHeight,
     flexDirection: "row",
-    backgroundColor: "#fff",
+    backgroundColor: "#ffff",
     width: "90%",
     alignSelf: "center",
     borderRadius: 5,
     padding: 10,
-    shadowColor: "#ccc",
+    shadowColor: "#cccc",
     shadowOffset: { width: 0, height: 3 },
     shadowOpacity: 0.5,
     shadowRadius: 5,
@@ -717,6 +719,7 @@ const styles = StyleSheet.create({
   textContent: {
     flex: 2,
     padding: 10,
+    color: "#cccc",
   },
   cardtitle: {
     fontSize: 12,
@@ -753,3 +756,5 @@ const styles = StyleSheet.create({
     fontWeight: "bold",
   },
 });
+
+

package.json

@@ -12,6 +12,7 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
+    "@expo/metro-runtime": "~3.2.3",
     "@gapur/react-native-accordion": "^1.0.7",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/datetimepicker": "8.0.1",
@@ -74,6 +75,7 @@
     "react-native-uuid": "^2.0.2",
     "react-native-vector-icons": "^10.1.0",
     "react-native-video": "^6.2.0",
+    "react-native-web": "~0.19.10",
     "react-native-webview": "13.8.6",
     "react-redux": "^9.1.2",
     "redux-mock-store": "^1.5.4",