Wrong position calculation when modal is dropped down

[000xuandu]

I am using "react-native-modal-dropdown": "^ 0.7.0".

Currently, I encounter this problem on my android device (on IOS devices it does not happen), that is: When the modal is dropped down, the position between the "Select Topic" button and the modal is spaced apart.

Code and error are posted in the image:

Expected: The position of this modal is right below the "Select Topic" button.

@ajonno Help me, pls

[000xuandu]

I think the problem is here: https://github.com/sohobloo/react-native-modal-dropdown/blob/master/components/ModalDropdown.js#L217

Should be, frameStyle, dropdownStyle instead of dropdownStyle, frameStyle Please guide me on how to fix the error. I hope you.

[GavinRay97]

@000xuandu I had this problem too. I think it may have been caused by one of the flex style props passed to the ModalDropdown container.

You can solve it by subtracting from the top style prop in the handler like this:

<ModalDropdown
  options={['option 1', 'option 2']}
  adjustFrame={style => {
    style.top = style.top - 15;
    return style;
  }}
/>

[Luanluu96]

Android function measure will add the height of the status bar you can resolve it subtract it in the adjustFrame prop like this:

<ModalDropdown
  options={['option 1', 'option 2']}
  adjustFrame={style => {
    style.top =(Platform.OS === 'ios' ? style.top : style.top - StatusBar.currentHeight);
    return style;
  }}
/>

[tz211488]

Android function measure will add the height of the status bar you can resolve it subtract it in the adjustFrame prop like this:

<ModalDropdown
  options={['option 1', 'option 2']}
  adjustFrame={style => {
    style.top =(Platform.OS === 'ios' ? style.top : style.top - StatusBar.currentHeight);
    return style;
  }}
/>

you save my life, many thanks