Hide status bar splash screen android

The status bar configuration often feels like a small detail to a developer, but it can make a big difference in the overall feel and perceived level of polish of your app by users. When you have a white status bar on a white background, you just know something isn't going quite right.

This guide is intended to help you know what tools are at your disposal to configure the status bar for your iOS and Android apps.

Notice how bad the contrast is between the status bar text and the background in the second image. This is what we want to try to avoid.

This type of configuration is currently only available on Android. On iOS, it is not possible in the Expo Go app to customize the status bar before the app has loaded, while the splash screen is presented.

The configuration for configuring the status bar while the splash screen is visible on Android is available through the androidStatusBar object in app.json. The options available are similar to those provided by expo-status-bar.

Only for: 

This option can be used to specify whether the status bar content (icons and text in the status bar) is light, or dark. Usually, a status bar with a light background has dark content, and a status bar with a dark background has light content.

The valid values are:

• light-content - The status bar content is light colored (usually white). This is equivalent to expo-status-bar style="light".
• dark-content - The status bar content is dark colored (usually dark grey). This is equivalent to expo-status-bar style="dark". This is only available on Android 6.0 onwards. It will fallback to light-content in older versions. This is the default value.

If you choose light-content and have either a very light image set as the androidStatusBar1 or androidStatusBar2 set to a light color, the status bar icons may blend in and not be visible. Same goes for dark-content when you have a very dark image set as the androidStatusBar1 or androidStatusBar2 set to a dark color.

Only for: 

This option can be used to set a background color for the status bar. The valid value is a 6-character long hexadecimal solid color string with the format androidStatusBar6 (e.g. androidStatusBar7) or 8-character long hexadecimal color string with transparency with the format androidStatusBar8 (e.g. androidStatusBar9). Defaults to expo-status-bar0 (fully transparent color) for dark-content bar style and expo-status-bar2 (semi-transparent black) for light-content bar style.

Only for: 

Value type - expo-status-bar4. Specifies whether the status bar should be translucent. When this is set to expo-status-bar5, the status bar is visible on the screen, but it takes no space and your application can draw beneath it (similar to a expo-status-bar6 element with styles expo-status-bar7 that is rendered above the app content at the top of the screen). When this is set to expo-status-bar8, the status bar behaves as a block element and limits space available on your device's screen. Defaults to expo-status-bar5.

A translucent status bar makes sense when the androidStatusBar2 is using a transparent color (androidStatusBar8). When you use a translucent status bar and a solid androidStatusBar2 (androidStatusBar6) then the upper part of your app will be partially covered by the non-transparent status bar and thus some of your app's content might not be visible to the user.

Only for: 

Value type - expo-status-bar4. Tells the system whether the status bar should be visible or not. When the status bar is not visible it can be presented via the light-content5 gesture. When set to expo-status-bar5, the status bar will not respect androidStatusBar2 or light-content8 settings. Defaults to expo-status-bar8.

The expo-status-bar0 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 provides imperative methods such as expo-status-bar3 to control the style through function calls rather than the expo-status-bar0 component, if you find that to be helpful for your use case.

To fix the contrast issue from the screenshot at the top of this guide, we could use the following code:

expo-status-bar builds on top of the expo-status-bar0 component that React Native provides to give you better defaults when you're building an app with Expo tools. For example, the expo-status-bar8 property of expo-status-bar defaults to expo-status-bar5 or, if you have changed that property in androidStatusBar, it will use that value instead. The default in React Native for expo-status-bar8 is always expo-status-bar8, which can be confusing when in projects created using Expo tools, because the default is expo-status-bar5 for consistency with iOS.

If you use expo-status-bar to control your status bar style, the style="light"6 configuration will automatically pick the appropriate default style depending on the color scheme currently used by the app (this is the default behavior, if you leave out the style prop entirely then style="light"7 will be used). Please note that if you provide a way for users to toggle between color schemes rather than using the operating system theme, this will not have the intended behavior, and you should use style="light" and style="dark" as needed depending on the selected color scheme.

When you have a translucent status bar, it's important to remember that content can be rendered underneath it (if it couldn't, what would be the point of it being translucent? there would be nothing for you to see through it!).

Libraries like React Navigation will handle this for you when the UI that they provide overlap with the status bar. You are likely to encounter cases where you will need to manually adjust your layout to prevent some content (such as text) from being rendered underneath it. To do this, we recommend using dark-content0 to find the safe area insets and add padding or margins to your layout accordingly.

Projects initialized with Expo tools make the status bar expo-status-bar8 by default on Android. This is consistent with iOS and more in line with material design. Unfortunately, some libraries don't support expo-status-bar8 status bars. This is generally bad practice and those libraries should be fixed, but if you must use one of them, there are some options available for you to accommodate their limitations:

Setting solely androidStatusBar2 to an opaque color will disable the dark-content4 of the status bar, but preserve dark-content5. You need to explicitly set expo-status-bar8 to expo-status-bar8 if you want your app's status bar to take up space on the device's screen. This is a good option if your status bar color never needs to change, for example:

{
  "expo": {
    "androidStatusBar": {
      "backgroundColor": "#C2185B",
      "translucent": false
    }
  }
}

You can place an empty expo-status-bar6 on top of your screen with a background color to act as a status bar or set top padding. You can get the height of the status bar (and notch, if there is one) by using the top inset value provided by dark-content0.

How do I remove the status bar from my splash screen Android?

How can I hide my status bar icon in Android?

How can I make my status bar invisible?

How to hide action bar in splash screen in Android Studio?