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

• Expo
• React Native CLI
• Next
• Web
• Android
• 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?

[brianGammon]

@Viraj-10 I have switched to gluestack-ui v2 and this issue still exists. The Menu contents needs a ScrollView, along with a height calculation. Please consider adding a v2 label and pulling up in the the priority. There are not many good Menus out there and if you can get this one to work like it did in NativeBase it will make the Gluestack Menu the best out there among the competitors.

[timlftv]

hi, I'm facing the same problem. is there any solution or workaround yet?

[austin43]

Not to detract from the overall point here, as it would be great to have scrollable Menu, but would Select possibly be a better UI for long lists here? It inherits from ActionSheet and can use SelectScrollView and SelectFlatList.