react-native-element-dropdown

react-native-element-dropdown copied to clipboard

"@gorhom/bottom-sheet": "^4",
"react": "18.2.0",
"react-native": "0.72.7",
"react-native-element-dropdown": "^2.10.1",

test device

• iPhone 14 Simulator
• Android Emulator - Pixel_2_API_33

When loading a drop-down component from a bottom-sheet modal The top position value in the first position is strange.

Watch the first video carefully, the itemContainer is at the bottom and then returns to its original position. I replaced it with a fade effect to trick the eye. I hope this is fixed.

position top value before clicking the dropdown: 12xx After clicking the dropdown, position top value: 3xx

// react-native-element-dropdown/src/components/Dropdown/index.tsx

const _measure = useCallback(() => {
  if (ref && ref?.current) {
    ref.current.measureInWindow((pageX, pageY, width, height) => {
      let isFull = isTablet
        ? false
        : mode === 'modal' || orientation === 'LANDSCAPE';

      if (mode === 'auto') {
        isFull = false;
      }

      const top = isFull ? 20 : height + pageY + 2;
      const bottom = H - top + height;
      const left = I18nManager.isRTL ? W - width - pageX : pageX;

      // first: 12xx
      // second: 3xx
      console.log(top);

      setPosition({
        isFull,
        width: Math.floor(width),
        top: Math.floor(top + statusBarHeight),
        bottom: Math.floor(bottom - statusBarHeight),
        left: Math.floor(left),
        height: Math.floor(height),
      });
    });
  }
}, [H, W, orientation, mode]);

// react-native-element-dropdown/src/components/Dropdown/index.tsx
return (
  <Modal
    transparent
    statusBarTranslucent
    visible={visible}
    supportedOrientations={['landscape', 'portrait']}
    onRequestClose={showOrClose}
    animationType='fade' // add here
  >
  ...

problem

https://github.com/hoaphantn7604/react-native-element-dropdown/assets/19409518/61e54810-045f-4e0c-acdb-e4230a82deb5

temporary solution

https://github.com/hoaphantn7604/react-native-element-dropdown/assets/19409518/cbe17c36-849d-46d3-a7e4-eecb338d6aef

I'm having the SAME exact issue when putting the dropdown in a scrollview. Also doing the above patch resolves the issue.

@hoaphantn7604 , is this something you can please get fixed?