add note with long press, some style stuff and eslint doesnt know what it wants

Author: K

nr-app/app/(tabs)/list.tsx

@@ -68,6 +68,6 @@ const styles = StyleSheet.create({
     gap: 8,
   },
   note: {
-    color: "#008800"
-  }
+    color: "#008800",
+  },
 });

nr-app/app/(tabs)/settings.tsx

@@ -6,25 +6,13 @@ export default function TabThreeScreen() {
       <View>
         <Text style={styles.header}>Keys</Text>
         <Text>npub</Text>
-        <TextInput
-                style={styles.input}
-                value='npub'
-            />
+        <TextInput style={styles.input} value="npub" />
         <Text>nsec</Text>
-        <TextInput
-                style={styles.input}
-                value='nsec'
-            />
+        <TextInput style={styles.input} value="nsec" />
         <Text>seed</Text>
-        <TextInput
-                style={styles.input}
-                value='seed'
-            />
+        <TextInput style={styles.input} value="seed" />
         <Text style={styles.header}>Relays</Text>
-        <TextInput
-                style={styles.input}
-                value="['relay1', 'relay2']"
-            />
+        <TextInput style={styles.input} value="['relay1', 'relay2']" />
         <Text style={styles.header}>Help</Text>
         <Text style={{ color: "#880088" }}>
           Copy and adapt some text from notes.trustroots.org
@@ -44,9 +32,9 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1, // Optional: add a bottom border
     borderBottomColor: "#ddd", // Optional: color of the bottom border
   },
-  input:  {
+  input: {
     height: 40,
-    borderColor: 'gray',
+    borderColor: "gray",
     borderWidth: 1,
     marginBottom: 20,
     paddingHorizontal: 10,

nr-app/src/components/Map.tsx

@@ -9,6 +9,9 @@ import MapView, { Marker, Callout } from "react-native-maps";
 import { eventsSelectors } from "@/redux/slices/events.slice";
 import { useAppSelector } from "@/redux/hooks";
 
+import React, { useState } from "react";
+import { Modal, TextInput, Button } from "react-native";
+
 const NoteMarker = ({ event }) => {
   if (Array.isArray(event.event.tags[1]) && event.event.tags[1][1]) {
     const coordinates = plusCodeToCoordinates(event.event.tags[1][1]);
@@ -31,12 +34,28 @@ const NoteMarker = ({ event }) => {
 export default function Map() {
   const events = useAppSelector(eventsSelectors.selectAll);
 
+  const handleAddNote = () => {
+    // Logic to add the note to the event or state
+    console.log("Note added:", note, "at", selectedCoordinate);
+    setModalVisible(false);
+    setNote("");
+  };
+
+  const [modalVisible, setModalVisible] = useState(false);
+  const [note, setNote] = useState("");
+  const [selectedCoordinate, setSelectedCoordinate] = useState(null);
+  const handleLongPress = (event) => {
+    setSelectedCoordinate(event.nativeEvent.coordinate);
+    setModalVisible(true);
+  };
+
   return (
     <View style={styles.mapContainer}>
       <MapView
         style={styles.map}
         rotateEnabled={false}
         pitchEnabled={false}
+        onLongPress={handleLongPress}
         onRegionChangeComplete={(region, details) => {
           console.log("#rIMmxg Map move completed", region, details);
           const topRightCoordinates = {
@@ -62,6 +81,32 @@ export default function Map() {
           <NoteMarker event={event} />
         ))}
       </MapView>
+
+      <Modal
+        visible={modalVisible}
+        transparent={true}
+        animationType="slide"
+        onRequestClose={() => setModalVisible(false)}
+      >
+        <View style={styles.modalContainer}>
+          <TextInput
+            style={styles.input}
+            placeholder="Enter your note"
+            value={note}
+            onChangeText={setNote}
+          />
+          <Button
+            style={styles.button}
+            title="Add Note"
+            onPress={handleAddNote}
+          />
+          <Button
+            style={styles.button}
+            title="Cancel"
+            onPress={() => setModalVisible(false)}
+          />
+        </View>
+      </Modal>
     </View>
   );
 }
@@ -74,4 +119,17 @@ const styles = StyleSheet.create({
     width: "100%",
     height: "100%",
   },
+  modalContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+  },
+  input: {
+    width: 200,
+    padding: 10,
+    backgroundColor: "white",
+    marginBottom: 10,
+  },
+  button: {},
 });