Auxiliary gets smaller every time

[FranciscoFonseca]

Trying auxiliary menu, everything is working fine but the auxuliary gets smaller every time. Already tried adding a width bigger than the phone but it seems tha auxiliary itself is getting small.

https://github.com/nandorojo/zeego/assets/13562419/86412f65-91de-4a22-958c-59f997ed6cac

Platform: IOs

[nandorojo]

Yeah the settings are very particular. Are you on the latest iOS menu version? Try setting height and width props on it

[FranciscoFonseca]

Running iOs 17.4.1 <ContextMenu.Auxiliary key={'reaction'} height={50} width={80}> this is how i am running it right now

[nandorojo]

The iOS menu version, not iOS version.

See the upstream iOS context menu docs for example props of the auxiliary menu.

[ghoudi01]

Here's a solution that should work for you, though it's not the most optimal way to handle this: First, create a state to track whether the menu is open: const [isMenuOpen, setIsMenuOpen] = React.useState(false); pass this handler to the ContextMenu.Root component:

const onOpenChange = (isOpen) => {
  setIsMenuOpen(isOpen);
};
<ContextMenu.Root onOpenWillChange={onOpenChange}>
    {isMenuOpen&&(<ContextMenu.Auxiliary 
      alignmentHorizontal={isOwner?"previewTrailing": 'previewLeading'}
     > 

     {({ dismissMenu }) => (
        <youComponent/>
      )}

      </ContextMenu.Auxiliary> )}
</ContextMenu.Root>

[nandorojo]

This worked for me:

auxiliaryPreviewConfig: {
            verticalAnchorPosition: 'automatic',
            horizontalAlignment: isMe ? 'targetTrailing' : 'targetLeading',
            marginVerticalInner: 10,
            anchorPosition: 'automatic',
            transitionConfigEntrance: {
              mode: 'syncedToMenuEntranceTransition',
              shouldAnimateSize: true,
            },
            transitionExitPreset: {
              mode: 'zoomAndSlide',
              zoomOffset: 0.8,
              slideOffset: -20,
            },
          }