Is possible to scroll on long list

[RenanSanguinete]

This issue can be repeated #40, but the other one doesn't show the answer.

Is possible to scroll on long MenuItem list?

Example:

   _menu = null;

   setMenuRef = ref => {
     this._menu = ref;
   };

   hideMenu = () => {
     this._menu.hide();
   };

   showMenu = () => {
     this._menu.show();
   };

   render() {
     let items = this.state.value.map( (s, i) => {
       return (
         <MenuItem onPress={()=>{this.addValue(s.id)}}>{s.name +' R$ '+s.value}</MenuItem>
       )
     });
     return (
       <ScrollView contentContainerStyle={{flex:1}} showsVerticalScrollIndicator={false}>

       <View style={{ flex: 1, alignItems: 'flex-end', justifyContent: 'center' }}>
        <Menu
          ref={this.setMenuRef}
          style={{overflow:'scroll'}}
          button={
            <TouchableOpacity onPress={this.showMenu}>
              <Image source={icAction} style={styles.icAction}  />
            </TouchableOpacity>}
        >

       {items}

       </Menu>
       </View>
       </ScrollView>

     )
  }

[shababcreative]

I don't know if this is the right way to do it but it solve the scroll issue on long lists :) edit this file node_modules\react-native-material-menu\src\menu.js

...
import {
  Animated,
  Dimensions,
  Easing,
  Modal,
  Platform,
  StatusBar,
  StyleSheet,
  TouchableWithoutFeedback,
  View,
  ViewPropTypes,
  I18nManager,
  ScrollView,  //ADD THIS
} from 'react-native';
...

  render() {
    ...
    return (
      <View ref={this._setContainerRef} collapsable={false} testID={testID}>
        <View>{button}</View>

        <Modal
          visible={modalVisible}
          onRequestClose={this._hide}
          supportedOrientations={[
            'portrait',
            'portrait-upside-down',
            'landscape',
            'landscape-left',
            'landscape-right',
          ]}
          transparent
          onDismiss={this._onDismiss}
        >
          <TouchableWithoutFeedback onPress={this._hide} accessible={false}>
            <View style={StyleSheet.absoluteFill}>
              <Animated.View
                onLayout={this._onMenuLayout}
                style={[
                  styles.shadowMenuContainer,
                  shadowMenuContainerStyle,
                  style,
                ]}
              >
                <Animated.View
                  style={[styles.menuContainer, animationStarted && menuSize]}
                >
                  <ScrollView> //ADD THIS
                  {children}
                  </ScrollView> //ADD THIS
                </Animated.View>
              </Animated.View>
            </View>
          </TouchableWithoutFeedback>
        </Modal>
      </View>
    );
...

and add maxHeight to Menu style:

            <Menu
              style={{maxHeight: 300}}
            >
               ...
            </Menu>

[RenanSanguinete]

I don't know if this is the right way to do it but it solve the scroll issue on long lists :) edit this file node_modules\react-native-material-menu\src\menu.js

...
import {
  Animated,
  Dimensions,
  Easing,
  Modal,
  Platform,
  StatusBar,
  StyleSheet,
  TouchableWithoutFeedback,
  View,
  ViewPropTypes,
  I18nManager,
  ScrollView,  //ADD THIS
} from 'react-native';
...

  render() {
    ...
    return (
      <View ref={this._setContainerRef} collapsable={false} testID={testID}>
        <View>{button}</View>

        <Modal
          visible={modalVisible}
          onRequestClose={this._hide}
          supportedOrientations={[
            'portrait',
            'portrait-upside-down',
            'landscape',
            'landscape-left',
            'landscape-right',
          ]}
          transparent
          onDismiss={this._onDismiss}
        >
          <TouchableWithoutFeedback onPress={this._hide} accessible={false}>
            <View style={StyleSheet.absoluteFill}>
              <Animated.View
                onLayout={this._onMenuLayout}
                style={[
                  styles.shadowMenuContainer,
                  shadowMenuContainerStyle,
                  style,
                ]}
              >
                <Animated.View
                  style={[styles.menuContainer, animationStarted && menuSize]}
                >
                  <ScrollView> //ADD THIS
                  {children}
                  </ScrollView> //ADD THIS
                </Animated.View>
              </Animated.View>
            </View>
          </TouchableWithoutFeedback>
        </Modal>
      </View>
    );
...

and add maxHeight to Menu style:

            <Menu
              style={{maxHeight: 300}}
            >
               ...
            </Menu>

I don't know if this is the better solution, but it works like a charm.

Thanks a lot!

[bcbcbcbcbcl]

You can simply achieve it by adding scrollview to the selection like this in your code instead of editing node_modules\react-native-material-menu\src\menu.js

<Menu
  style={{maxHeight: 300}}
>
  <ScrollView>
    { MenuItems }
  </ScrollView>
</Menu>