address pr feedback

src/components/AddObsBottomSheet/AddObsBottomSheet.tsx

@@ -1,9 +1,9 @@
 import {
   Body3, BottomSheet, INatIcon, INatIconButton
 } from "components/SharedComponents";
-import { View } from "components/styledComponents";
+import { Pressable, View } from "components/styledComponents";
 import React, { useMemo } from "react";
-import { Platform, Pressable } from "react-native";
+import { Platform } from "react-native";
 import Observation from "realmModels/Observation";
 import { useTranslation } from "sharedHooks";
 import useStore from "stores/useStore";
@@ -18,12 +18,12 @@ interface Props {
 }
 
 type ObsCreateItem = {
-    text?: string,
-    icon: string,
-    onPress: ( ) => void,
-    testID: string,
-    accessibilityLabel: string,
-    accessibilityHint: string
+  text: string,
+  icon: string,
+  onPress: ( ) => void,
+  testID: string,
+  accessibilityLabel: string,
+  accessibilityHint: string
 }
 
 const majorVersionIOS = parseInt( String( Platform.Version ), 10 );
@@ -128,7 +128,7 @@ const AddObsBottomSheet = ( {
       hidden={hidden}
       insideModal={false}
       hideCloseButton
-      additionalClasses="bg-lightGray pt-4"
+      containerClass="bg-lightGray pt-4"
       scrollEnabled={false}
     >
       <View className="flex-column gap-y-4 pb-4 px-4">
@@ -145,7 +145,7 @@ const AddObsBottomSheet = ( {
 
         <Pressable
           className="bg-mediumGray w-full flex-row items-center py-[10px] px-5 rounded-lg
-          active:opacity-50"
+          active:opacity-75"
           onPress={obsCreateItems.noEvidence.onPress}
           accessibilityHint={obsCreateItems.noEvidence.accessibilityHint}
           accessibilityLabel={obsCreateItems.noEvidence.accessibilityLabel}

src/components/AddObsBottomSheet/AddObsButton.js

@@ -166,7 +166,6 @@ const AddObsButton = ( ): React.Node => {
   return (
     <>
       <AddObsTooltip isVisible={showTooltip} dismissTooltip={dismissTooltip} />
-      {/* match the animation timing on FadeInView.tsx */}
       <AddObsBottomSheet
         closeBottomSheet={closeBottomSheet}
         hidden={!showBottomSheet}

src/components/AddObsBottomSheet/AddObsTooltip.tsx

@@ -1,45 +1,53 @@
 import classNames from "classnames";
-import { Body2 } from "components/SharedComponents";
+import { Body2, Modal } from "components/SharedComponents";
 import GradientButton from "components/SharedComponents/Buttons/GradientButton";
+import { View } from "components/styledComponents";
 import React from "react";
-import { Modal, View } from "react-native";
 import { useTranslation } from "sharedHooks";
 
-type Props = {
-    isVisible: boolean;
-    dismissTooltip: () => void;
-};
+interface Props {
+  isVisible: boolean;
+  dismissTooltip: ( ) => void;
+}
 
-const AddObsTooltip = ( { isVisible, dismissTooltip }: Props ): React.ReactNode => {
+const AddObsTooltip = ( { isVisible, dismissTooltip }: Props ) => {
   const { t } = useTranslation();
+
+  const modalContent = (
+    <View className="flex-1 bg-black/50 items-center justify-end">
+      <View className="relative bottom-[24px] items-center">
+        <View className="bg-white rounded-2xl px-5 py-4">
+          <Body2>{t( "Press-and-hold-to-view-more-options" )}</Body2>
+        </View>
+        <View
+          className={classNames(
+            "border-l-[10px] border-r-[10px] border-x-[#00000000]",
+            "border-t-[16px] border-t-white mb-2"
+          )}
+        />
+        <GradientButton
+          sizeClassName="w-[69px] h-[69px]"
+          onPress={() => {}}
+          onLongPress={() => dismissTooltip()}
+          accessibilityLabel={t( "Add-observations" )}
+          accessibilityHint={t( "Shows-observation-creation-options" )}
+        />
+      </View>
+    </View>
+
+  );
+
   return (
     <Modal
-      visible={isVisible}
-      animationType="fade"
-      transparent
-      onRequestClose={dismissTooltip}
-    >
-      <View className="flex-1 bg-black/50 items-center justify-end">
-        <View className="relative bottom-[24px] items-center">
-          <View className="bg-white rounded-2xl px-5 py-4">
-            <Body2>{t( "Press-and-hold-to-view-more-options" )}</Body2>
-          </View>
-          <View
-            className={classNames(
-              "border-l-[10px] border-r-[10px] border-x-[#00000000]",
-              "border-t-[16px] border-t-white mb-2"
-            )}
-          />
-          <GradientButton
-            sizeClassName="w-[69px] h-[69px]"
-            onPress={() => {}}
-            onLongPress={() => dismissTooltip()}
-            accessibilityLabel={t( "Add-observations" )}
-            accessibilityHint={t( "Shows-observation-creation-options" )}
-          />
-        </View>
-      </View>
-    </Modal>
+      animationIn="fadeIn"
+      animationOut="fadeOut"
+      backdropOpacity={0}
+      closeModal={dismissTooltip}
+      disableSwipeDirection
+      fullScreen
+      modal={modalContent}
+      showModal={isVisible}
+    />
   );
 };
 

src/components/SharedComponents/Sheets/BottomSheet.tsx

@@ -35,12 +35,12 @@ interface Props {
   onLayout?: ( event: object ) => void;
   // Callback when the user presses the close button or backdrop, not whenever the sheet
   // closes
-  onPressClose?: () => void;
+  onPressClose?: ( ) => void;
   snapPoints?: Array<string>;
   insideModal?: boolean;
   keyboardShouldPersistTaps?: string;
   testID?: string;
-  additionalClasses?: string;
+  containerClass?: string;
   scrollEnabled?: boolean;
 }
 
@@ -54,7 +54,7 @@ const StandardBottomSheet = ( {
   snapPoints,
   insideModal,
   keyboardShouldPersistTaps = "never",
-  additionalClasses,
+  containerClass,
   testID,
   scrollEnabled = true
 }: Props ): Node => {
@@ -124,23 +124,25 @@ const StandardBottomSheet = ( {
             insets.bottom > 0
               ? "pb-7"
               : null,
-            additionalClasses
+            containerClass
           )}
           onLayout={onLayout}
           // Not ideal, but @gorhom/bottom-sheet components don't support
           // testID
           testID={testID}
         >
-          {headerText && (
-            <View className="mx-12 flex">
-              <Heading4
-                testID="bottom-sheet-header"
-                className="w-full text-center"
-              >
-                {headerText}
-              </Heading4>
-            </View>
-          )}
+          {!headerText
+            ? null
+            : (
+              <View className="mx-12 flex">
+                <Heading4
+                  testID="bottom-sheet-header"
+                  className="w-full text-center"
+                >
+                  {headerText}
+                </Heading4>
+              </View>
+            )}
           {children}
           {!hideCloseButton && (
             <INatIconButton