Xiaomi phones that hides the bottom navbar have issues clicking bottom pixels because of modalprovider

[genesy]

I implemented this recently and i've gotten bunch of reports from xiaomi users specifically. I bought a Pocophone f1 to replicate the issue and it only happens if the user hides their navigation bar from the settings.

THe pixels where the navigation bar is supposed to be is unclickable because of the ModalProvider. removing it fixes the problem

[CharlesMangwa]

Hi @genesy! Could you provide a reproducible demo in Snack plz? Would make it easier to debug your issue. In the meantime, we'll try to secure a Xiaomi device to test the repro when you'll have it. Thanks in advance!

[CharlesMangwa]

Closing this issue for now, feel free to reopen as soon as you'll have the repro.

[jakobo]

Just stumbled into this issue. ModalStack's z-index is 0 and if you're not applying a z-index in your application, something is covering the bottom of the screen on android making things like a bottom tab navigation untappable.

Ultimately, I was able to work around this by controlling the zIndex of my application, based on whether or not the modal was open. It's a workaround, but thankfully one that's easy to remove if we can figure out what's causing the overlap.

// ModalAwareContent uses the useModal hook to control a dynamic z-index based on the modal state
export const ModalAwareContent = ({ children }) => {
  const { currentModal } = useModal();
  const workaroundStyles = currentModal
    ? {}
    : {
        zIndex: 1,
      };
  return <View style={{ flex: 1, ...workaroundStyles }}>{children}</View>;
};

// shimmed ModalProvider
export const Provider = ({ children }) => {
  return (
    <ModalProvider stack={modalStack}>
      <ModalAwareContent>{children}</ModalAwareContent>
    </ModalProvider>
  );
};

I think it has something to do with how the ModalStack is given a z-index, coupled with the fact that Android doesn't properly report its status bar height meaning there's about 50(ish) pixels of height missing from the Dimensions.height

[CharlesMangwa]

Hi @genesy @jakobo! If you're still facing this issue, I've just published v2.1.2 which includes a fix for #42. I'd suspect it also addressed this issue too. Let us know!