Hidden Status Bar results in black bar instead of transparent [Android 13, Google Pixel 6] #39362
Description
Description
Greetings,
Reporting a bug found in react-native Status Bar, specifically on Google Pixel 6. I have only been able to test on a Pixel 6 device setup with Android v13 (API 33).
In order to hide the status bar, and expose the view behind it, we do the following:
StatusBar.setHidden(true);
if (Platform.OS === 'android')
{
StatusBar.setBackgroundColor('transparent');
StatusBar.setTranslucent(true);
}
On Pixel 6, this does not work, and instead the status bar is rendered as a black bar, entirely covering the status bar area.
The bug does not reproduce on any of the following devices available to me:
- Google Pixel 3 Android v11
- Samsung Galaxy s9 Android v10
- Android Pixel 6 v13 EMULATOR
EXPECTED:
Pixel 3 & Galaxy s9 - init state
Pixel 3 & Galaxy s9 - touched
ACTUAL:
Pixel 6 - init state
Pixel 6 - touched
React Native Version
0.71.7
Output of npx react-native info
System:
OS: macOS 13.4.1
CPU: (10) arm64 Apple M1 Pro
Memory: 60.08 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.4.0 - /opt/homebrew/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 9.7.2 - /opt/homebrew/bin/npm
Watchman: 2023.07.10.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.12.1 - /Users/joju/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9014738
Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
Languages:
Java: 20.0.1 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.7 => 0.71.7
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Steps to reproduce
On Google Pixel 6, create react native app with the following component
import { Component } from "react";
import { Platform, StatusBar, View } from "react-native";
export default class App extends Component<{},{}> {
componentDidMount() {
StatusBar.setHidden(true);
if (Platform.OS === 'android')
{
StatusBar.setBackgroundColor('transparent');
StatusBar.setTranslucent(true);
}
}
render() {
return (
<View style={{flex: 1, backgroundColor:'blue'}}/>
);
}
}