Popover ignores translucent StatusBar on Android

[damienix]

Issue type

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

• bug report
• feature request

Issue description

Current behavior:
Translucent status bar breaks Overflow menus position on Android. It's moved up by the width of the statusbar.

Expected behavior:
Menus are displayed right below the container, work the same on iOS and Android, regardless of statusbar configuration.

Steps to reproduce:

1. Add <StatusBar translucent={true}/>
2. Use any of Overflow menu variants (Popover, Tooltip).

Related code:
As above.

Other information:

OS, device, package version

Android

  "dependencies": {
    "@eva-design/eva": "^1.3.0-beta.1",
    "@expo/vector-icons": "^10.0.5",
    "@react-native-community/masked-view": "^0.1.1",
    "@react-navigation/bottom-tabs": "^5.0.0-alpha.21",
    "@react-navigation/core": "^5.0.0-alpha.22",
    "@react-navigation/native": "^5.0.0-alpha.15",
    "@react-navigation/stack": "^5.0.0-alpha.36",
    "@ui-kitten/eva-icons": "^4.3.0-beta.1",
    "date-fns": "^2.4.1",
    "expo": "^35.0.0",
    "expo-google-app-auth": "^7.0.0",
    "firebase": "^7.2.2",
    "lodash": "^4.17.15",
    "mobx": "^5.14.0",
    "mobx-react-lite": "^1.5.0",
    "react": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-reanimated": "^1.2.0",
    "react-native-safe-area-context": "^0.3.6",
    "react-native-safe-area-view": "^0.14.8",
    "react-native-screens": "^1.0.0-alpha.23",
    "react-native-svg": "^9.9.6",
    "react-native-ui-kitten": "^4.3.0-beta.1"
  },

[artyorsh]

Hi 👋

Can the code below fix your issue? I guess this is not a bug but an individual use-case

import React from 'react';
import { StatusBar } from 'react-native';
import { OverflowMenu } from 'react-native-ui-kitten';

const OverflowMenuShowcase = (props) => (
  <OverflowMenu
    {...props}
    style={{marginTop: StatusBar.currentHeight}}
  />
);

[damienix]

Thanks for the response. I did exactly this yesterday and yes it does fix the issue.

TBH the last time I was trying to use the popups I just gave up because of this. Only yesterday I figure out that it's the bar that causes the problem so I submitted the bug. The functionality is broken OOB so I see it as a bug (I expected that popup is positioned relatively to its child element which is not true in this case), but it's your call here in this repo :)

Just mind that other people using translucent StatusBar will also see all pop-ups as not-working properly.

[artyorsh]

We can think about handling this out of the box, thanks for reporting 👍

[jorgnyg]

@artyorsh you know if it's possible to fix this without setting StatusBar to translucent? setting it to translucent makes the splashscreen and statusbar behave weird..

No way to do something like style={{marginTop: StatusBar.currentHeight}} for the Select component?

[artyorsh]

@jorgnyg I run it normally within Bare RN application, no special config is required. I have no idea how to deal with it other way in Expo apps, to be honest.

[archansel]

This is a valid issue for any comp using popover (currently having issue with select and datepicker comp), their popover will shifted because of translucent status bar, please fix this

[DavidDunkovich]

Is there any fix for this planned? I'm having the same issue with using Autocomplete and a hidden StatusBar

[dario30186]

I'm having the same issue for DatePicker:

Any fix available ?

[damienix]

Have you tried this #743 (comment)?

[dario30186]

Have you tried this #743 (comment)?

Yes, I applied this workaround to "Datepicker" component but it doesn't work!

[dario30186]

I should apply the fix to "Calendar" component inside the DatePicker component. Do you know how can I do this ?

[damienix]

No, sorry :(

[msvargas]

While, you can use patch-package and use this:

For Select component apply this patch:

@ui-kitten+components+5.0.0.patch

diff --git a/node_modules/@ui-kitten/components/ui/select/select.component.js b/node_modules/@ui-kitten/components/ui/select/select.component.js
index a5525e8..fc77dac 100644
--- a/node_modules/@ui-kitten/components/ui/select/select.component.js
+++ b/node_modules/@ui-kitten/components/ui/select/select.component.js
@@ -356,6 +356,10 @@ const styles = react_native_1.StyleSheet.create({
     },
     popover: {
         overflow: 'hidden',
+        // fix select popover in Android if StatusBar is translucent
+        get marginTop(){
+            return react_native_1.StatusBar.currentHeight
+        }
     },
     list: {
         flexGrow: 0,