Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue: with @gorhom/bottom-sheet -> flicker itemContainer #239

Open
qnrjs42 opened this issue Dec 21, 2023 · 1 comment
Open

Issue: with @gorhom/bottom-sheet -> flicker itemContainer #239

qnrjs42 opened this issue Dec 21, 2023 · 1 comment

Comments

@qnrjs42
Copy link

qnrjs42 commented Dec 21, 2023

"@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

problem.mov

temporary solution

solution.mov
@TraGicCode
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants