NativeBase: menu does not work

Description

menu component doesn’t work

CodeSandbox/Snack link

htt

Steps to reproduce

started expo template put formal code for menu no error but didn’t work

NativeBase Version

3.3.1

Platform

Android
CRA
Expo
iOS
Next

Other Platform

No response

Additional Information

the menu does not work for me I tried every way but the pressable icon does not do anything I started new expo project and pasted your formal code but nothing happen <Box h="80%" w="90%" alignItems="flex-start"> <Menu closeOnSelect={false} w="190" onOpen={() => console.log("opened")} onClose={() => console.log("closed")} trigger={triggerProps => { return <Pressable {...triggerProps}> <HamburgerIcon /> </Pressable>; }}> <Menu.OptionGroup defaultValue="Arial" title="free" type="radio"> <Menu.ItemOption value="Arial">Arial</Menu.ItemOption> <Menu.ItemOption value="Nunito Sans">Nunito Sans</Menu.ItemOption> <Menu.ItemOption value="Roboto">Roboto</Menu.ItemOption> </Menu.OptionGroup> <Divider mt="3" w="100%" /> <Menu.OptionGroup title="paid" type="checkbox"> <Menu.ItemOption value="SF Pro">SF Pro</Menu.ItemOption> <Menu.ItemOption value="Helvetica">Helvetica</Menu.ItemOption> </Menu.OptionGroup> </Menu> </Box>

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 6
Comments: 17

Most upvoted comments

I’m using version 3.3.11, and still have this freezing problem. Setting defaultIsOpen={false} solved it.

Looooong on Apr 9, 2022

Affected: 3.3.6, 3.3.7 I downgraded native base to 3.3.5

mr-martins on Mar 21, 2022

This wasted my whole day in figuring out what was causing the freeze. It turned out to be Menu component, it was working fine earlier. You are overalying some kind of component on top of everything, so back button press becomes necessary to remove that from navigation stack.

ghost on Mar 17, 2022

I’m having the same issue with the menu component. Menu code:

 <Menu
        w='120'
        position='absolute'
        top='-5px'
        right='5px'
        shouldOverlapWithTrigger={true}
        isOpen={true}
        trigger={triggerProps => {
          return (
            <Pressable {...triggerProps}>
              <Text>TRIGGER</Text>
            </Pressable>
          )
        }}
      >
        <Menu.Item>
          <MenuItemIcon name={t('edit')} iconName='square-edit-outline' />
        </Menu.Item>
        <Menu.Item>
          <MenuItemIcon
            name={t('delete')}
            iconName='close-circle-outline'
          />
        </Menu.Item>
      </Menu>

Using the Menu freezes the app on Android and iOS

Any solutions welcome!

Platform: react-native-cli Android 10 iOS 15 native base 3.3.7

Code sandbox As you can see, it works on the web, but does not on native devices: https://snack.expo.dev/YgiA0Xhb_

mgo-spyro on Mar 16, 2022

@jqwez same error happened and the solution you give fixed it thank you a lot.

sFarkhod on Nov 28, 2023

Not necessarily a NativeBase bug, but adding for people like me who find their way here:

I passed props to a nested component of the PopoverTrigger:

  Box
    Button {...props}
...

I was experiencing a situation like the above and the menu wasn’t displaying when pushing the trigger. I resolved the issue by making the top-level of the trigger pressable and passing props to that component.

  Pressable {...props}
    Box
...

using "native-base": "3.4.28"

connorpmullins on May 31, 2023

I had the same issue. All above suggestions did not work for me. By looking at the Popover section I was able see that the easiest way to negate this error was by adding the following code within the Menu component:

isOpen={clearOpen} onClose={() => setClearOpen(!clearOpen)}

and the following for statefulness:

const [clearOpen, setClearOpen]= useState(false)

I am using NativeBase 3.4.7

jqwez on Jun 28, 2022

@RubenPM-dev We’re working on the SSRProvider warning issue.

surajahmed on Apr 13, 2022

This issue has been resolved in version 3.3.11. Thanks for reporting. Going to close this issue. If you face any problems, please feel free to reopen.

surajahmed on Apr 8, 2022

Had the same issue with 3.3.1… I updated to 3.3.7 and the issue is still there.

I downgrade to 3.3.5 and it works. Thanks @mr-martins

Lauwed on Mar 23, 2022