Menu does not render correctly the first time it's opened

[flyingL123]

Description

The background of the menu does not fill completely behind the items the first time it's opened. It is correct on subsequent renders.

CodeSandbox/Snack link

https://github.com/flyingL123/expo-gluestack-ui/tree/menu-bug

Steps to reproduce

Click the FAB in the middle-right of the screen to open the menu. You will see the white background does not extend fully behind the menu items:

Close the menu and open it again. Now the white background is correct:

gluestack-ui Version

2

Platform

• [X] Expo
• [ ] React Native CLI
• [ ] Next
• [ ] Web
• [ ] Android
• [X] iOS

Other Platform

No response

Additional Information

No response

[Viraj-10]

Hey @flyingL123, It's working fine for me. Can you please clear cache and check again ?

https://github.com/user-attachments/assets/7ec7f31e-ce4f-4f49-adcd-bf67f05a6292

[flyingL123]

@Viraj-10 strange, it works for me as well when I use the iOS 15 Pro Max Simulator running iOS 17.5

However, on my actual iPhone XR running iOS 18.1.1, the bug in my screenshots still occur.

I don't have an XR simulator, but I have an iPhone SE simulator, and on that, the bug occurs. So it seems like it may be an issue with older phones? I think if you test it on an iPhone XR simulator, you will see the bug.

[phalera]

my actual iphone 15 ios 18.1 does not render correctly the first time too.

[marcos-credfranco]

My Iphone 15 pro ios 18.2 does not render correctly the first time too, in build production and expo go

[phalera]

My Iphone 15 pro ios 18.2 does not render correctly the first time too, in build production and expo go

I am using the actual device and pure react-native without expo framework

[xiaoosnggao]

ios18 Simulator

There is the same problem. I use menu in expo.

[timlftv]

iPhone 16 Pro Max / iOS18 simulator. There is the same issue here

[6ichem]

Same issue here

• iOS 18 iPhone 16 Pro Max Simulator
• Was able to reproduce on my physical iPhone 15 Pro Max with iOS 18

[6ichem]

After further investigation, the issue seems to come from the transition of the menu. This is the solution I came up with for now until the devs fix it; Change the initial scaling value of the menu from 0.8 to 1 in the UI menu component (@/components/ui/menu.tsx) and it would work fine without affecting the animation

const Menu = React.forwardRef<React.ElementRef<typeof UIMenu>, IMenuProps>(
  ({ className, ...props }, ref) => {
    return (
      <UIMenu
        ref={ref}
        initial={{
          opacity: 0,
          scale: 1,
        }}
        animate={{
          opacity: 1,
          scale: 1,
        }}
        exit={{
          opacity: 0,
          scale: 0.8,
        }}
        transition={{
          type: "timing",
          duration: 100,
        }}
        className={menuStyle({
          class: className,
        })}
        {...props}
      />
    );
  }
);

[flyingL123]

Thanks so much for posting that @6ichem it seems to have worked for me.

[amrya200t]

@flyingL123

I had the same issue, and adding the prop useRNModal to the menu fixed it for me.

You can try adding it as well.