react-native-modal-dropdown icon indicating copy to clipboard operation
react-native-modal-dropdown copied to clipboard

adjustFrame returning top property as NaN when parent View justifyContent is set.

Open cesargutierrezo opened this issue 6 years ago • 3 comments

I use adjustFrame to move my option dropdown a bit lower by adding a few pixels to the adjustFrame style object. As soon as I set the parent View style to justifyContent: center, the dropdown started rendering at the top of the screen instead of the calculated top I had set. Soon I found out the top property was returning NaN.

Has this happened to anyone else?

Problem: image

Regular behavior: image

cesargutierrezo avatar Aug 03 '18 02:08 cesargutierrezo

I just found out what the problem was. I was setting the dropdown height to 'auto' which messed up the position calculation.

const positionStyle = {
      height: dropdownHeight,
      top: showInBottom ? this._buttonFrame.y + this._buttonFrame.h : Math.max(0, 
      this._buttonFrame.y - dropdownHeight),
};

console.log(showInBottom) // Returns NaN because dropdownHeight is set to 'auto' instead of an actual number

I don't know if this is something that could be fixed but for now I'll set up a fixed height.

cesargutierrezo avatar Aug 03 '18 18:08 cesargutierrezo

I had exactly the same problem. Your comment saved my day. Thanks.

srdjanbogicevic avatar Nov 09 '18 19:11 srdjanbogicevic

I just found out what the problem was. I was setting the dropdown height to 'auto' which messed up the position calculation.

const positionStyle = {
      height: dropdownHeight,
      top: showInBottom ? this._buttonFrame.y + this._buttonFrame.h : Math.max(0, 
      this._buttonFrame.y - dropdownHeight),
};

console.log(showInBottom) // Returns NaN because dropdownHeight is set to 'auto' instead of an actual number

I don't know if this is something that could be fixed but for now I'll set up a fixed height.

You saved my night too

velialiev avatar Dec 27 '20 19:12 velialiev