Menu does not accommodate a long list of items

[brianGammon]

Description

When using the Menu component, if the list of items is longer then 12 or so, the menu modal is cutoff and the user has no way to find and select an item that is not visible. Could we have the ability to scroll within the menu when open? Or some arrows to indicate the additional items outside of the viewport? Also, the menu should use safearea insets to avoid being too close to the edges.

CodeSandbox/Snack link

No response

Steps to reproduce

1. Create any gluestack starter for Expo
2. Add a menu component with 20 items or so in it (see example below)
3. Run npm run ios
4. Trigger menu to open with button
5. See the menu items cutoff by edge of screen

Example component with Menu:

import { StyleSheet } from 'react-native';

import EditScreenInfo from '@/components/EditScreenInfo';
import { Text, View } from '@/components/Themed';
import { AddIcon, Button, ButtonText, EyeIcon, GlobeIcon, Icon, Menu, MenuItem, MenuItemLabel, SettingsIcon, SunIcon } from '@gluestack-ui/themed';

export default function TabOneScreen() {
  const breeds = [
    "Ameraucana",
    "Ancona",
    "Andalusian",
    "Appenzeller Spitzhauben",
    "Araucana",
    "Australorp",
    "Barnevelder",
    "Brahma",
    "Buckeye",
    "Buff Orpington",
    "Catalana",
    "Chantecler",
    "Cochin",
    "Cornish",
    "Croad Langshan",
    "Delaware",
    "Dominique",
    "Dorking",
    "Faverolles"
  ];
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tab One</Text>

      <Menu
          useRNModal
          trigger={({ ...triggerProps }) => {
            return (
              <Button {...triggerProps}>
                <ButtonText>Menu</ButtonText>
              </Button>
            );
          }}
        >
          {breeds.map((breed) => (
            <MenuItem key={breed} textValue={breed}>
              <MenuItemLabel size='sm'>
                {breed}
              </MenuItemLabel>
            </MenuItem>
          ))}

        </Menu>
      <View style={styles.separator}/>
      <EditScreenInfo path="app/(tabs)/index.tsx" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: '80%',
  },
});

gluestack-ui Version

1.1.9

Platform

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

Other Platform

No response

Additional Information

No response

[Viraj-10]

Hey @brianGammon, Thanks for reporting the issue. We will have a look.

[brianGammon]

@Viraj-10 do you think the team will have a solution for long Menu lists? I think in NativeBase it would add a scrollview. I need this functionality for my app.

[brianGammon]

Hello @Viraj-10 - revising this issue from a few months back. Has anyone on the team looked into added a scrollview to Menu?