@jobber/components-native 0.63.0 → 0.64.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.63.0",
+  "version": "0.64.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -84,5 +84,5 @@
     "react-native-safe-area-context": "^4.5.2",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "15034baa004c4a11f17338b96d6f2678f3183d56"
+  "gitHead": "2cf5b8fafc67e021899124f3fd885de116bc374e"
 }

package/src/Menu/Menu.style.ts

@@ -9,7 +9,7 @@ export const styles = StyleSheet.create({
     backgroundColor: tokens["color-surface"],
     paddingHorizontal: tokens["space-small"],
     paddingVertical: tokens["space-small"] + tokens["space-smallest"],
-    borderRadius: tokens["radius-larger"],
+    borderRadius: tokens["radius-base"],
     width: menuWidth,
     ...tokens["shadow-high"],
   },

package/src/Menu/Menu.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useRef, useState } from "react";
 import {
+  Keyboard,
   LayoutRectangle,
+  Platform,
   Pressable,
   View,
   useWindowDimensions,
@@ -33,7 +35,7 @@ export function Menu({ menuOptions, customActivator }: MenuProps): JSX.Element {
     }
   }, [screenInfo, activatorLayout]);
 
-  const activatorOnPress = (onPress?: () => void) => {
+  const openMenu = () => {
     menuButtonRef.current?.measureInWindow(
       (x: number, y: number, width: number, height: number) => {
         activatorLayout.current = {
@@ -44,11 +46,23 @@ export function Menu({ menuOptions, customActivator }: MenuProps): JSX.Element {
         };
         findMenuLayout();
         setOpen(true);
-        onPress && onPress();
       },
     );
   };
 
+  const activatorOnPress = (onPress?: () => void) => {
+    onPress && onPress();
+
+    if (Platform.OS === "ios" && Keyboard.isVisible()) {
+      // On iOS, the keyboard height causes problems with the menu positioning logic.
+      // Wait until the keyboard is fully hidden before we show the menu.
+      onKeyboardDidHide(openMenu);
+      Keyboard.dismiss();
+    } else {
+      openMenu();
+    }
+  };
+
   return (
     <>
       <View
@@ -113,3 +127,10 @@ function useScreenInformation() {
 
   return { headerHeight, windowWidth, windowHeight };
 }
+
+function onKeyboardDidHide(callback: () => void) {
+  const listener = Keyboard.addListener("keyboardDidHide", () => {
+    listener.remove();
+    callback();
+  });
+}

package/src/Menu/utils.ts

@@ -118,12 +118,7 @@ function getLeftPosition(
   } else if (overflowRight) {
     pos.right = 0;
   } else {
-    pos.right =
-      windowWidth -
-      activatorLayout.x -
-      activatorLayout.width +
-      activatorLayout.width / 2 -
-      menuHorizontalPadding;
+    pos.right = windowWidth - activatorLayout.x - activatorLayout.width;
   }
 }
 
@@ -147,6 +142,6 @@ function getRightPosition(
   } else if (overflowLeft) {
     pos.left = 0;
   } else {
-    pos.left = activatorLayout.x + activatorLayout.width / 2 - menuPadding;
+    pos.left = activatorLayout.x;
   }
 }