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.

StatusBar style different between standalone app and expo app

See original GitHub issue

🐛 Bug Report

Environment

  Expo CLI 2.13.0 environment info:
    System:
      OS: macOS 10.14.3
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.15.3 - /var/folders/gj/0mygpdfn6598xh34njlyrqzc0000gn/T/yarn--1553783196803-0.8192714850884069/node
      Yarn: 1.13.0 - /var/folders/gj/0mygpdfn6598xh34njlyrqzc0000gn/T/yarn--1553783196803-0.8192714850884069/yarn
      npm: 6.9.0 - ~/.nvm/versions/node/v10.15.3/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    IDEs:
      Xcode: 10.2/10E125 - /usr/bin/xcodebuild
    npmPackages:
      @types/expo: ^32.0.9 => 32.0.9
      @types/react: ^16.8.1 => 16.8.6
      @types/react-native: ^0.57.18 => 0.57.38
      expo: ^32.0.0 => 32.0.6
      react: 16.5.0 => 16.5.0
      react-native: https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz => 0.57.1
      react-navigation: ^3.0.9 => 3.3.2
    npmGlobalPackages:
      expo-cli: 2.11.9

iOS standalone and client

Steps to Reproduce

The StatusBar when running in the Expo app is different from a built Standalone app.

Expected Behavior

The app should look identical regardless if the app is ran in the expo app or standalone

Actual Behavior

the clock etc gets black text in the expo app, but white text in standalone.

Reproducible Demo

Happy to create one if you need one, but I think this is pretty straight-forward.

The fix is to add StatusBar.setBarStyle('dark-content'); in our own App.tsx file

Issue Analytics

State:
Created 4 years ago
Reactions:8
Comments:32 (12 by maintainers)

Top GitHub Comments

16reactions

SimenBcommented, Apr 9, 2019

We added

StatusBar.setBarStyle('dark-content');

if (Platform.OS === 'android') {
  StatusBar.setTranslucent(true);
  StatusBar.setBackgroundColor('transparent');
}

Which works for us

5reactions

SleeplessBytecommented, Feb 3, 2022

This API actually worked/works when using expo build, but is broken on eas (same as @richardwu is mentioning).

The bug isn’t just that the status bar is white, it’s that it does not use the defined properties in app.json / does not respond to the <StatusBar> component mounted. It doesn’t matter if react-native or expo-status-bar is used.

expo client: works
eas dev client: 💥 sometimes works 💥
expo standalone ios: works
expo standalone android: works
eas standalone ios: works
eas standalone android: 💥 broken 💥

In my case, I get #00000080 as background colour with black foreground text, no matter the background colour and/or bar style.

Top Results From Across the Web

Configuring the status bar - Expo Documentation

The StatusBar component provided by expo-status-bar allows you to control the appearance of the status bar while your app is running. expo-status-bar also ......

React Native App Targeting Mobile, Web & Desktop With Expo ...

In this article, we will check how to combine React Native apps targeting mobile and web platforms with a new desktop framework called...

Can't see buttons neither my textinputs get inputs in my react ...

import { StatusBar } from 'expo-status-bar'; import React, {useState,useEffect, Component} from "react"; import { StyleSheet, Text, View, ...

Adding Stripe payments to your React Native App with Expo.

//App.js import { StatusBar } from 'expo-status-bar'; import React ... GooglePay to work you need to have a standalone app using eas build...

Let's Create: Mobile App with React Native and Firebase |

Most people will recommend that you start with Expo, and only eject if you ever need to. Some people will tell you that...