What is the preferred way of preventing the Menu component from going outside the bounds of the screen?

[idiomattic]

Ask your Question

I have a few dropdowns that have a variable number of Menu Item's and I've noticed that they sometimes will run outside the bounds of the bottom of the screen. I've tried setting a maxHeight in the contentStyle prop but that seems to allow the menu items to overflow their container.

My current implementation:

      <Menu
        visible={showDropdown}
        onDismiss={() => setShowDropdown(false)}
        style={{ paddingTop: 50 }}
        anchor={
          <Button
            mode={mode}
            disabled={disabled}
            icon={icon}
            onPress={() => setShowDropdown(true)}
            contentStyle={{ flexDirection: 'row-reverse' }}
            labelStyle={labelStyle}
            >
            {value || placeholder}
          </Button>
        }
        >
        {
          list.map(({ label, value }, i) => (
            <View key={i}>
              <Menu.Item 
                title={label} 
                onPress={() => {
                  onSelect(value)
                  setShowDropdown(false)
                }}
                />
            </View>
          ))
        }
      </Menu>

[lukewalczak]

I have a few dropdowns that have a variable number of Menu Item's and I've noticed that they sometimes will run outside the bounds of the bottom of the screen

Hey @idiomattic, could you present it on the expo snack?

[lukewalczak]

Closing due to inactivity and lack of reproducibility.

[Zhashkha]

I have the very same problem
How can I control the size of a menu list. I want it to make smaller and still scrollable