Dropdown menu not showing properly while ModalDropdown in bottom part of screen

[maxhis]

There are two ModalDropdowns in my screen, the first on work fine and the second show the drop-down menu just under the status bar(see the attached image).

Here is my code snippet:

<ModalDropdown
  defaultValue='请选择'
  {...this.props }
  style={styles.dropdownButton}
  textStyle={styles.item}
  dropdownStyle={styles.dropdownContainer}
  dropdownTextStyle={styles.item}
/>

const styles = StyleSheet.create({
  dropdownButton: {
    flex: 1,
    marginLeft: 5,
  },
  dropdownContainer: {
    height: 'auto',
    flexDirection: 'row',
  },
  item: {
    fontSize: 18,
    color: AppColors.textColor,
  },
});

When I comment out the line height: 'auto',, the drop-down menu will show in the proper location but show empty row if less than 4 items.

[dinhtho]

I have same issue and I think this is the problem. Take a look in ModalDropdown component. let showInBottom = bottomSpace >= dropdownHeight || bottomSpace >= this._buttonFrame.y;

dropdownHeight ='auto' so bottomSpace >= dropdownHeight cannot be true. you should use adjustFrame to change position of dropdown list or set specific value for height

[sohobloo]

@maxhis if you need to set the dropdown height dynamically, my suggestion is remove height: 'auto' to avoid incorrect position calculate and use adjustFrame to change the height like this:

<ModalDropdown
  defaultValue='请选择'
  {...this.props }
  style={styles.dropdownButton}
  textStyle={styles.item}
  dropdownStyle={styles.dropdownContainer}
  dropdownTextStyle={styles.item}
  adjustFrame={(style) => {
    style.height = [your height value];
    return style;
  }}
/>

[sohobloo]

There were no 'auto' or percentage width/height styles when I developed this component. Position calculate was based on numeric styles. So It's hard to compatible with these new features in react-native or I have to redesign the core position calculate functions.

[maxhis]

@sohobloo Thanks, I get it work on your suggestion.

[FabioMFGaspar]

Hi there, I've having this same problem but using the solution from @sohobloo didn't solve it.

I'm using

adjustFrame={(style) => {
 const frameHeight = (40*data.length); // 40 = img size + margin

 style.height = frameHeight;

 return style;
}}

In the code above there are cases where the height is only 40, still it calculated the height remaining to the bottom of the page with the default height value instead of the new one. So even if the value if more than enough to fit it will still be pushed above the dropdown.

[sohobloo]

3 am bothering by insomnia.

@Quem Try set this height in dropdownStyle and it will be available in position calculation. adjustFrame is used after that calculation.

[csgonutty]

Firstly thanks for a fantastic component, it's really helped me. I've used your method above @sohobloo but it appears that my dropdown modal doesn't adjust it's position when it runs of the screen. I set my height to 400 via the adjustFrame function

Is there any prop that I can pass that would allow me to position the modal in the middle of the screen.

[sohobloo]

@csgonutty Did you return the style after you set the height of it?

[maxhis]

Here is my final workaround, for someone facing the same problem:

const optionsCount = this.props.options.length;

<ModalDropdown
    {...this.props }
    style={styles.dropdownButton}
    textStyle={styles.item}
    dropdownStyle={[...styles.dropdownContainer, {height: optionsCount > 4 ? 'auto' : -1}]}
    dropdownTextStyle={styles.item}
    adjustFrame={(style) => {
        style.height = optionsCount > 4 ? style.height : -1;
        return style;
    }}
/>

[WidgetPMT]

Many thank @sohobloo @maxhis