[expo-dev-client] [status bar] [android] Statusbar is fully transparent instead of translucent

Summary

On Android, when using expo-dev-client and starting the packager via expo start --dev-client the status bar is fully transparent instead of being translucent. The test project was created via CRNA, no native changes were made.

Expected	Actual

Managed or bare workflow? If you have made manual changes inside of the ios/ or android/ directories in your project, the answer is bare!

bare

What platform(s) does this occur on?

Android

Package versions

"expo": "~42.0.0",
"expo-dev-client": "^0.4.3",
"expo-status-bar": "~1.0.4",
"react": "16.13.1",
"react-native": "~0.63.4",
"expo-splash-screen": "~0.11.2",
"react-native-unimodules": "~0.14.3"

Environment

Expo CLI 4.7.3 environment info: System: OS: macOS 11.4 Shell: 5.8 - /bin/zsh Binaries: Node: 16.4.2 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 7.18.1 - /usr/local/bin/npm Watchman: 2021.06.07.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.10.1 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4 Android SDK: API Levels: 23, 24, 29, 30 Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0, 31.0.0, 31.0.0, 31.0.0 System Images: android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom IDEs: Android Studio: 4.2 AI-202.7660.26.42.7486908 Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild npmPackages: expo: ~42.0.0 => 42.0.0 react: 16.13.1 => 16.13.1 react-dom: 16.13.1 => 16.13.1 react-native: ~0.63.4 => 0.63.4 react-native-web: ~0.13.12 => 0.13.18 npmGlobalPackages: expo-cli: 4.7.3 Expo Workflow: bare

Reproducible demo or steps to reproduce from a blank project

• npx crna -t with-dev-client
• use the following code in App.js:

import React from "react";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Test 1:

• run expo start --dev-client
• open app and check status bar

❌ NOK: Statusbar is fully invisible instead of having a grey background.

Test 2:

• completely close the previous app instance (refresh does not work)
• run yarn react-native start
• open app and check status bar

✅ OK: Statusbar is translucent.

Stacktrace (if a crash is involved)

No response

[Yonom]

I updated the global eas and expo installations and got a transparent status bar instead of a translucent one as well.

I am not sure when or if the defaults changed, but I had to set the following to make the status bar translucent as I expected it to be:

    "androidStatusBar": {
      "barStyle": "light-content",
    },

This behavior is consistent on dev and release modes and actually documented here https://docs.expo.dev/versions/latest/config/app/#barstyle, so I will close this issue now!

[lukmccall]

Hmm, that’s weird. I tested your app on the Pixel 3 emulator. In my case, the status bar is always transparent.

I’m guessing that it should be `translucent either way but, weirdly, the behavior is the same no matter what I do.