Taxon detail map and taxon map screen

src/components/ObsDetails/DetailsTab/DetailsMapHeader.js

@@ -0,0 +1,38 @@
+// @flow
+
+import {
+  Body4,
+  ObservationLocation
+} from "components/SharedComponents";
+import { View } from "components/styledComponents";
+import type { Node } from "react";
+import React from "react";
+import { useTranslation } from "sharedHooks";
+
+type Props = {
+  observation: Object,
+  obscured?: boolean
+}
+
+const DetailsMapHeader = ( {
+  observation,
+  obscured
+}: Props ): Node => {
+  const { t } = useTranslation( );
+  return (
+    <View className="flex-col ml-4">
+      <ObservationLocation
+        observation={observation}
+        obscured={obscured}
+        withCoordinates
+      />
+      {obscured && (
+        <Body4 className="italic">
+          {t( "Obscured-observation-location-map-description" )}
+        </Body4>
+      ) }
+    </View>
+  );
+};
+
+export default DetailsMapHeader;

src/components/ObsDetails/DetailsTab/DetailsTab.js

@@ -7,6 +7,7 @@ import {
   Body4,
   Button,
   DateDisplay,
+  DetailsMap,
   Divider,
   Heading4,
   ObservationLocation,
@@ -28,12 +29,14 @@ import {
 } from "sharedHooks";
 
 import Attribution from "./Attribution";
-import DetailsMapContainer from "./DetailsMapContainer";
+import DetailsMapHeader from "./DetailsMapHeader";
 
 type Props = {
   observation: Object
 }
 
+const DETAILS_MAP_MODAL_STYLE = { margin: 0 };
+
 const ViewInBrowserButton = ( { id } ) => {
   const url = `https://inaturalist.org/observations/${id}`;
   const handlePress = useCallback( async () => {
@@ -175,13 +178,15 @@ const DetailsTab = ( { observation }: Props ): Node => {
           positionalAccuracy={positionalAccuracy}
           tileMapParams={tileMapParams}
           withObsTiles={tileMapParams !== null}
+          scrollEnabled={false}
+          zoomEnabled={false}
+          zoomTapEnabled={false}
         />
       ) }
 
       <View className={`mt-[11px] space-y-[11px] ${sectionClass}`}>
         <ObservationLocation observation={observation} obscured={isObscured} details />
-        {isObscured
-        && (
+        {isObscured && (
           <Body4 className="italic ml-[20px]">
             {t( "Obscured-observation-location-map-description" )}
           </Body4>
@@ -222,18 +227,13 @@ const DetailsTab = ( { observation }: Props ): Node => {
       </View>
       <Divider />
 
-      <View className={sectionClass}>
-        <Heading4 className={headingClass}>{t( "PROJECTS" )}</Heading4>
-        <Heading4 className={headingClass}>
-          {
-          // eslint-disable-next-line i18next/no-literal-string
-          }
-          TODO: this section does nothing
-        </Heading4>
-        <Button text={t( "VIEW-PROJECTS" )} />
-      </View>
-
-      <Divider />
+      {/*
+        <View className={sectionClass}>
+          <Heading4 className={headingClass}>{t( "PROJECTS" )}</Heading4>
+          <Button text={t( "VIEW-PROJECTS" )} />
+        </View>
+        <Divider />
+      */}
 
       <View className={`${sectionClass} space-y-[11px]`}>
         <Heading4 className={headingClass}>{t( "OTHER-DATA" )}</Heading4>
@@ -249,16 +249,23 @@ const DetailsTab = ( { observation }: Props ): Node => {
         showModal={showMapModal}
         closeModal={( ) => setShowMapModal( false )}
         disableSwipeDirection
-        // eslint-disable-next-line react-native/no-inline-styles
-        style={{ margin: 0 }}
+        style={DETAILS_MAP_MODAL_STYLE}
         modal={(
-          <DetailsMapContainer
-            observation={observation}
+          <DetailsMap
             latitude={latitude}
             longitude={longitude}
             obscured={isObscured}
+            coordinateString={coordinateString}
             closeModal={( ) => setShowMapModal( false )}
+            positionalAccuracy={observation.positional_accuracy}
             tileMapParams={tileMapParams}
+            showLocationIndicator
+            headerTitle={(
+              <DetailsMapHeader
+                observation={observation}
+                obscured={isObscured}
+              />
+            )}
           />
         )}
       />

src/components/ObsDetails/DetailsTab/DetailsMap.js → src/components/SharedComponents/DetailsMap.js

@@ -1,10 +1,12 @@
 // @flow
 
+import Clipboard from "@react-native-clipboard/clipboard";
 import { HeaderBackButton } from "@react-navigation/elements";
 import classnames from "classnames";
+import CoordinatesCopiedNotification
+  from "components/ObsDetails/DetailsTab/CoordinatesCopiedNotification";
 import {
-  Body2,
-  Body4,
+  Heading2,
   INatIconButton,
   Map,
   Modal
@@ -15,32 +17,24 @@ import {
 } from "components/styledComponents";
 import { t } from "i18next";
 import type { Node } from "react";
-import React from "react";
+import React, { useState } from "react";
+import openMap from "react-native-open-maps";
 import { useTheme } from "react-native-paper";
 import IconMaterial from "react-native-vector-icons/MaterialCommunityIcons";
 import { getShadowForColor } from "styles/global";
 
-import CoordinatesCopiedNotification from "./CoordinatesCopiedNotification";
-
-const HEADER_BACK_BUTTON_STYLE = {
-  marginBottom: 15,
-  marginLeft: 15
-};
-
 type Props = {
   latitude: number,
   longitude: number,
   obscured?: boolean,
-  positionalAccuracy: number,
+  positionalAccuracy?: number,
   mapViewRef: any,
-  showNotificationModal: boolean,
-  displayLocation: string,
-  displayCoordinates: string,
-  closeNotificationsModal: Function,
-  copyCoordinates: Function,
-  shareMap: Function,
+  region?: Object,
   closeModal: Function,
-  tileMapParams: Object
+  tileMapParams: Object,
+  headerTitle?: Object,
+  showLocationIndicator: boolean,
+  coordinateString?: string
 }
 
 const FloatingActionButton = ( {
@@ -82,66 +76,64 @@ const FloatingActionButton = ( {
 
 const DetailsMap = ( {
   closeModal,
-  closeNotificationsModal,
-  copyCoordinates,
-  displayCoordinates,
-  displayLocation,
   latitude,
   longitude,
   mapViewRef,
   obscured,
   positionalAccuracy,
-  shareMap,
-  showNotificationModal,
-  tileMapParams
+  tileMapParams,
+  headerTitle,
+  showLocationIndicator,
+  region,
+  coordinateString
 }: Props ): Node => {
   const theme = useTheme( );
+  const [showNotificationModal, setShowNotificationModal] = useState( false );
+
+  const closeShowNotificationModal = () => {
+    setShowNotificationModal( false );
+  };
+  const copyCoordinates = () => {
+    if ( coordinateString ) {
+      Clipboard.setString( coordinateString );
+      setShowNotificationModal( true );
+      // notification disappears after 2 secs
+      setTimeout( closeShowNotificationModal, 2000 );
+    }
+  };
+
+  const shareMap = () => {
+    // takes in a provider prop but opens in browser instead of in app(google maps on iOS)
+    openMap( { query: `${latitude}, ${longitude}` } );
+  };
+
   return (
     <SafeAreaView className="flex-1">
-      <View className="bg-white w-fit flex-row items-end">
+      <View
+        className="bg-white w-fit flex-row py-[22px] items-start"
+      >
         <HeaderBackButton
           tintColor={theme.colors.primary}
           onPress={( ) => closeModal()}
-          style={HEADER_BACK_BUTTON_STYLE}
         />
-        <View className="pt-5 pr-5 pb-5 flex-1">
-          <Body2
-            className="text-darkGray"
-            numberOfLines={1}
-            ellipsizeMode="tail"
-          >
-            {displayLocation}
-          </Body2>
-
-          <Body2
-            className="text-darkGray"
-            numberOfLines={1}
-            ellipsizeMode="tail"
-          >
-            {displayCoordinates}
-          </Body2>
-          {obscured && (
-            <Body4 className="italic">
-              {t( "Obscured-observation-location-map-description" )}
-            </Body4>
-          ) }
-        </View>
+        {headerTitle || <Heading2 className="m-0">{t( "Map-Area" )}</Heading2>}
       </View>
       <View className="flex-1 h-full">
         <Map
-          showLocationIndicator
+          showLocationIndicator={showLocationIndicator}
           showCurrentLocationButton
           showSwitchMapTypeButton
           obsLatitude={latitude}
           obsLongitude={longitude}
+          region={region}
           mapHeight="100%"
           obscured={obscured}
           positionalAccuracy={positionalAccuracy}
           mapViewRef={mapViewRef}
           withObsTiles={tileMapParams !== null}
           tileMapParams={tileMapParams}
         >
-          { !obscured && (
+          { ( !obscured && showLocationIndicator ) && (
             <>
               <FloatingActionButton
                 icon="copy"
@@ -169,7 +161,7 @@ const DetailsMap = ( {
         animationIn="fadeIn"
         animationOut="fadeOut"
         showModal={showNotificationModal}
-        closeModal={( ) => closeNotificationsModal( false )}
+        closeModal={( ) => closeShowNotificationModal( )}
         modal={(
           <CoordinatesCopiedNotification />
         )}