Popovers cover child element (also happens on Datepicker element)

[xydian]

Issue type

I'm submitting a ... (check one with "x")

• [x] bug report
• [ ] feature request

Issue description

Current behavior:

If i use the popover code from the UI Kitten Popover Docs. The Popover does not render below the children element (button) but rather render over the element and hides half of it.

Expected behavior:

Popover should render below child element.

Steps to reproduce:

I could not get ui kitten working on expo snack, so I created a little github repo. It is just a minimal expo app with the code of the popover element.

Related code:

Github repo with bug

const PopoverContent = () => (
  <Layout style={styles.popoverContent}>
    <Text>Hi! This is popover.</Text>
  </Layout>
);

export const PopoverSimpleUsageShowcase = () => {

  const [visible, setVisible] = React.useState(false);

  const togglePopover = () => {
    setVisible(!visible);
  };

  return (
    <Popover
      visible={visible}
      content={PopoverContent()}
      onBackdropPress={togglePopover}>
      <Button onPress={togglePopover}>
        TOGGLE POPOVER
      </Button>
    </Popover>
  );
};

const styles = StyleSheet.create({
  popoverContent: {
    justifyContent: 'center',
    alignItems: 'center',
    padding: 24,
  },
});

Other information:

It also happens on the Datepicker element, the rendered element to pick dates covers the Datepicker Textbox. If you want i can also provide a screen recording of this.

OS, device, package version

Android 10.0, Pixel 2 emulator, ui-kitten 4.3.1
Lineage OS 16, Oneplus 6T (real device, no emulator), ui-kitten 4.3.1

[artyorsh]

👋 I’m currently working on this, but looks like it is StatusBar issue. Can you share your status bar config?

[artyorsh]

Btw, here is a similar issue #743

[xydian]

Hi thank you very much for the fast reply.

Sorry I briefly looked for similar issues beforehand and even stumbled upon the issue you linked but didnt realize it was the same kind of problem :)

I didn't configure the Status Bar in any way, it was the way expo shipped it by default. But you are right, if i edit status bar config in app.json like it is explained here and add for example a background color, the issue resolves and it is rendered correctly. So as long as the StatusBar is not translucent, the popup is rendered correctly

For me it is okay to use a non-translucent StatusBar so it is not a problem for me to use this workaround. I will keep the bug report open because it still is a bug which other people may have. Its up to you if you want to close it immediately or once it is resolved.

Btw: Keep up the good work! UI Kitten is my favorite react-native UI library as of today.

[dario30186]

Hello, I have the same issue for DatePicker. Any fix?