fix: setting top offset of Menu based on anchorPosition

Author: BogiKay

example/src/Examples/MenuExample.tsx

@@ -146,6 +146,22 @@ const MenuExample = ({ navigation }: Props) => {
             </TouchableRipple>
           </List.Section>
         </View>
+        <View style={styles.alignCenter}>
+          <Menu
+            visible={_getVisible('menu5')}
+            onDismiss={_toggleMenu('menu5')}
+            anchorPosition="bottom"
+            anchor={
+              <Button mode="outlined" onPress={_toggleMenu('menu5')}>
+                Menu with anchor position
+              </Button>
+            }
+          >
+            <Menu.Item onPress={() => {}} title="Item 1" />
+            <Menu.Item onPress={() => {}} title="Item 2" />
+            <Menu.Item onPress={() => {}} title="Item 3" />
+          </Menu>
+        </View>
 
         <View style={styles.bottomMenu}>
           <Menu

src/components/Menu/Menu.tsx

@@ -441,12 +441,6 @@ const Menu = ({
     updateVisibility(rendered);
   }, [rendered, updateVisibility]);
 
-  React.useEffect(() => {
-    if (!isCoordinate(anchorRef.current) && anchorPosition === 'bottom') {
-      setTop((prev) => prev + anchorLayout.height);
-    }
-  }, [anchorPosition, anchorLayout.height]);
-
   // I don't know why but on Android measure function is wrong by 24
   const additionalVerticalValue = Platform.select({
     android: statusBarHeight,
@@ -456,7 +450,10 @@ const Menu = ({
   // We need to translate menu while animating scale to imitate transform origin for scale animation
   const positionTransforms = [];
   let leftTransformation = left;
-  let topTransformation = top;
+  let topTransformation =
+    !isCoordinate(anchorRef.current) && anchorPosition === 'bottom'
+      ? top + anchorLayout.height
+      : top;
 
   // Check if menu fits horizontally and if not align it to right.
   if (left <= windowLayout.width - menuLayout.width - SCREEN_INDENT) {