Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Popover ignores translucent StatusBar on Android

See original GitHub issue

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:

Add <StatusBar translucent={true}/>
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"
  },

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:13

Top GitHub Comments

3reactions

jorgnygcommented, May 8, 2020

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

2reactions

artyorshcommented, Dec 2, 2019

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}}
  />
);

Top Results From Across the Web

Configuring the status bar - Expo Documentation

Defaults to true . A translucent status bar makes sense when the backgroundColor is using a transparent color ( #RRGGBBAA ).

Translucent status bar in Android - Stack Overflow

The code below is making the status bar transparent but navigation bar opaque for API21+. NOTE: you shouldn't be setting android:fitsSystemWindows="true" .

react-native-popover-view - npm

The Popover will not be allowed to go beyond the display area minus the insets. statusBarTranslucent, bool, For 'rn-modal' mode on Android only....

PopupWindow - Android Developers

Set the flag on popup to ignore cheek press events; by default this flag is set to false which means the popup will...

Customize the Application Status Bar

The background color of the status bar. To have the status bar transparent, don't set this property. Expected color format: #RRGGBB .